TypeScriptを学ぶ(2)---インターフェース

インターフェース

TypeScript の中核となる原則の 1 つは、値の構造を型チェックすることです。オブジェクトのタイプを定義するには、インターフェース (Interfaces) を使用します。インターフェイスは、オブジェクトの状態 (属性) と動作 (メソッド) の抽象化 (記述) です。

インターフェースに関する予備調査

要件: 人間オブジェクトを作成するには、人間の属性に特定の制約を課す必要があります

id は数値型、必須、読み取り専用
name は文字列型、必須
age は数値型、 sex は文字列型、省略可簡単な例を使用して、インターフェイスの動作を観察して
みましょう。

/*
在 TypeScript 中，我们使用接口（Interfaces）来定义对象的类型
接口: 是对象的状态(属性)和行为(方法)的抽象(描述)
接口类型的对象
    多了或者少了属性是不允许的
    可选属性: ?
    只读属性: readonly
*/

/*
需求: 创建人的对象, 需要对人的属性进行一定的约束
  id是number类型, 必须有, 只读的
  name是string类型, 必须有
  age是number类型, 必须有
  sex是string类型, 可以没有
*/

// 定义人的接口
interface IPerson {
    
    
  id: number
  name: string
  age: number
  sex: string
}

const person1: IPerson = {
    
    
  id: 1,
  name: 'tom',
  age: 20,
  sex: '男'
}

型チェッカーは、オブジェクトの内部プロパティが IPerson インターフェイスの説明と一致しているかどうかをチェックし、一致していない場合は型エラーを表示します。

オプションの属性

インターフェイスのすべてのプロパティが必要なわけではありません。特定の条件下でのみ存在するものもあれば、まったく存在しないものもあります。

interface IPerson {
    
    
  id: number
  name: string
  age: number
  sex?: string
}

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

オプション属性の利点の 1 つは、存在する可能性のある属性を事前定義できることです。2 つ目の利点は、存在しない属性を参照する際のエラーをキャッチできることです。

const person2: IPerson = {
    
    
  id: 1,
  name: 'tom',
  age: 20
  // sex: '男' // 可以没有
}

読み取り専用属性

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

interface IPerson {
    
    
  readonly id: number
  name: string
  age: number
  sex?: string
}

一度割り当てられると、再度変更することはできません。

const person2: IPerson = {
    
    
  id: 2,
  name: 'tom',
  age: 20
  // sex: '男' // 可以没有
  // xxx: 12 // error 没有在接口中定义, 不能有
}
person2.id = 2 // error

読み取り専用と定数

readonly と const のどちらを使用するかを判断する最も簡単な方法は、変数として使用するか、属性として使用するかを確認することです。変数として使用する場合は const を使用し、属性として使用する場合は readonly を使用します。

機能タイプ

インターフェイスは、JavaScript のオブジェクトが持つことができるさまざまな形状を記述できます。インターフェイスは、プロパティを持つ通常のオブジェクトを記述するだけでなく、関数型も記述することができます。

インターフェイスを使用して関数型を表すには、インターフェイスの呼び出しシグネチャを定義する必要があります。パラメータリストと戻り値の型だけの関数定義のようなものです。パラメーター リストの各パラメーターには、名前と型が必要です。

/*
接口可以描述函数类型(参数的类型与返回的类型)
*/

interface SearchFunc {
    
    
  (source: string, subString: string): boolean
}

この定義の後、この関数型インターフェイスを他のインターフェイスと同様に使用できます。次の例は、関数型の変数を作成し、同じ型の関数をこの変数に割り当てる方法を示しています。

const mySearch: SearchFunc = function(source: string, sub: string): boolean {
    
    
  return source.search(sub) > -1
}

console.log(mySearch('abcd', 'bc'))

クラスタイプ

クラスはインターフェースを実装します

C# や Java のインターフェイスの基本的な役割と同様に、TypeScript はそれを使用して、特定のコントラクトに準拠するようにクラスを明示的に強制することもできます。

/*
类类型: 实现接口
1. 一个类可以实现多个接口
2. 一个接口可以继承多个接口
*/

interface Alarm {
    
    
  alert(): any
}

interface Light {
    
    
  lightOn(): void
  lightOff(): void
}

class Car implements Alarm {
    
    
  alert() {
    
    
    console.log('Car alert')
  }
}

クラスは複数のインターフェースを実装できます

class Car2 implements Alarm, Light {
    
    
  alert() {
    
    
    console.log('Car alert')
  }
  lightOn() {
    
    
    console.log('Car light on')
  }
  lightOff() {
    
    
    console.log('Car light off')
  }
}

インターフェイスはインターフェイスを継承します

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

interface LightableAlarm extends Alarm, Light {
    
    }