TypeScript マッピング型の詳細

TypeScript マッピング型の詳細

序文:

TypeScriptの公式ドキュメントはかなり前に更新されていますが、私が見つけた中国語のドキュメントはまだ古いバージョンです。そのため、新規および改訂された章の一部が翻訳され、整理されました。

この翻訳は、TypeScript ハンドブックの「マップされた型」の章から編集されています。

この記事は原文通りに厳密に翻訳したものではなく、一部解説や補足も加えています。

1. マップされた型

場合によっては、ある型を別の型に基づいて作成する必要があるものの、コピーを作成したくないことがあります。この場合は、マッピング型の使用を検討できます。

マッピング タイプは、インデックス シグネチャの構文に基づいています。まずはインデックス シグネチャを確認しましょう。

// プロパティの型を事前に宣言する必要がある場合 type OnlyBoolsAndHorses = {
  [キー: 文字列]: ブール値 | 馬;
};
 
const準拠: OnlyBoolsAndHorses = {
  del: 本当、
  ロドニー: 間違いだ、
};


マッピング タイプは、 PropertyKeysユニオン タイプを使用するジェネリック タイプです。PropertyKeys PropertyKeys通常、 keyofを通じて作成され、キー名をループしてタイプを作成します。

タイプ OptionsFlags<Type> = {
  [keyof Type のプロパティ]: boolean;
};


この例では、 OptionsFlags Type のすべてのプロパティを反復処理し、それらをブール型に設定します。

タイプFeatureFlags = {
  ダークモード: () => void;
  新しいユーザープロファイル: () => void;
};
 
タイプ FeatureOptions = OptionsFlags<FeatureFlags>;
// タイプFeatureOptions = {
// darkMode: ブール値;
// 新しいユーザープロファイル: ブール値;
// }


2. マッピング修飾子

マップされた型を使用する場合、使用できる追加の修飾子が 2 つあります。1 つはプロパティを読み取り専用に設定するために使用される readonly で、もう 1 つはプロパティをオプションに設定するために使用される ? です。

これらの修飾子は、プレフィックスに - または + を付けることで削除または追加できます。プレフィックスを指定しない場合は、プレフィックス + を使用するのと同じです。

// 属性内の読み取り専用属性タイプを削除します CreateMutable<Type> = {
  -readonly [keyof Type 内のプロパティ]: Type[プロパティ];
};
 
タイプ LockedAccount = {
  読み取り専用ID: 文字列;
  読み取り専用の名前: 文字列;
};
 
UnlockedAccount を CreateMutable<LockedAccount> と入力します。

// タイプ UnlockedAccount = {
// id: 文字列;
// 名前: 文字列;
// }
// 属性内のオプション属性タイプを削除します。Concrete<Type> = {
  [Typeのキー内のプロパティ]-?: Type[プロパティ];
};
 
MaybeUser = {と入力します
  id: 文字列;
  名前?: 文字列;
  年齢?: 番号;
};
 
User を Concrete<MaybeUser> と入力します。
// タイプ User = {
// id: 文字列;
// 名前: 文字列;
//年齢: 数値;
// }

3. キーの再マッピング

TypeScript 4.1以降では、as ステートメントを使用して、マップされた型のキーを再マップできます。

タイプ MappedTypeWithNewProperties<Type> = {
    [keyof Type の NewKeyType としてのプロパティ]: Type[プロパティ]
}


たとえば、テンプレートリテラル型を使用して、以前のプロパティ名に基づいて新しいプロパティ名を作成できます。

タイプ Getters<Type> = {
    [keyof Type のプロパティは `get${Capitalize<string & Property>}` です]: () => Type[Property]
};
 
インターフェース Person {
    名前: 文字列;
    年齢: 番号;
    場所: 文字列;
}
 
LazyPerson = Getters<Person> と入力します。

// タイプ LazyPerson = {
// getName: () => 文字列;
// getAge: () => 数値;
// getLocation: () => 文字列;
// }

条件型を使用して never を返し、特定の属性を除外することもできます。

// 'kind'プロパティを削除します
タイプ RemoveKindField<Type> = {
    [キーの Type のプロパティが Exclude<Property, "kind"> である]: Type[Property]
};
 
インターフェースサークル{
    種類: "circle";
    半径: 数値;
}
 
タイプ KindlessCircle = RemoveKindField<Circle>;

// タイプ KindlessCircle = {
// 半径: 数値;
// }

また、 string | number | symbolだけでなく、任意のタイプのユニオンを反復処理することもできます。

型 EventConfig<Events extends { kind: string }> = {
    [E in Events を E["kind"]] として: (イベント: E) => void;
}
 
タイプ SquareEvent = { kind: "square", x: 数値, y: 数値 };
タイプ CircleEvent = { kind: "circle", 半径: 数値 };
 
タイプ Config = EventConfig<SquareEvent | CircleEvent>
// タイプ Config = {
// square: (イベント: SquareEvent) => void;
// 円: (イベント: CircleEvent) => void;
// }

4. さらなる調査

マッピング タイプは他の関数でも使用できます。たとえば、これは条件付きタイプを使用し、オブジェクトに pii 属性があるかどうかに応じて true または false を返すマッピング タイプです。

タイプExtractPII<Type> = {
  [keyof Type のプロパティ]: Type[プロパティ] は { pii: true } を拡張します。true : false;
};
 
タイプ DBFields = {
  id: { 形式: "増加中" };
  名前: { タイプ: 文字列; pii: true };
};
 
ObjectsNeedingGDPRDeletion を ExtractPII<DBFields> と入力します。
// type ObjectsNeedingGDPRDeletion = {
// id: false;
// 名前: true;
// }

以下もご興味があるかもしれません:
  • TypeScriptの一般的な型と応用例の説明
  • Typescriptタイプを使用してフィボナッチを計算する方法を教えます
  • TypeScriptの基本型の詳細な説明
  • TypeScript 列挙型
  • TypeScript の基本型の紹介
  • TypeScriptの型を一緒に学びましょう

<<:  CentOS7 環境で gcc (バージョン 10.2.0) をアップグレードする詳細な手順

>>:  さまざまな解像度やブラウザでウェブページを適切に表示する方法

推薦する

テーブルタグ(TAGS)の詳細な紹介

テーブルの基本構文<table>...</table> - テーブルを定義し...

MySQL は重複データを削除して最小の ID ソリューションを維持します

オンラインで検索して重複データを削除し、ID が最小のデータだけを残します。方法は次のとおりです。 ...

HTML の入力の readonly 属性と disabled 属性の違いについて簡単に説明します。

「読み取り専用」と「無効」はどちらも、ユーザーがフォーム フィールドの内容を変更できないようにしま...

flexとは何か、flexレイアウト構文の詳細なチュートリアル

フレックスレイアウトFlex は Flexible Box の略で、「柔軟なレイアウト」を意味します...

Mysql でサーバーの UUID を変更する方法

問題の原因:スレーブサーバーがクローンマスターサーバーである場合、server-uuidの値は同じで...

HTML テーブルタグチュートリアル (24): 行の水平方向の配置属性 ALIGN

水平方向では、行の配置を左、中央、右に設定できます。基本的な構文<TR ALIGN="...

面白いウェブサイトをデザインするための方法とテクニック(写真)

他の人から「つまらない」とか「時代遅れ」というフィードバックを受けて、それを変更しようとしたのに、更...

vue-router 4 の使用例の詳しい説明

目次1. インスタンスをインストールして作成する2. vue-router4の新機能2.1 動的ルー...

MySQL で中国語を入力するときに発生するエラー 1366 の解決方法

MySQL で中国語を入力すると、次のエラーが発生します。エラー 1366: 1366: 行 1 の...

Nginx 急ぎ購入 電流制限構成 実装分析

ビジネス上のニーズにより、急ぎの購入が発生することが多いため、ロード バランシング フロント エンド...

MySQL ロール関数の紹介

目次序文: 1. 役割の紹介2. 役割に関連する操作要約:序文:前回の記事では、MySQLの権限管理...

Windows 10 での MySQL 8.0.16 のインストールと設定のチュートリアル

この記事では、参考までにMySQL 8.0.16のインストールと設定方法のグラフィックチュートリアル...

Reactを使用して画像認識アプリを実装する方法

まずは効果の写真をお見せしましょう。 個人的には効果は問題ないと思います。アプリが写真を学習する時間...

Ubuntu 20.04の新バージョンでルートユーザーを使用してシステムにログインする方法の詳細なチュートリアル

Ubuntu 20.04 では、デフォルトで root ログインが有効になっていないため、デスクトッ...

MySQL 重複インデックスと冗長インデックスの例の分析

この記事では、例を使用して MySQL の重複インデックスと冗長インデックスについて説明します。ご参...