TypeScript インターフェース定義ケースチュートリアル

インターフェースの役割:

インターフェース (英語: interface) の機能は、簡単に言えば、コードの規則を提供することです。

Typescript では次のように記述されます。
TypeScript のコア原則の 1 つは、値が持つ構造を型チェックすることです。これは「ダックタイピング」または「構造的サブタイピング」と呼ばれることもあります。
TypeScript では、インターフェースを使用してこれらの型に名前を付け、コードまたはサードパーティコードのコントラクトを定義します。

例えば：

//インターフェースPersonを定義する
インターフェース Person {
    名前: 文字列;
    年齢: 番号;
}

// 定義された変数 man の型を Person "型" として指定します [この表現は正確ではありませんが、理解を容易にするためです]
let man: 人;

// この時点で、man に値を割り当てる場合、man は定義した Person 制約に準拠している必要があります。つまり、数値型の age フィールドと文字列型の名前フィールドが存在する必要があります。man = { age: 10, name: 'syw' }
# または、次のようにします function fun(women:Person){} // パラメータ women も Person 制約に準拠する必要があります

上記の例では、インターフェースとその機能を定義する方法について簡単に説明しました。ここでは、インターフェースを操作する他の方法について簡単に説明します。

インターフェイスのオプションプロパティを設定します。

オプション属性を持つインターフェースは、オプション属性名の定義の後に ? 記号が追加されることを除いて、通常のインターフェース定義と似ています。

インターフェース Person {
    名前: 文字列
    年齢?: 番号
}

オプション属性の最も一般的な使用法は、このパラメータが渡されるか存在するかが不明な場合です。

オプションパラメータの利点は、Typescript では次のように説明されています。
オプション属性の利点の 1 つは、存在する可能性のある属性を事前に定義できることです。もう 1 つの利点は、存在しない属性を参照するときにエラーを検出できることです。

追加のプロパティチェック:

これについて言えば、簡単にまとめると、属性をオプションとして設定することはできますが、間違った属性を渡すことはできません。

上記の Person インターフェイスを例にとると、使用時に age 属性を誤って aag と記述すると、age 属性自体は渡す必要がないにもかかわらず、TypeScript はエラーを報告します。

これは追加のプロパティチェックです。

もちろん、型アサーションを使用してこれらのプロパティチェックを回避することもできます。リンクを参照してください: TypeScript の型アサーション [as 構文 | ＜＞構文]

インターフェイスの読み取り専用属性を設定します。

一部のオブジェクトプロパティは、オブジェクトが最初に作成されたときにのみ変更できます。したがって、属性名の前に readonly を使用して、読み取り専用属性を指定できます。

インターフェース Person {
    読み取り専用の名前: 文字列;
    読み取り専用 age: 数値;
}
// 初期値を割り当てる let man: Person = {name: 'syw', age: 10};

// この時点で値を変更するとエラーが発生します。
man.age = 20; // エラー!
// 'age' は読み取り専用プロパティであるため、割り当てることはできません。

実際、読み取り専用属性を使用した場合の効果は const と似ています。もちろん、この 2 つはまったく同じものではありません。これは単に理解しやすいように言っているだけです。

Typescript では、readonly と const は次のように記述されます。
readonly と const のどちらを使用するかを判断する最も簡単な方法は、それを変数として使用するか、属性として使用するかを確認することです。変数として使用する場合は const を使用し、プロパティとして使用する場合は readonly を使用します。

関数型インターフェース:

簡単に言えば、関数型のインターフェースは、関数のパラメータ型と関数の戻り値型を指定します。

インターフェース PersonFun {
    (名前: 文字列、年齢: 数値): ブール値
}
// PersonFun制約に従う関数を定義する let manFun: PersonFun = (name: string, age: number) => {
    年齢 > 10 を返します。
}

知らせ：

関数のパラメータの型は変更できず、戻り値も制約に準拠する必要があります。
関数パラメータ名は、対応するパラメータ位置の型に互換性がある限り、インターフェース内の名前と対応している必要はありません。

// これも要件を満たしています let manFun: PersonFun = (name12: string, age12: number) => {
    年齢 > 10 を返します。
}

インデックス可能な型インターフェース:

簡単に言えば、インデックス可能な型インターフェースとは、インデックスの型と戻り値の型を指定できることを意味します。

例えば、配列では、インデックスは数値型の値、インデックスは文字列型の値と指定できます。このように、配列の形式は基本的に固定されています。

インターフェース PersonArr {
    [インデックス: 数値]: 文字列
}
// 配列を定義します。let manArr: PersonArr = ['syw','syw1','syw2'];
// manArr[0]をクエリします。 // このとき、0は数値型のインデックスであり、0番目の要素は文字列型のsywを返します。

Typescript は、実際にはインデックス型である数値と文字列の 2 種類のインデックス署名をサポートしています。

また、数値型インデックスを使用する場合、定義される戻り値の型は、文字列型インデックスに対して定義された戻り値のサブタイプである必要があります。

Typescript ではこの文を次のように説明しています:
数値をインデックスに使用すると、JavaScript はそれを文字列に変換し、それを使用してオブジェクトのインデックスを作成します。つまり、100 (数値) によるインデックス付けは、"100" (文字列) によるインデックス付けと同じなので、この 2 つは一貫している必要があります。

初めてこの文を見たとき、意味は理解できましたが、それをどうシンプルに表現したらいいのか分かりませんでした。よく調べてみると、それは私がまだこの文に馴染みがないからかもしれないと分かりました。実はとてもシンプルです。

// たとえば、私の PersonArr には 2 つのインデックスがあり、1 つはインデックス (数値) 型で、もう 1 つはアイテム (文字列) 型です。これら 2 つのインデックスの戻り値を定義するときは、上記の内容に厳密に従う必要があります。
// 数値型インデックスを使用する場合、戻り値の型は文字列型インデックスの戻り値のサブタイプである必要があります。

// 以下に定義するインターフェースはエラーを報告します interface PersonArr {
    [インデックス: 数値]: 文字列;
    [項目: 文字列]: 数値;
}
// インデックスの戻り値は文字列型なので、明らかに数値型の項目の戻り値のサブタイプではありません。// 正しく記述するにはどうすればよいでしょうか?最も簡単な方法は、インデックスの戻り値の型を数値に変更することです。

TypeScript インターフェース定義ケースチュートリアルに関するこの記事はこれで終わりです。TypeScript インターフェース定義に関するその他の関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: