我正在尝试在一个typescript项目中集成/使用jsview/jsrender,并使用webpack-4完成构建。由于通过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“”类型上不存在属性“”templates“”。“”
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对象确实有可用的"templates“函数。
我不确定这是因为webpack的问题,还是tsconfig的问题,还是我使用jsrender的方式。
发布于 2018-12-15 14:21:40
您是对的,这些版本的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.
https://stackoverflow.com/questions/53774430
复制相似问题