TypeScript インターフェースの紹介

1. インターフェース定義

インターフェースの役割はtypeキーワードに似ていますが、異なります。型は次のコードのように単純なデータ型を定義できます。

タイプ str = 文字列

この記述方法は、関数型、クラス型、配列型のみを記述できるインターフェースには適用できません。

interfaceキーワードは、TS でインターフェースを定義するために使用されます。

サンプルコードは次のとおりです。

// シンプルなインターフェースを定義する interface Person {
  名前: 文字列
}
//getメソッドを定義する function getPersonName(person: Person): void {
  console.log(人.名前)
}
// setメソッドを定義する function setPersonName(person: Person, name: string): void {
  person.name = 名前
}
// personオブジェクトを定義する let person = {
  名前: 「お粥一杯」
}
setPersonName(人、'イーワン・ゾウ')
// 変更成功 getPersonName(person) // Yiwan Zhou

Personインターフェースは、インターフェースを使用するための要件を記述するために使用される名前のようなものです。たとえば、このインターフェースにはname属性が必要であり、その型は文字列です。

型チェックではプロパティの順序はチェックされず、対応するプロパティが存在し、同じ型であることのみが要求されることに注意してください。

2. 属性

2.1 オプション属性

インターフェース内のプロパティがオプションであるか、特定の条件下でのみ存在する場合は、プロパティ名の横に ? 記号を追加できます。サンプルコードは次のとおりです。

;（関数 （） {
  // シンプルなインターフェースを定義する interface Person {
    名前: 文字列
    // 年齢はオプションであることを示します age?: number
  }
  // personオブジェクトを定義する let person = {
    名前:「周の一杯」
    年齢: 18歳
    趣味:「コーディング」
  }
  //getメソッドを定義する function getPersonName(person: Person): void {
    // console.log(person.age, person.hobby) // プロパティ 'hobby' はタイプ 'Person' に存在しません。
  }
})()

この時点では、 sex属性を記述しても記述しなくてもかまいませんが、 hobb属性はインターフェースで定義されていないため、呼び出すと例外がスローされます。

2.2 読み取り専用プロパティ

プロパティを読み取り専用プロパティにしたい場合は、プロパティの前にreadonly追加するだけです。

サンプルコードは次のとおりです。

;（関数 （） {
  インターフェース Person {
    // 名前を読み取り専用に設定する readonly name: 文字列
  }
  // personオブジェクトを定義する let person = {
    名前:「周の一杯」
  }
  // setメソッドを定義する function setPersonName(person: Person, name: string): void {
    person.name = name // 'name' は読み取り専用プロパティであるため、割り当てることはできません。
  }
  setPersonName(人、'お粥一杯')
})()

3. クラスタイプ

3.1 継承インターフェース

クラスと同様に、インターフェースも相互に継承できます。これにより、あるインターフェースから別のインターフェースにメンバーをコピーできるようになり、インターフェースを再利用可能なモジュールに分割する際の柔軟性が向上します。

インターフェースの継承では extends キーワードを使用します。サンプルコードは次のとおりです。

// 2つのインターフェースを定義する interface PersonName {
  名前: 文字列
}
インターフェース PersonAge {
  年齢: 番号
}

// 上記の 2 つのインターフェースを継承する Person インターフェースを定義します。複数のインターフェースを使用する場合は、カンマで区切ります。interface Person extends PersonName, PersonAge {
  趣味: 弦楽器
  // 戻り値が文字列であるメソッドを定義する
  say(): 文字列
}
人 = {
  名前:「周の一杯」
  年齢: 18歳
  趣味:「コーディング」
  // サンプルメソッド say() {
    「一碗の周」を返す
  },
}
//getメソッドを定義する function getPersonName(person: Person): void {
  console.log(人名、年齢、趣味)
}
getPersonName(person) // Yiwan Zhou 18 コーディング

複数のインターフェースを継承する場合に、カンマで区切って使用します。

4. 関数の種類

TS では、インターフェースは関数型のインターフェースも記述できます。

関数型インターフェースの定義は、パラメータリストと戻り値の型のみを持つ関数定義に似ています。パラメータリスト内の各パラメータには、名前と型が必要です。

サンプルコードは次のとおりです。

インターフェースMyAdd{
    (x: 数値、y: 数値): 数値
}

定義が完了すると、この関数インターフェースを通常のインターフェースのように使用できるようになります。

サンプルコードは次のとおりです。

myAdd: MyAdd = (x: 数値, y: 数値): 数値 => {
    x + yを返す
}

上記のコードは、次の関数定義と同等です。

myAdd: (x: 数値、y: 数値) => 数値 = (
    x: 数値、
    y: 数値
): 数値 => {
    x + yを返す
}

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

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