Ошибка поиска метода на jsrender, используя jsrender / jsviews с машинописью - PullRequest
Новая
       26

Ошибка поиска метода на jsrender, используя jsrender / jsviews с машинописью

0 голосов
/ 14 декабря 2018

Я пытаюсь интегрировать / использовать jsview / jsrender в проекте машинописного текста со сборкой, выполненной с использованием webpack-4.Поскольку пакет jsrender / jsviews, установленный через npm, не содержит определений типов, они не доступны через DefinitiveTyped, но автор (ы) 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}}');

В веб-пакете выдается следующая ошибка:

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 есть функция «templates».

Я не уверен, что это проблема webpack, tsconfig или как я использую jsrender.

1 Ответ

0 голосов
/ 15 декабря 2018

Вы правы, эти версии JsRender index.d.ts и JsViews index.d.ts неверны, для вашего сценария webpack + машинопись.

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 {
...

С этими изменениями все должно работать правильно.

Вот как выможет кодировать ваш файл .ts, если вы используете JsRender и загружаете jQuery как модуль, а не глобально: 

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

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

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

// Now use tmpl.render() etc.

На самом деле jsrender ($) возвращает $, поэтому приведенный выше более простой синтаксис эквивалентен вашей версии,(и фактически не сталкивается с проблемой ошибки объявления машинописного текста, с которой вы столкнулись).

Если вы используете 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.
...