使用带有typescript的jsrender/jsviews在jsrender上查找方法时出错

我试图在一个typescript项目中集成/使用jsview/jsrender，并使用webpack-4完成构建。由于通过npm安装的jsrender/jsviews包不包含类型定义，因此它们无法通过DefinitelyTyped获得，但jsview/jsrender的作者已分别提供了类型定义。我将它们保存在typings/[jsrender，jsview]文件夹中，并修改了我的tsconfig.json，如下所示：

My tsconfig.json具有以下特性：

{
"compileOnSave": true,
"compilerOptions": {
    "baseUrl": ".",
    "noImplicitAny": true,
    "removeComments": true,
    "preserveConstEnums": true,
    "sourceMap": true,
    "target": "es2015",
    "moduleResolution": "node",
    "declaration": false
},
"include": [
    "static/js/**/*",
    "*/static/ts/**/*.ts"
],
"exclude": [
    "node_modules",
    "**/*.spec.ts"
],
"files": [
    "./typings/jsrender/index.d.ts",
    "./typings/jsviews/index.d.ts"
]

/// <reference types="jquery" />

declare module 'jsrender' {
    export = jsrender;
}

declare const jsrender: JQueryStatic;

interface JQueryStatic {
    /* var htmlString = $.render.templateName(data, myHelpersObject); // Render named template */
    render: {
        [tmplName: string]: JsViews.TemplateRender;
    };

    /* $.views.xxx ... // JsRender/JsViews APIs */
    views: JsViews.Views;

    /* $.templates(...) or $.templates.templateName: Compile/get template */
    templates: JsViews.Templates;
}

}

我使用以下方法导入jsrender：

import * as jsrender from 'jsrender'; 

tmpl = jsrender($).templates('Name: {{:name}}');

当我尝试使用jsrender时：

import * as jsrender from 'jsrender'; 

tmpl = jsrender($).templates('Name: {{:name}}');

该网页包抱怨出现以下错误：

TS2339:类型上不存在属性“模板” “JQuery”

jsrender的前几行类型定义包含以下内容：

{
"compileOnSave": true,
"compilerOptions": {
    "baseUrl": ".",
    "noImplicitAny": true,
    "removeComments": true,
    "preserveConstEnums": true,
    "sourceMap": true,
    "target": "es2015",
    "moduleResolution": "node",
    "declaration": false
},
"include": [
    "static/js/**/*",
    "*/static/ts/**/*.ts"
],
"exclude": [
    "node_modules",
    "**/*.spec.ts"
],
"files": [
    "./typings/jsrender/index.d.ts",
    "./typings/jsviews/index.d.ts"
]

/// <reference types="jquery" />

declare module 'jsrender' {
    export = jsrender;
}

declare const jsrender: JQueryStatic;

interface JQueryStatic {
    /* var htmlString = $.render.templateName(data, myHelpersObject); // Render named template */
    render: {
        [tmplName: string]: JsViews.TemplateRender;
    };

    /* $.views.xxx ... // JsRender/JsViews APIs */
    views: JsViews.Views;

    /* $.templates(...) or $.templates.templateName: Compile/get template */
    templates: JsViews.Templates;
}

在上面的一行中放置一个断点，我可以看到tmpl对象确实有可用的“templates”函数

---

我不确定这是网页包问题、tsconfig问题还是我使用jsrender的方式。

你是对的，对于你的webpack+typescript场景，那些版本的jsrender index.d.ts和JsViews index.d.ts是不正确的

JsRender index.d.ts应该这样开始：

declare module 'jsrender' {
    export = jsrender;
}

declare const jsrender: ((jquery?: JQueryStatic) => JQueryStatic) & JQueryStatic;

// ********************************** JsRender **********************************

interface JQueryStatic {
...

declare module 'jsviews' {
    export = jsviews;
}

declare const jsviews: ((jquery?: JQueryStatic) => JQueryStatic) & JQueryStatic;

// ********************************** JsObservable **********************************

interface JQueryStatic {
...

JsViews index.d.ts应该这样开始：

declare module 'jsrender' {
    export = jsrender;
}

declare const jsrender: ((jquery?: JQueryStatic) => JQueryStatic) & JQueryStatic;

// ********************************** JsRender **********************************

interface JQueryStatic {
...

declare module 'jsviews' {
    export = jsviews;
}

declare const jsviews: ((jquery?: JQueryStatic) => JQueryStatic) & JQueryStatic;

// ********************************** JsObservable **********************************

interface JQueryStatic {
...

有了这些变化，事情应该会正常运转

如果使用JsRender并将jQuery作为模块加载，而不是全局加载，则可以通过以下方式编写.ts文件：

import * as $ from 'jquery'; 
import * as jsrender from 'jsrender'; 

jsrender($); // load JsRender jQuery plugin methods

let tmpl = $.templates(...);

// Now use tmpl.render() etc.

事实上，jsrender（$）返回$，因此上述更简单的语法与您的版本相同（事实上，不会遇到您遇到的typescript声明错误问题）

如果使用JsViews，则改为编写

import * as $ from 'jquery'; 
import * as jsviews from 'jsviews'; 

jsviews($); // load JsRender and JsViews jQuery plugin methods

let tmpl = $.templates(...);

// Now use tmpl.render() and/or tmpl.link() etc.

---

谢谢你的回复。我想应该有用。只是因为jsrender/jsviews的语法太复杂，所以我放弃了它们。我最终从服务器发送了预呈现的html，而不是返回Json。这不是最好的办法，但对我来说很有效。