TypeScript数据类型中模板字面量的示例分析

这篇文章主要为大家展示了“TypeScript数据类型中模板字面量的示例分析”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“TypeScript数据类型中模板字面量的示例分析”这篇文章吧。模板字面量类型以字符串字面量类型为基础，可以通过联合类型扩展成多个字符串。它们跟 JavaScript 的模板字符串是相同的语法，但是只能用在类型操作中。当使用模板字面量类型时，它会替换模板中的变量，返回一个新的字符串字面量：当模板中的变量是一个联合类型时，每一个可能的字符串字面量都会被表示：如果模板字面量里的多个变量都是联合类型，结果会交叉相乘，比如下面的例子就有 2 2 3 一共 12 种结果：如果真的是非常长的字符串联合类型，推荐提前生成，这种还是适用于短一些的情况。模板字面量最有用的地方在于你可以基于一个类型内部的信息，定义一个新的字符串，让我们举个例子：有这样一个函数 makeWatchedObject， 它会给传入的对象添加了一个 on 方法。在 JavaScript 中，它的调用看起来是这样：makeWatchedObject(baseObject)，我们假设这个传入对象为：这个 on 方法会被添加到这个传入对象上，该方法接受两个参数，eventName （ string 类型） 和 callBack （function 类型）：我们希望 eventName 是这种形式：attributeInThePassedObject + "Changed" ，举个例子，passedObject 有一个属性 firstName，对应产生的 eventName 为 firstNameChanged，同理，lastName 对应的是 lastNameChanged，age 对应的是 ageChanged。当这个 callBack 函数被调用的时候：应该被传入与 attributeInThePassedObject 相同类型的值。比如 passedObject 中， firstName 的值的类型为 string , 对应 firstNameChanged 事件的回调函数，则接受传入一个 string 类型的值。age 的值的类型为 number，对应 ageChanged 事件的回调函数，则接受传入一个 number 类型的值。返回值类型为 void 类型。on() 方法的签名最一开始是这样的：on(eventName: string, callBack: (newValue: any) => void)。 使用这样的签名，我们是不能实现上面所说的这些约束的，这个时候就可以使用模板字面量：注意这个例子里，on 方法添加的事件名为 "firstNameChanged"， 而不仅仅是 "firstName"，而回调函数传入的值 newValue ，我们希望约束为 string 类型。我们先实现第一点。在这个例子里，我们希望传入的事件名的类型，是对象属性名的联合，只是每个联合成员都还在最后拼接一个 Changed 字符，在 JavaScript 中，我们可以做这样一个计算：模板字面量提供了一个相似的字符串操作：注意，我们在这里例子中，模板字面量里我们写的是 string & keyof Type，我们可不可以只写成 keyof Type 呢？如果我们这样写，会报错：从报错信息中，我们也可以看出报错原因，在 《TypeScript 系列之 Keyof 操作符》里，我们知道 keyof 操作符会返回 string | number | symbol 类型，但是模板字面量的变量要求的类型却是 string | number | bigint | boolean | null | undefined，比较一下，多了一个 symbol 类型，所以其实我们也可以这样写：再或者这样写：使用这种方式，在我们使用错误的事件名时，TypeScript 会给出报错：现在我们来实现第二点，回调函数传入的值的类型与对应的属性值的类型相同。我们现在只是简单的对 callBack 的参数使用 any 类型。实现这个约束的关键在于借助泛型函数：捕获泛型函数第一个参数的字面量，生成一个字面量类型该字面量类型可以被对象属性构成的联合约束对象属性的类型可以通过索引访问获取应用此类型，确保回调函数的参数类型与对象属性的类型是同一个类型这里我们把 on 改成了一个泛型函数。当一个用户调用的时候传入 "firstNameChanged"，TypeScript 会尝试着推断 Key 正确的类型。它会匹配 key 和 "Changed" 前的字符串 ，然后推断出字符串 "firstName" ，然后再获取原始对象的 firstName 属性的类型，在这个例子中，就是 string 类型。TypeScript 的一些类型可以用于字符操作，这些类型处免费云主机、域名于性能的考虑被内置在编译器中，你不能在 .d.ts 文件里找到它们。把每个字符转为大写形式：把每个字符转为小写形式：把字符串的第一个字符转为大写形式：把字符串的第一个字符转换为小写形式：从 TypeScript 4.1 起，这些内置函数会直接使用 JavaScript 字符串运行时函数，而不是本地化识别 (locale aware)。以上是“TypeScript数据类型中模板字面量的示例分析”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注云技术行业资讯频道！

相关推荐: 描述了javascript的基本语法是什么

本篇内容主要讲解“描述了javascript的基本语法是什么”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编免费云主机、域名来带大家学习“描述了javascript的基本语法是什么”吧! ECMAScript描述了javascri…