序文: この翻訳は、TypeScript ハンドブックの「マップされた型」の章から編集されています。 この記事は原文通りに厳密に翻訳したものではなく、一部解説や補足も加えています。 1. マップされた型場合によっては、ある型を別の型に基づいて作成する必要があるものの、コピーを作成したくないことがあります。この場合は、マッピング型の使用を検討できます。 マッピング タイプは、インデックス シグネチャの構文に基づいています。まずはインデックス シグネチャを確認しましょう。 // プロパティの型を事前に宣言する必要がある場合 type OnlyBoolsAndHorses = { [キー: 文字列]: ブール値 | 馬; }; const準拠: OnlyBoolsAndHorses = { del: 本当、 ロドニー: 間違いだ、 }; マッピング タイプは、 タイプ OptionsFlags<Type> = { [keyof Type のプロパティ]: boolean; }; この例では、 タイプ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. キーの再マッピング
タイプ 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 = { // 半径: 数値; // } また、 型 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; // } 以下もご興味があるかもしれません:
|
<<: CentOS7 環境で gcc (バージョン 10.2.0) をアップグレードする詳細な手順
>>: さまざまな解像度やブラウザでウェブページを適切に表示する方法
テーブルの基本構文<table>...</table> - テーブルを定義し...
オンラインで検索して重複データを削除し、ID が最小のデータだけを残します。方法は次のとおりです。 ...
「読み取り専用」と「無効」はどちらも、ユーザーがフォーム フィールドの内容を変更できないようにしま...
フレックスレイアウトFlex は Flexible Box の略で、「柔軟なレイアウト」を意味します...
問題の原因:スレーブサーバーがクローンマスターサーバーである場合、server-uuidの値は同じで...
水平方向では、行の配置を左、中央、右に設定できます。基本的な構文<TR ALIGN="...
他の人から「つまらない」とか「時代遅れ」というフィードバックを受けて、それを変更しようとしたのに、更...
目次1. インスタンスをインストールして作成する2. vue-router4の新機能2.1 動的ルー...
MySQL で中国語を入力すると、次のエラーが発生します。エラー 1366: 1366: 行 1 の...
ビジネス上のニーズにより、急ぎの購入が発生することが多いため、ロード バランシング フロント エンド...
目次序文: 1. 役割の紹介2. 役割に関連する操作要約:序文:前回の記事では、MySQLの権限管理...
この記事では、参考までにMySQL 8.0.16のインストールと設定方法のグラフィックチュートリアル...
まずは効果の写真をお見せしましょう。 個人的には効果は問題ないと思います。アプリが写真を学習する時間...
Ubuntu 20.04 では、デフォルトで root ログインが有効になっていないため、デスクトッ...
この記事では、例を使用して MySQL の重複インデックスと冗長インデックスについて説明します。ご参...