html - 将 HTML 导入 Typescript 以用作 TemplateStringLiteral

Question

这是我第一次使用 typescript，并且想将 typescript 合并到我的 webpack 构建中。

我正在使用 ts-loader 和 babel-loader 加载 ts 文件，现在正尝试将 html 文件加载到脚本中。 (聚合物点亮 HTML)

import template from './template.html';

render(props) {
    return html([`${template}`]);
}

这是我得到的错误

TS2345: Argument of type 'string[]' is not assignable to parameter of type 'TemplateStringsArray'.
Property 'raw' is missing in type 'string[]'.

知道如何解决这个问题吗？似乎我需要将模板转换为 TemplateStringsArray，但我基本上不知道该怎么做。

更新 1:

我用这样的内容创建了 html.d.ts 文件。

declare module '*.html' {
    const content: string;
    export default content;
}

但模板似乎有一个未定义的值。

html 是 lit-html 的一个函数

export declare const html: (strings: TemplateStringsArray, ...values: any[]) => TemplateResult;

更新 2

在修改下面提供的答案后发现返回的值不太正确。现在返回的值是 {raw: values} 但我需要将其更改为 [raw: values]。

interface TemplateStringsArray extends ReadonlyArray<string> {
    readonly raw: ReadonlyArray<string>;
}

这是来自 lit-html 的 html 函数的一部分

export const html = (strings, ...values) => {
    return new TemplateResult(strings, values, 'html', extendedPartCallback)
};

基本上我需要将字符串的一部分更改为 [raw : val] 而不是 {raw: val}<​​

Answer 1

关于您的错误:

TS2345: Argument of type 'string[]' is not assignable to parameter of type 'TemplateStringsArray'. Property 'raw' is missing in type 'string[]'.

您必须像这样包装参数以适应 TemplateStringsArray 接口(interface):

const stringArray = [`${template}`];
return html({raw: stringArray, ...stringArray} as TemplateStringsArray);

通过这种方式，您可以提供所需的 raw 属性并告诉 html() 函数给定对象的类型为 TemplateStringsArray。