Vorlagenliterale in TypeScript-Datentypen verstehen

Das TypeScript-Team hat TypeScript 4.1 veröffentlicht, das leistungsstarke Vorlagenliteraltypen, Schlüsselneuzuordnung zugeordneter Typen und rekursive bedingte Typen enthält. Der folgende Artikel führt Sie durch die Vorlagenliteraltypen in TypeScript. Ich hoffe, er ist hilfreich für Sie!

Template-Literal-Typen

Template-Literal-Typen basieren auf String-Literal-Typen und können durch Union-Typen in mehrere Strings erweitert werden.

Sie haben die gleiche Syntax wie JavaScript-Vorlagenzeichenfolgen, können aber nur in Typoperationen verwendet werden. Wenn ein Vorlagenliteraltyp verwendet wird, ersetzt er die Variable in der Vorlage und gibt ein neues Zeichenfolgenliteral zurück:

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

Wenn die Variable in der Vorlage ein Union-Typ ist, wird jedes mögliche Zeichenfolgenliteral dargestellt:

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"

Wenn mehrere Variablen in Da die Vorlagenliterale vom Union-Typ sind, werden die Ergebnisse kreuzmultipliziert. Das folgende Beispiel hat beispielsweise 2 2 3, also insgesamt 12 Ergebnisse:

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"

Wenn es wirklich sehr lang ist, wird der String-Union-Typ empfohlen Dieser Typ eignet sich dennoch für kürzere Situationen.

String-Vereinigungen in Typen

Das Nützlichste an Vorlagenliteralen ist, dass Sie eine neue Zeichenfolge basierend auf den internen Informationen eines Typs definieren können:

Es gibt eine solche Funktion makeWatchedObjectcode> fügt dem übergebenen Objekt eine <code>on-Methode hinzu. In JavaScript sieht sein Aufruf so aus: makeWatchedObject(baseObject), wir gehen davon aus, dass das eingehende Objekt ist: 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;.
// ...

从报错信息中，我们也可以看出报错原因，在 《TypeScript 系列之 Keyof 操作符》里，我们知道 keyof 操作符会返回 string | number | symbol 类型，但是模板字面量的变量要求的类型却是 string | number | bigint | boolean | null | undefined，比较一下，多了一个 symbol 类型，所以其实我们也可以这样写：

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 '"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）

现在我们来实现第二点，回调函数传入的值的类型与对应的属性值的类型相同。我们现在只是简单的对 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");
    }
})

Die on-Methode wird zu diesem On the Incoming hinzugefügt Objekt akzeptiert diese Methode zwei Parameter, eventName (Typ string) und callBack (Typ 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"

🎜Wir hoffen, dass eventName die Form hat: attributeInThePassedObject + "Changed" , zum Beispiel hat passedObject ein Attribut firstName, der entsprechende <code>eventName ist firstNameChanged, ebenso entspricht lastName lastNameChanged , age entspricht <code>ageChanged. 🎜🎜Wenn diese callBack-Funktion aufgerufen wird: 🎜

• sollte der gleiche Werttyp wie attributeInThePassedObject übergeben werden. Beispielsweise ist in passedObject der Werttyp von firstName string und die Rückruffunktion entspricht firstNameChanged Das Ereignis akzeptiert den übergebenen Wert. Geben Sie einen Wert vom Typ string ein. Der Werttyp von age ist number, und die Rückruffunktion, die dem Ereignis ageChanged entspricht, akzeptiert einen übergebenen Typ number in. Wert.
• Der Rückgabewerttyp ist vom Typ void.

🎜on() Die Signatur der Methode sah zunächst so aus: on(eventName: string, callBack: (newValue: any) => void) . Mit einer solchen Signatur können wir die oben genannten Einschränkungen nicht implementieren. Derzeit können wir Vorlagenliterale verwenden: 🎜

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"

🎜Beachten Sie, dass in diesem Beispiel das von der on-Methode hinzugefügte Ereignis "firstNameChanged", nicht nur "firstName", und der von der Rückruffunktion übergebene Wert newValue ist, möchten wir, dass die Einschränkung ist string Code> Typ. Lassen Sie uns zunächst den ersten Punkt umsetzen. 🎜🎜In diesem Beispiel hoffen wir, dass der Typ des übergebenen Ereignisnamens eine Vereinigung von Objekteigenschaftsnamen ist, aber jedes Vereinigungsmitglied wird am Ende mit einem Changed-Zeichen gespleißt , wir Sie können eine solche Berechnung durchführen: 🎜

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

🎜Vorlagenliterale bieten eine ähnliche String-Operation: 🎜

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

🎜Beachten Sie, dass in unserem Beispiel hier das, was wir in das Vorlagenliteral geschrieben haben, string & keyof Type ist, Können wir es einfach als keyof Type schreiben? Wenn wir so schreiben, wird ein Fehler gemeldet: 🎜

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

🎜Aus der Fehlermeldung können wir auch den Grund für den Fehler erkennen. In „Keyof Operator of TypeScript Series“ wissen wir, dass der keyof-Operator gibt string-Symbol zurück, aber der erforderliche Typ der Vorlagenliteral-Variable ist bigint | ist ein weiterer Symboltyp, also können wir ihn tatsächlich auch so schreiben: 🎜rrreee🎜 Oder wir können ihn so schreiben: 🎜rrreee🎜Wenn wir mit dieser Methode den falschen Ereignisnamen verwenden, gibt TypeScript einen Fehler aus: 🎜rrreee<h3><strong>Vorlageninferenz mit Vorlagenliteralen</strong></h3>🎜Lassen Sie uns nun den zweiten Punkt erkennen. Der Typ des von der Rückruffunktion übergebenen Werts ist derselbe wie der Typ des entsprechenden Attributs Wert. Wir verwenden jetzt einfach den Typ <code>any für die Parameter von callBack. Der Schlüssel zur Realisierung dieser Einschränkung liegt in der Verwendung generischer Funktionen: 🎜

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

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

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

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

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学习教程】

Das obige ist der detaillierte Inhalt vonVorlagenliterale in TypeScript-Datentypen verstehen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!