テンプレートスクリプトの型

この記事では、テンプレートリテラル型を詳しく見てみましょう.また、開発者として日々の活動をどのように活用することができますか.
では、テンプレートリテラル型は何ですか?

文字通りのタイプ

どのようなテンプレートリテラル型を理解するには、まずリテラル型を簡単に見る必要があります.リテラル型では、文字列や数値のように一般化されたものの代わりに、より具体的な型を定義できます.
あなたがスイッチを持っているとしましょうこれは、オンまたはオフの値を持つことができます.この型の型を定義する1つの方法は、リテラル型を使用することですOn or Off :

type Switch = "On" | "Off"

上記の場合、タイプスイッチのどんな変数の値もOn or Off :

const x: Switch = "On"
const y: Switch = "Off"

他の値を代入しようとするとOn or Off , エラーがスローされます.

テンプレートリテラル型

テンプレートリテラル型を使用すると、テンプレートを使用して新しい型を構築でき、さまざまな文字列に展開できますUnions . これはまさにtemplate literal/strings , しかし、文字列を形成するために連結するのではなく、型を連結する.

const variable = "string";
type tVariable = "string";

// this results to a variable
const val = `This is a concatenated ${variable}`

// while this results to type
type X = `This is a concatenated ${tVariable}`

見ることができるように、彼らは、彼らが定義されているものとは別の構文で類似しています.最初の定義の型は文字列です.一方、2番目のものはタイプ1ですThis is a concatenated string また、その型の変数はその文字列にのみ割り当てることができます.

NB: If you tried to use variable instead of a type when defining Template Literal Type, it will throw the following error: 'variable' refers to a value, but is being used as a type here. Did you mean 'typeof variable'?

タイプスイッチの上の例を取るなら、スイッチの状態を返す関数を持っているかもしれません.Switch is On or Switch is Off , そして、それが強くタイプされるならば、それはそれらのストリングだけを返すことができるという点で.テンプレートリテラル型では、次のように定義できます.

type Switch = "On" | "Off"

const x: Switch = "On"
const y: Switch = "Off"

type SwitchStatus = `Switch is ${Switch}`;

そして、この返り値は以下のようになります:Switch is On and Switch is Off :

グリッド項目の座標用のビルド型の使用

我々がグリッドシステムで働いていると言いましょう、そして、その座標を与えられた特定の箱に何かを置くように、我々の格子のいろいろな箱の上でタスクを実行したかったです.私たちが強くそれをタイプすることができて、グリッドの外で値を指定しないことを確実にするならば、それは素晴らしいでしょう.
例えば、私たちには、箱のどちらかの側の長さが3つのより小さな箱であった格子がありました.これは、私たちは私たちの大きな箱に9つの小さなボックスフィッティングがあることを確認します.リテラル型を使用して、グリッド内の位置として、各ボックスの型を作成できます.だから、最初の取得L1-H1 最後にL3-H3 次のように入力します.

type SquareBoxes = "L1-H1" | "L1-H2" | "L1-H3" | "L2-H1" | "L2-H2" | "L2-H3" | "L3-H1" | "L3-H2" | "L3-H3";

それらは、9箱の小さな格子のためにさえ手でつくるタイプの多くです.しかし、テンプレートリテラル型では、片側の長さの型を定義し、テンプレート文字列リテラルを使用して、残りの種類を拡張できます.

type length = "1" | "2" | "3";

type SmallerBoxes = `L${length}-H${length}`

そして、これは以前と同じ結果をもたらすでしょう.

これは私たちの仕事をより簡単にし、より汎用性が高いので、小さいボックスがこれまで増加または減少する場合は、長さのサイズを調整する必要があります.

// 16 boxes
type length = "1" | "2" | "3" | "4";

// 25 boxes
type length = "1" | "2" | "3" | "4" | "5";

// 4 boxes
type length = "1" | "2";

ジェネリックとの結合

私たちはいくつかの驚くべき効果にテンプレートリテラルの種類をジェネリックと組み合わせることができます.タイプのものを取りましょうPerson , これには2つのプロパティがあります.name and age .

type Person = {
    name: string;
    age: number;
}

値を更新するために呼び出される2つのメソッドを追加しますname or age すなわちnameChanged or ageChanged . タイプを取る新しいタイプを作成することができますPerson ジェネリックとして、型の各プロパティに対してPerson , 我々は、新しいプロパティを追加しますChanged type personの元のプロパティを追加しました.nameChanged and ageChanged . 付箋で新しいプロパティを作成するには、テンプレートリテラル型を使用しますChanged プロパティ名に.

type WithPersonChangedEvents<Type> = {
    [Property in keyof Type as `${string & Property}Changed`]: (newValue: Type[Property]) => void;
} & Type;

NB: The above example uses some advanced typescript technique for manipulating types on top of Template Literal Types which you can learn more here.

さて、上記の型( personとwithpersonchangedevent )の両方を使うことができます.

const person: WithPersonChangedEvents<Person> = {
    name: "Name",
    age: 20,
    nameChanged: (newName) => console.log(newName),
    ageChanged: (newAge) => console.log(newAge),
};

person.ageChanged(21); // Logs: 21
person.nameChanged("new Name"); // Logs: "new Name"

あなたが見ることができるように、我々のオブジェクト-person 2つのプロパティを持っています.

結論

私たちは、タイプスクリプトのテンプレートリテラル型と、それらをどのようにトップリテラル型でビルドするかを知り、型を定義するときにさらに柔軟性を提供します.また、さまざまなボックスのグリッドシステムの定義のような別のユースケースを見て、オブジェクトの余分なプロパティを定義するためにジェネリックとそれらを組み合わせて座標を参照してください.

資源

型からの型の作成Link .

テンプレートリテラル型ドキュメントLink .

テンプレートリテラル(テンプレート文字列)-Link .

タイプとモッキングLink .

型における型の変換—ユーティリティ型を用いて—Link .

Discuss this Article