Maison > Article > interface Web > Comprendre les littéraux de modèle dans les types de données TypeScript

Comprendre les littéraux de modèle dans les types de données TypeScript

青灯夜游avant: 2021-12-17 10:40:452203parcourir

L'équipe TypeScript a publié TypeScript 4.1, qui comprend de puissants types littéraux de modèles, un remappage de touches des types mappés et des types conditionnels récursifs. L'article suivant vous présentera les types littéraux de modèles dans TypeScript. J'espère qu'il vous sera utile !

Types littéraux de modèles

Les types littéraux de modèles sont basés sur des types littéraux de chaîne et peuvent être étendus en plusieurs chaînes via des types d'union.

Ils ont la même syntaxe que les chaînes de modèles JavaScript, mais ne peuvent être utilisés que dans des opérations de type. Lorsqu'un type littéral de modèle est utilisé, il remplace la variable dans le modèle et renvoie une nouvelle chaîne littérale :

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

Lorsque la variable dans le modèle est de type union, chaque littéral de chaîne possible est représenté :

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"

Si plusieurs variables dans les littéraux du modèle sont de type union, les résultats seront multipliés de manière croisée. Par exemple, l'exemple suivant a 2 2 3, un total de 12 résultats :

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"

S'il est vraiment très long, le type d'union chaîne est recommandé. à générer à l’avance. Ce type convient toujours aux situations plus courtes.

Unions de chaînes dans les types

La chose la plus utile à propos des littéraux de modèle est que vous pouvez définir une nouvelle chaîne basée sur les informations internes d'un type :

Il existe une telle fonction makeWatchedObject ajoute une méthode <code>on à l'objet transmis. En JavaScript, son appel ressemble à ceci : makeWatchedObject(baseObject), on suppose que l'objet entrant est : makeWatchedObject，它会给传入的对象添加了一个 on 方法。在 JavaScript 中，它的调用看起来是这样：makeWatchedObject(baseObject)，我们假设这个传入对象为：

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

这个 on 方法会被添加到这个传入对象上，该方法接受两个参数，eventName （ string 类型）和 callBack （function 类型）：

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

我们希望 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)。使用这样的签名，我们是不能实现上面所说的这些约束的，这个时候就可以使用模板字面量：

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}!`);
});

注意这个例子里，on 方法添加的事件名为 "firstNameChanged"，而不仅仅是 "firstName"，而回调函数传入的值 newValue ，我们希望约束为 string 类型。我们先实现第一点。

在这个例子里，我们希望传入的事件名的类型，是对象属性名的联合，只是每个联合成员都还在最后拼接一个 Changed 字符，在 JavaScript 中，我们可以做这样一个计算：

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

模板字面量提供了一个相似的字符串操作：

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

declare function makeWatchedObject<Type>(obj: Type): Type & PropEventSource<Type>;

注意，我们在这里例子中，模板字面量里我们写的是 string & keyof Type，我们可不可以只写成 keyof Type 呢？如果我们这样写，会报错：

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

// Type &#39;keyof Type&#39; is not assignable to type &#39;string | number | bigint | boolean | null | undefined&#39;.
// Type &#39;string | number | symbol&#39; is not assignable to type &#39;string | number | bigint | boolean | null | undefined&#39;.
// ...

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

再或者这样写：

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

使用这种方式，在我们使用错误的事件名时，TypeScript 会给出报错：

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 &#39;"firstName"&#39; is not assignable to parameter of type &#39;"firstNameChanged" | "lastNameChanged" | "ageChanged"&#39;.
 
// It&#39;s typo-resistant
person.on("frstNameChanged", () => {});
// Argument of type &#39;"frstNameChanged"&#39; is not assignable to parameter of type &#39;"firstNameChanged" | "lastNameChanged" | "ageChanged"&#39;.

模板字面量的推断（Inference with Template Literals）

现在我们来实现第二点，回调函数传入的值的类型与对应的属性值的类型相同。我们现在只是简单的对 callBack 的参数使用 any

type PropEventSource<Type> = {
    on<Key extends string & keyof Type>
        (eventName: `${Key}Changed`, callback: (newValue: Type[Key]) => void ): void;
};
 
declare function makeWatchedObject<Type>(obj: Type): Type & PropEventSource<Type>;

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");
    }
})

La méthode on y sera ajoutée. objet, cette méthode accepte deux paramètres, eventName (type string) et callBack (type function) : 🎜

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

🎜Nous espérons que eventName est sous la forme : attributeInThePassedObject + "Changed" , par exemple, passedObject a un attribut firstName, le <code>eventName correspondant est firstNameChanged, de même, lastName correspond à lastNameChanged , age correspond à <code>ageChanged. 🎜🎜Lorsque cette fonction callBack est appelée : 🎜

doit recevoir le même type de valeur que attributeInThePassedObject. Par exemple, dans passedObject, le type de valeur de firstName est string, et la fonction de rappel correspondant au firstNameChanged l'événement accepte le message transmis. Entrez une valeur de type string. Le type de valeur de age est number, et la fonction de rappel correspondant à l'événement ageChanged accepte un type number transmis en valeur.
Le type de valeur de retour est de type void.

🎜on() La signature de la méthode ressemblait initialement à ceci : on(eventName: string, callBack: (newValue: any) => void) . En utilisant une telle signature, nous ne pouvons pas implémenter les contraintes mentionnées ci-dessus. Pour le moment, nous pouvons utiliser des littéraux de modèle : 🎜

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

🎜Notez que dans cet exemple, l'événement ajouté par la méthode on est nommé "firstNameChanged", pas seulement "firstName", et la valeur transmise par la fonction de rappel est newValue, nous voulons que la contrainte soit type de chaîne code>. Mettons d’abord en œuvre le premier point. 🎜🎜Dans cet exemple, nous espérons que le type du nom d'événement transmis est une union de noms de propriétés d'objet, mais chaque membre de l'union est épissé avec un caractère Changed à la fin. , nous pouvons effectuer le calcul suivant : 🎜

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

🎜Les littéraux de modèle fournissent une opération de chaîne similaire : 🎜

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

🎜Notez que dans notre exemple ici, ce que nous avons écrit dans le littéral de modèle est string & keyof Type, pouvons-nous simplement l'écrire sous la forme keyof Type ? Si nous écrivons comme ceci, une erreur sera signalée : 🎜

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;
}

🎜À partir du message d'erreur, nous pouvons également voir la raison de l'erreur dans "Keyof Operator of TypeScript Series", nous savons que la keyof renverra <code>string number | symbol, mais le type requis de la variable littérale du modèle est

string number | bigint | est un symbole de plus, donc en fait nous pouvons aussi l'écrire comme ceci : 🎜rrreee🎜 Ou nous pouvons l'écrire comme ceci : 🎜rrreee🎜En utilisant cette méthode, lorsque nous utilisons le mauvais nom d'événement, TypeScript donnera une erreur : 🎜rrreee<h3><strong>Inférence de modèle avec des littéraux de modèle</strong></h3>🎜Réalisons maintenant le deuxième point Le type de la valeur transmise par la fonction de rappel est le même que le type de l'attribut correspondant. valeur. Nous utilisons maintenant simplement le type <code>any

pour les paramètres de callBack. La clé pour réaliser cette contrainte est d'utiliser des fonctions génériques : 🎜

捕获泛型函数第一个参数的字面量，生成一个字面量类型
该字面量类型可以被对象属性构成的联合约束
对象属性的类型可以通过索引访问获取
应用此类型，确保回调函数的参数类型与对象属性的类型是同一个类型

type PropEventSource<Type> = {
    on<Key extends string & keyof Type>
        (eventName: `${Key}Changed`, callback: (newValue: Type[Key]) => void ): void;
};
 
declare function makeWatchedObject<Type>(obj: Type): Type & PropEventSource<Type>;

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<Greeting>        
// type ShoutyGreeting = "HELLO, WORLD"
 
type ASCIICacheKey<Str extends string> = `ID-${Uppercase<Str>}`
type MainID = ASCIICacheKey<"my_app">
// type MainID = "ID-MY_APP"

Lowercasea24091e5aa4cbf3564292ba7dbe442c1

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

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

Capitalizea24091e5aa4cbf3564292ba7dbe442c1

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

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

Uncapitalizea24091e5aa4cbf3564292ba7dbe442c1

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

type UppercaseGreeting = "HELLO WORLD";
type UncomfortableGreeting = Uncapitalize<UppercaseGreeting>;           
// 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学习教程】

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript typescript 数据类型 String Boolean NULL 回调函数字符串递归 void 值类型泛型 number undefined symbol function 对象事件

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Un article pour parler de l'analyse du chemin du module dans Node.jsArticle suivant：Un article pour parler de l'analyse du chemin du module dans Node.js

Articles Liés

Voir plus