javascript TypeScript:标记的模板文字显示错误

gxwragnw  于 2023-03-21  发布在  Java
关注(0)|答案(4)|浏览(152)

我试图使用tagged template literal的ES5与typescript,但它似乎像类型脚本没有完全支持它。我有以下代码段。

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方法中,typescript显示以下错误。

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

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

y1aodyip

y1aodyip1#

经过更多的探索,我终于在更改日志中找到了解释。希望它能帮助到一些人。它说
ES2015标记的模板总是将其标记传递给一个不可变的类似数组的对象,该对象具有一个名为raw的属性(也是不可变的)。TypeScript将此对象命名为TemplateStringsArray。
方便的是,TemplateStringsArray可以赋值给Array,所以用户可以利用这一点来使用更短的类型作为他们的标记参数:

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

然而,在TypeScript 2.0中,语言现在支持readonly修饰符,并且可以表示这些对象是不可变的。因此,TemplateStringsArray也变得不可变,并且不再可分配给string[]。
建议:
显式使用TemplateStringsArray(或使用ReadonlyArray<string>)。

moiiocjp

moiiocjp2#

我也找不到任何关于TemplateStringsArray的文档--但是如果您忽略这个错误,将参数改为TemplateStringsArray而不是string[](并修复了一个名为member的bug),它似乎可以正常工作

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())
rqqzpn5f

rqqzpn5f3#

上述答案对我不起作用,可能截至目前(2021年12月)要求已发生变化。
但是我能够使用ReadonlyArray<string>而不是string[]解决我的问题。
这是我的示例函数,以防对某人有帮助。

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

gr8qqesn4#

我在使用Angular的$localize函数时也遇到了同样的问题。我的问题是我用错了方法:

// ERROR:
const translated = $localize(`Something to translate!`);
// WORKS, remove the parentheses:
const translated = $localize`Something to translate!`;

希望能节省一些时间:D

相关问题