11

我正在尝试将ES5 的标记模板文字与 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定义。目前我正在使用TemplateSringsArraytype 来避免这个错误。谁能解释发生了什么。谢谢。这里是游乐场。

4

3 回答 3

10

经过更多探索，我终于在更改日志中找到了解释。希望它会帮助某人。它说

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

方便的是，TemplateStringsArray 可分配给数组，因此用户可能会利用这一点为其标签参数使用较短的类型：

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

但是，在 TypeScript 2.0 中，该语言现在支持 readonly 修饰符，并且可以表示这些对象是不可变的。因此，TemplateStringsArray 也变得不可变，并且不再可分配给 string[]。

推荐：

显式使用TemplateStringsArray（或使用ReadonlyArray<string>）。

于 2017-03-09T05:15:53.150 回答
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())
于 2017-03-01T04:18:00.437 回答
0

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

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

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

function myTemplateTag(strs: ReadonlyArray<string>) {
  // Do something.
}
于 2021-12-02T23:32:20.897 回答