我正在尝试将 ES5 的标记模板文字与打字稿一起使用，但似乎类型脚本没有完全支持它。我有以下一段代码。
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.不确定如何以及何时定义interfaceTemplateSringsArray。目前我正在使用TemplateSringsArray类型来避免此错误。谁能解释一下发生了什么。谢谢。这里是操场。
在探索了更多之后，我终于在更改日志中找到了解释。希望它能帮助某人。它说
ES2015 标记模板始终通过其标记传递不可变的类似数组 具有名为 raw 的属性(也是不可变的)的对象。 TypeScript 将此对象命名为 TemplateStringsArray。
方便的是，TemplateStringsArray 可以分配给一个数组， 因此，用户可能会利用这一点来使用较短的类型 对于其标签参数：
function myTemplateTag(strs: string[]) {
// ...
}
但是，在 TypeScript 2.0 中，该语言现在支持只读修饰符和 可以表示这些对象是不可变的。如 结果，TemplateStringsArray 也变得不可变，并且没有 可分配给字符串 [] 的更长时间。
建议：
显式使用TemplateStringsArray(或使用ReadonlyArray<string>)。
我也找不到任何关于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())
上面的答案对我不起作用，也许要求已经改变到现在(2021 年 12 月)。
但是我能够使用ReadonlyArray<string>而不是string[]来解决我的问题。
这是我的示例函数，以防这对某人有所帮助。
function myTemplateTag(strs: ReadonlyArray<string>) {
// Do something.
}
我对Angular的$localize函数也有同样的问题。我的问题是我用错了方式：
// ERROR:
const translated = $localize(`Something to translate!`);
// WORKS, remove the parentheses:
const translated = $localize`Something to translate!`;
希望能为某人节省几分钟:D