TypeScript：标记的模板文字显示错误答案

【问题标题】：TypeScript: Tagged Template Literals shows ErrorTypeScript：标记的模板文字显示错误
【发布时间】：2017-07-19 00:24:33
【问题描述】：

我正在尝试将 ES5 的 tagged template literal 与 typescript 一起使用，但似乎 type script 并没有完全支持它。我有以下代码。

class TemplateLiterals { 
    age: number = 24;
    name: 'Luke Skywalker'
    private tag(strings: string[], personExp, ageExp) :string{
        var str0 = strings[0]; // "that "
        var str1 = strings[1]; // " is a "
        var ageStr;
        if (ageExp > 99) {
            ageStr = 'centenarian';
        } else {
            ageStr = 'youngster';
        }
        return str0 + personExp + str1 + ageStr;
    }
    toString() {
        return this.tag `that ${ this.name } is a ${ this.age }`;
    }
}

在toString 方法中，打字稿向我显示以下错误。

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

我不知道为什么它向我显示此错误。根据 mozilla 的文档“标签函数的第一个参数包含一个字符串值数组。”所以它应该接受字符串数组。但实际的期望是TemplateStringsArray。不确定如何以及何时定义 interface TemplateSringsArray。目前我使用TemplateSringsArray 类型来避免这个错误。谁能解释发生了什么。谢谢。这是playground。

【问题讨论】：

标签： javascript typescript template-literals

【解决方案1】：

经过一番摸索，终于在change log找到了解释。希望它会帮助某人。它说

ES2015 标记模板总是将它们的标记传递给一个不可变的类数组具有称为 raw 的属性（也是不可变的）的对象。 TypeScript 将此对象命名为 TemplateStringsArray。

方便地，TemplateStringsArray 可以分配给一个数组，因此用户可能会利用这一点来使用较短的类型对于他们的标签参数：

function myTemplateTag(strs: string[]) {
    // ... 
}

但是，在 TypeScript 2.0 中，该语言现在支持 readonly 修饰符和可以表示这些对象是不可变的。作为结果，TemplateStringsArray 也变成了不可变的，并且没有更长的可赋值给 string[]。

推荐：

明确使用TemplateStringsArray（或使用ReadonlyArray<string>）。

【讨论】：

这仅在您可以控制该功能时才有用。

【解决方案2】：

我也找不到关于 TemplateStringsArray 的任何文档 - 但如果您只是通过将参数更改为 TemplateStringsArray 而不是 string[] 来忽略错误（并使用名称成员修复错误），它似乎工作正常

class TemplateLiterals { 
    age: number = 24;
    name: string = 'Luke Skywalker'
    private tag(strings: TemplateStringsArray, personExp, ageExp) :string{
        var str0 = strings[0]; // "that "
        var str1 = strings[1]; // " is a "
        var ageStr;
        if (ageExp > 99) {
            ageStr = 'centenarian';
        } else {
            ageStr = 'youngster';
        }
        return str0 + personExp + str1 + ageStr;
    }
    toString() {
        return this.tag `that ${ this.name } is a ${ this.age }`;
    }
}

var luke: TemplateLiterals = new TemplateLiterals()
console.log(luke.toString())

【讨论】：

Currently I am using TemplateSringsArray type to avoid this error.

【解决方案3】：

上述答案对我不起作用，也许要求截至现在（2021 年 12 月）已经改变。

但我能够使用 ReadonlyArray<string> 而不是 string[] 解决我的问题。

这是我的示例函数，以防对某人有所帮助。

function myTemplateTag(strs: ReadonlyArray<string>) {
  // Do something.
}

【讨论】：