Импорт HTML в TypScript для использования в качестве TemplateStringLiteral

Dimas Satrio спросил: 12 мая 2018 в 04:23 в: html

Это мой первый раз с использованием машинописного текста и хочу включить машинописный ввод в мою сборку webpack.

Я использую ts-loader и babel-loader для загрузки файлов ts и прямо сейчас, пытаясь загрузить html-файл в скрипт. (Polymer Lit 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>;
}

Это часть функции html из lit-html

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

В принципе, мне нужна эта часть строк, которая изменяется на [raw : val] not {raw: val}


2 ответа

scipper ответил: 18 мая 2018 в 06:13

Относительно вашей ошибки:

TS2345: аргумент типа 'string []' не присваивается параметру типа 'TemplateStringsArray'.Property' raw 'отсутствует в типе' string [ ] '.

Вам необходимо обернуть этот параметр, чтобы он соответствовал интерфейсу TemplateStringsArray следующим образом:

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

Таким образом вы предоставите необходимый raw и сообщите html() -функцию, что данный объект имеет тип TemplateStringsArray.

Dimas Satrio ответил: 31 мая 2018 в 03:11
Привет, спасибо за ваш ответ, он указывает на правильное направление, но я боюсь, что мое ограниченное знание этой проблемы нуждается в вашем опыте. Вы видите, возвращаемое значение для указанного выше кода {raw : values}, однако для библиотеки, которую я использую, нужно значение, возвращаемое как [raw: values], поэтому функция рендеринга, которую я использую return не определено. Какую часть меня нужно изменить, чтобы исправить это? Ill также содержит некоторую информацию о самом TemplateStringsArray в моем вопросе выше. Спасибо за ваше время.
scipper ответил: 31 мая 2018 в 05:12
Мне интересно, что библиотека, которую вы используете, ожидает массив, как вы описали, потому что это строго говорит не соответствует интерфейсу. но в любом случае, я рад, что вы это исправили.
halfer Dimas Satrio ответил: 08 июня 2018 в 04:53

Окончательный вариант ответа, который работает правильно, выглядит следующим образом:

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