TypeScript データ型のテンプレートリテラルを理解する-jsチュートリアル-php.cn

TypeScript データ型のテンプレートリテラルを理解する

青灯夜游

リリース： 2021-12-17 10:40:45

転載

2048 人が閲覧しました

TypeScript チームは TypeScript 4.1 をリリースしました。これには、強力なテンプレートリテラル型、マップされた型のキーの再マッピング、および再帰的な条件付き型が含まれています。次の記事では、TypeScript のテンプレートリテラルタイプについて説明します。お役に立てば幸いです。

TypeScript データ型のテンプレートリテラルを理解する

テンプレートリテラルタイプ

テンプレートリテラルタイプは文字列リテラルタイプに基づいており、共用体タイプを介して複数のタイプに拡張できます。

これらの構文は JavaScript テンプレート文字列と同じですが、型操作でのみ使用できます。テンプレートリテラルタイプを使用すると、テンプレート内の変数が置き換えられ、新しい文字列リテラルが返されます:

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

ログイン後にコピー

テンプレート内の変数が共用体タイプの場合、考えられるすべての文字列リテラル数量が表されます:

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"

ログイン後にコピー

テンプレートリテラル内の複数の変数が共用体型の場合、結果は相互乗算されます。たとえば、次の例には 2 2 3 があり、合計 12 種類の型があります。

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"

ログイン後にコピー

実際に非常に長い文字列共用体型の場合は、事前に生成することをお勧めしますが、これは短い状況に適しています。

型の文字列共用体

テンプレートリテラルの最も便利な点は、型の内部情報に基づいて新しい文字列を定義できることです。例を見てみましょう:

関数 makeWatchedObject があり、渡されたオブジェクトに on メソッドを追加します。 JavaScript では、その呼び出しは次のようになります: makeWatchedObject(baseObject)、受信オブジェクトは次のとおりであると想定します:

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

ログイン後にコピー

この on メソッドはこの受信時に追加されますオブジェクトの場合、このメソッドは eventName (string タイプ) と callBack (function タイプ) の 2 つのパラメータを受け入れます。

#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 result = makeWatchedObject(baseObject);
result.on(eventName, callBack);

ログイン後にコピー

この例では、on メソッドによって追加されたイベント名が追加されていることに注意してください。は

"firstName"

ではなく "firstNameChanged" であり、コールバック関数によって渡される値は newValue です。制約は にする必要があります。 string タイプ。まずは最初のポイントを実装しましょう。この例では、渡されるイベント名の型がオブジェクトプロパティ名の結合であることを望みますが、各結合メンバーは最後に Changed 文字で結合されます。 JavaScript では、このような計算を行うことができます:

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

ログイン後にコピー

テンプレートリテラルでも同様の文字列操作が提供されます:

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

ログイン後にコピー

ここの例では、テンプレートリテラルに It's

と記述していることに注意してください。 string & keyof Type

ですが、単に

keyof Type

と書いてもいいでしょうか？このように書くと、エラーが報告されます:

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;

ログイン後にコピー

エラーメッセージから、エラーの理由もわかります。「TypeScript シリーズの Keyof 演算子」では、 がkeyof 演算子型

string |number |symbol

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'.
// ...

ログイン後にコピー

または次のように書くこともできます:

type PropEventSource = {
    on(eventName: `${Exclude}Changed`, callback: (newValue: any) => void): void;
};
ログイン後にコピー

このメソッドを使用すると、TypeScript はエラーを返します。間違ったイベント名を使用してください:

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

ログイン後にコピー

テンプレートリテラルによる推論

次に 2 番目のポイント、コールバック関数によって渡される値の型と対応する属性を実装しましょう。値は同じ型です。ここでは、callBack のパラメータに

any

タイプを単純に使用しています。この制約を実現する鍵は、汎用関数を使用することです:

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

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 文件里找到它们。

`Uppercase`

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

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"

ログイン後にコピー

`Lowercase`

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

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"

ログイン後にコピー

`Capitalize`

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

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

ログイン後にコピー

`Uncapitalize`

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

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

以上がTypeScript データ型のテンプレートリテラルを理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。