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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (230)

我正在尝试使用webpack-4在一个打字稿项目中集成/使用jsview / jsrender。由于通过npm安装的jsrender / jsviews包不包含类型定义,因此它们不是通过DefinitelyTyped可用,而是jsview / jsrender的作者分别提供了类型定义。我将它们保存在typings / [jsrender,jsview]文件夹中并修改了我的tsconfig.json,如下所示:

我的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"
]

}

我导入jsrender:

import * as jsrender from 'jsrender'; 

当我尝试使用jsrender时:

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

webpack抱怨以下错误:

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

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

/// <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;
}

我不知道为什么webpack会抱怨,即使在调试时,如果我这样做:

let tmpl = jsrender($);

并在上面的行上放置一个断点,我可以看到tmpl对象确实有“模板”功能。

我不确定它是否是webpack问题,tsconfig问题或我使用jsrender的方式。

提问于
用户回答回答于

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

JsRender index.d.ts应该像这样开始:

declare module 'jsrender' {
    export = jsrender;
}

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

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

interface JQueryStatic {
...

和JsViews index.d.ts应该这样开始:

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.

以上内容可能会有所变化。我在确认确切的index.d.ts更改建议之前正在研究细节......

扫码关注云+社区

领取腾讯云代金券