Understanding template literals in TypeScript data types

The TypeScript team has released TypeScript 4.1, which includes powerful template literal types, key remapping of mapped types, and recursive conditional types. The following article will take you through the template literal types in TypeScript. I hope it will be helpful to you!

Template Literal Types

The template literal type is based on the string literal type and can be expanded into multiple types through union types. string.

They have the same syntax as JavaScript template strings, but can only be used in type operations. When a template literal type is used, it replaces the variable in the template and returns a new string literal:

type World = "world"; type Greeting = `hello ${World}`; // type Greeting = "hello world"

When the variable in the template is a union type, every possible string literal Quantities will be represented:

type EmailLocaleIDs = "welcome_email" | "email_heading"; type FooterLocaleIDs = "footer_title" | "footer_sendoff"; type AllLocaleIDs = `${EmailLocaleIDs | FooterLocaleIDs}_id`; // type AllLocaleIDs = "welcome_email_id" | "email_heading_id" | "footer_title_id" | "footer_sendoff_id"

If multiple variables in the template literal are of union type, the results will be cross-multiplied. For example, the following example has 223, a total of 12 types Result:

type AllLocaleIDs = `${EmailLocaleIDs | FooterLocaleIDs}_id`; type Lang = "en" | "ja" | "pt"; type LocaleMessageIDs = `${Lang}_${AllLocaleIDs}`; // type LocaleMessageIDs = "en_welcome_email_id" | "en_email_heading_id" | "en_footer_title_id" | "en_footer_sendoff_id" | "ja_welcome_email_id" | "ja_email_heading_id" | "ja_footer_title_id" | "ja_footer_sendoff_id" | "pt_welcome_email_id" | "pt_email_heading_id" | "pt_footer_title_id" | "pt_footer_sendoff_id"

If it is really a very long string union type, it is recommended to generate it in advance. This is still suitable for shorter situations.

String Unions in Types

The most useful thing about template literals is that you can define a new string based on the internal information of a type, so that Let's take an example:

There is such a functionmakeWatchedObject, which adds anonmethod to the passed in object. In JavaScript, its call looks like this:makeWatchedObject(baseObject), we assume that the incoming object is:

const passedObject = { firstName: "Saoirse", lastName: "Ronan", age: 26, };

Thisonmethod will be added On this incoming object, this method accepts two parameters,eventName(stringtype) andcallBack(functiontype):

// 伪代码 const result = makeWatchedObject(baseObject); result.on(eventName, callBack);

We hope thateventNameis in this form:attributeInThePassedObject "Changed", for example,passedObjecthas an attributefirstName, the corresponding generatedeventNameisfirstNameChanged, similarly,lastNamecorresponds tolastNameChanged,agecorresponds toageChanged.

When thiscallBackfunction is called:

• should be passed in the same type of value asattributeInThePassedObject. For example, inpassedObject, the value type offirstNameisstring, and the callback function corresponding to thefirstNameChangedevent accepts a ## passed in. #stringValue of type. The value type ofageisnumber, and the callback function corresponding to theageChangedevent accepts a value of typenumber.
The return value type is
• voidtype.

on()The signature of the method initially looked like this:on(eventName: string, callBack: (newValue: any) => void). Using such a signature, we cannot implement the constraints mentioned above. At this time, we can use template literals:

const person = makeWatchedObject({ firstName: "Saoirse", lastName: "Ronan", age: 26, }); // makeWatchedObject has added `on` to the anonymous Object person.on("firstNameChanged", (newValue) => { console.log(`firstName was changed to ${newValue}!`); });

Note that in this example, the event name added by the

onmethod is"firstNameChanged", not just"firstName", and the value passed in by the callback function isnewValue, we want the constraint to bestringtype. Let’s implement the first point first.

In this example, we hope that the type of the event name passed in is a union of object property names, but each union member is spliced with a

Changedcharacter at the end, in JavaScript , we can do such a calculation:

Object.keys(passedObject).map(x => ${x}Changed)

Template literals provide a similar string operation:

type PropEventSource = { on(eventName: `${string & keyof Type}Changed`, callback: (newValue: any) => void): void; }; /// Create a "watched object" with an 'on' method /// so that you can watch for changes to properties. declare function makeWatchedObject(obj: Type): Type & PropEventSource;

Note that in our example here, we wrote in the template literal It's

string & keyof Type, can we just write it askeyof Type? If we write like this, an error will be reported:

type PropEventSource = { on(eventName: `${keyof Type}Changed`, callback: (newValue: any) => void): void; }; // Type 'keyof Type' is not assignable to type 'string | number | bigint | boolean | null | undefined'. // Type 'string | number | symbol' is not assignable to type 'string | number | bigint | boolean | null | undefined'. // ...

From the error message, we can also see the reason for the error. In "Keyof Operator of TypeScript Series", we know that the

keyofoperator The typestring | number | symbolwill be returned, but the type required for the template literal variable isstring | number | bigint | boolean | null | undefined. For comparison, there is one more symbol type, so in fact we can also write like this:

type PropEventSource = { on(eventName: `${Exclude}Changed`, callback: (newValue: any) => void): void; };

Or write like this:

type PropEventSource = { on(eventName: `${Extract}Changed`, callback: (newValue: any) => void): void; };

Using this method, TypeScript will give an error when we use the wrong event name:

const person = makeWatchedObject({ firstName: "Saoirse", lastName: "Ronan", age: 26 }); person.on("firstNameChanged", () => {}); // Prevent easy human error (using the key instead of the event name) person.on("firstName", () => {}); // Argument of type '"firstName"' is not assignable to parameter of type '"firstNameChanged" | "lastNameChanged" | "ageChanged"'. // It's typo-resistant person.on("frstNameChanged", () => {}); // Argument of type '"frstNameChanged"' is not assignable to parameter of type '"firstNameChanged" | "lastNameChanged" | "ageChanged"'.

Inference with Template Literals

Now let’s implement the second point, the type of value passed in by the callback function and the corresponding attributes The values are of the same type. We are now simply using the

anytype for the parameters ofcallBack. The key to realizing this constraint is to use generic functions:

• 捕获泛型函数第一个参数的字面量，生成一个字面量类型

• 该字面量类型可以被对象属性构成的联合约束

• 对象属性的类型可以通过索引访问获取

• 应用此类型，确保回调函数的参数类型与对象属性的类型是同一个类型

type PropEventSource = { on (eventName: `${Key}Changed`, callback: (newValue: Type[Key]) => void ): void; }; declare function makeWatchedObject(obj: Type): Type & PropEventSource; const person = makeWatchedObject({ firstName: "Saoirse", lastName: "Ronan", age: 26 }); person.on("firstNameChanged", newName => { // (parameter) newName: string console.log(`new name is ${newName.toUpperCase()}`); }); person.on("ageChanged", newAge => { // (parameter) newAge: number if (newAge < 0) { console.warn("warning! negative age"); } })

这里我们把on改成了一个泛型函数。

当一个用户调用的时候传入"firstNameChanged"，TypeScript 会尝试着推断Key正确的类型。它会匹配key和"Changed"前的字符串 ，然后推断出字符串"firstName"，然后再获取原始对象的firstName属性的类型，在这个例子中，就是string类型。

内置字符操作类型（Intrinsic String Manipulation Types）

TypeScript 的一些类型可以用于字符操作，这些类型处于性能的考虑被内置在编译器中，你不能在.d.ts文件里找到它们。

Uppercasea24091e5aa4cbf3564292ba7dbe442c1

把每个字符转为大写形式：

type Greeting = "Hello, world" type ShoutyGreeting = Uppercase // type ShoutyGreeting = "HELLO, WORLD" type ASCIICacheKey = `ID-${Uppercase}` type MainID = ASCIICacheKey<"my_app"> // type MainID = "ID-MY_APP"

Lowercasea24091e5aa4cbf3564292ba7dbe442c1

把每个字符转为小写形式：

type Greeting = "Hello, world" type QuietGreeting = Lowercase // type QuietGreeting = "hello, world" type ASCIICacheKey = `id-${Lowercase}` type MainID = ASCIICacheKey<"MY_APP"> // type MainID = "id-my_app"

Capitalizea24091e5aa4cbf3564292ba7dbe442c1

把字符串的第一个字符转为大写形式：

type LowercaseGreeting = "hello, world"; type Greeting = Capitalize; // type Greeting = "Hello, world"

Uncapitalizea24091e5aa4cbf3564292ba7dbe442c1

把字符串的第一个字符转换为小写形式：

type UppercaseGreeting = "HELLO WORLD"; type UncomfortableGreeting = Uncapitalize; // type UncomfortableGreeting = "hELLO WORLD"

字符操作类型的技术细节

从 TypeScript 4.1 起，这些内置函数会直接使用 JavaScript 字符串运行时函数，而不是本地化识别 (locale aware)。

function applyStringMapping(symbol: Symbol, str: string) { switch (intrinsicTypeKinds.get(symbol.escapedName as string)) { case IntrinsicTypeKind.Uppercase: return str.toUpperCase(); case IntrinsicTypeKind.Lowercase: return str.toLowerCase(); case IntrinsicTypeKind.Capitalize: return str.charAt(0).toUpperCase() + str.slice(1); case IntrinsicTypeKind.Uncapitalize: return str.charAt(0).toLowerCase() + str.slice(1); } return str; }

【相关推荐：javascript学习教程】

The above is the detailed content of Understanding template literals in TypeScript data types. For more information, please follow other related articles on the PHP Chinese website!