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) をアップグレードする詳細な手順

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

推薦する

Nginx 運用保守ドメイン名検証方法例

インターフェイス ドメイン名を構成する際、各パブリック プラットフォームはドメイン名に対する開発者の...

MySQL インデックスの失敗を引き起こす一般的な書き込み方法の概要

序文最近、古いプロジェクトから残ったいくつかの SQL 最適化の問題に対処するのに忙しくしています。...

And キーワードを使用した MySQL の複数条件クエリ ステートメント

AND キーワードを使用した MySQL 複数条件クエリ。MySQL では、AND キーワードを使用...

CentOS8 デプロイメント LNMP 環境で mysql8.0.29 をコンパイルしてインストールする方法の詳細なチュートリアル

1. 前提条件何度かインストールしているので、エラーについてはこれ以上説明しません。ちょっとわかりに...

画像のフェードインとフェードアウト効果を実現する js

この記事では、画像のフェードインとフェードアウトを実現するためのjsの具体的なコードを参考までに紹介...

Linux で libudev を使用して USB デバイスの VID と PID を取得する方法

この記事では、libudev ライブラリを使用して hidraw デバイスにアクセスします。 lib...

初心者がdockerにmysqlをインストールするときに遭遇するさまざまな問題

序文最近、パソコンのシャットダウンに時間がかかることが多く、強制的にシャットダウンするには電源ボタン...

Centos7 ベースの Nginx Web サイト サーバーの構築の詳細説明 (仮想 Web ホストの構成を含む)

1. Nginx サービス基盤Nginx (エンジン x) は、パフォーマンスの最適化のために特別...

Vueエンジニアがカプセル化しなければならない埋め込み命令の知識のまとめ

目次序文指導の基本フック機能フック関数のパラメータ文章使い方とアイデア成し遂げる汎用性を高める要約す...

AngularパイプラインPIPEの紹介と使い方

序文PIPE、パイプラインと翻訳されます。 Angular パイプは、HTML コンポーネントで宣言...

MySQLのLIMIT文について詳しく説明します

目次質問サーバー層とストレージエンジン層LIMITって何ですか?何をするか?トゥカオ最近、Q&...

不規則な投影を実現するためのボックスシャドウとドロップシャドウのサンプルコード

border-radius で生成できる四角形やその他の図形に影を追加する場合 (「Adaptive...

MySQL 8.0.26 のインストールと簡易チュートリアル (インターネット上で最も完全)

目次1. MySQLをダウンロードする1.1 ダウンロード1.2 インストール1. MySQLをダウ...

Linux環境にJDKとTomcatをインストールする詳細な手順

目次1. JDKをインストールする手動インストール2. トムキャット1. JDKをインストールする注...

MySQL5.7.21 解凍版インストール詳細チュートリアル図

私は頻繁にシステムをインストールするので、インストールのたびにいくつかのソフトウェアを再インストール...