TypeScript(3)インタフェースの再学習

一、概念
オブジェクト言語に直面する中で、インタフェース(Interface)は重要な概念であり、インタフェースを利用して多態を実現する.TypeScriptにもインタフェースの概念が導入されている.
前述したType Scriptの基本タイプを整理する際に、ベースタイプおよびデータのタイプについて注釈を述べたが、重要なObjectは1つも少なく、一般的にインタフェースを使用する.TypeScriptのタイプチェックは,インタフェースを介してオブジェクトに関する属性と方法を記述し,我々が開発したときに検出ヒントを与えることができる.
ここでは他のオブジェクト言語とは異なるインタフェースが必要であり,Type Scriptのタイプはタイプ検出としてのみ用いられ,最終的にjsにコンパイルされるとインタフェースが除去される.
Type Scriptの核心原則の一つは、値に対する
構造はタイプチェックを行います.「アヒル型弁法」や「構造的サブタイプ化」と呼ばれることがある.Type Scriptでは、インタフェースの役割は、これらのタイプの名前とコードまたはサードパーティのコードの契約を定義することです.
——公式文書の紹介
ここで「アヒル型弁法」といえば、簡単に言えば、アヒル型弁法は対象がインタフェースを実現したかどうかを判断するすべての方法であり、それがその対象がインタフェースを実現したと考えている場合、そうでなければないと考えられる.
クリックしてアヒルの認識の詳細を表示します
二、簡単に使う
インタフェースTimeを定義し、いくつかのプロパティとメソッドを定義します.コンパイラは、オブジェクトがインタフェースで定義されたプロパティまたはメソッドを有し、タイプが一致しているかどうかを確認します.

interface Time {
  hour: number
  minute: number
  second: number
}
const time: Time = {
  hour: 9,
  minute: 0,
  second: 0
}

const bad1: Time = {
  hour: '9',  //      “string”     “number”。
  minute: 0,
  second: 0
}

const bad2: Time = {  // error      "second"
  hour: 9,
  minute: 0
}

const bad3: Time = {  // error      "timestamp"
  hour: 9,
  minute: 0,
  second: 0,
  timestamp: '09:00:00'  // error “timestamp”    “Time” 
}

ここで注意したいのは、関数のパラメータに注釈を付ける場合、インタフェースのプロパティがあればエラーは報告されません.これは、パラメータのプロパティのタイプを指定する場合に便利です.

const time = {
  hour: 9,
  minute: 0,
  second: 0,
  timestamp: '09:00:00'
}

function getTime(time: { timestamp: string }): string {
  return time.timestamp
}

getTime(time) // return '09:00:00'

三、オプション属性
インタフェース内のプロパティは、すべてのオブジェクトに必要なものではない場合や、そのプロパティがある場合にのみ使用される場合があります.この場合、オプションのプロパティが使用されます.

interface User {
  id: number
  chineseName: string
  englishName?: string
}

const user1: User = {
  id: 0,
  chineseName: '  '
}

四、読み取り専用属性
オブジェクトのメソッド属性定義後に変更が許可されていない場合は、属性名にreadonlyを使用して読み取り専用として指定できます.下の例を修正すると、idを読み取り専用にし、定義後にidの値を変更することはできないことがわかります.これにより、実際の開発では、変更すべき属性を不用意に修正し、エラーを減らすことができます.

interface User {
  readonly id: number
  chineseName?: string
  englishName?: string
}

const user: User = {
  id: 0,
  chineseName: '  '
}

user.chineseName = '  '
user.id = 1  // error       "id" ，         ，

読み取り専用プロパティがベースタイプではない場合、配列やオブジェクトなどの参照タイプの場合、少し異なります.読み取り専用プロパティに値を割り当てると、エラーが検出されます.

interface User {
  readonly id: number
  chineseName?: string
  englishName?: string
  readonly friends?: User[]
}

const user: User = {
  id: 0,
  chineseName: '  ',
  users: [{
    id: 1,
    chineseName: '  '
  }]
}

user.friends = []  // error       "friends" ，        。
user.friends = [{}]  // error       "friends" ，        。
user.friends[0].chineseName = '  '  //        

五、関数タイプインタフェース
TypeScriptのインタフェースは、オブジェクトタイプのほかに、関数のタイプも記述できます.通常のオブジェクトのインタフェースと同様にkey-valueによって関数のパラメータと戻りを記述し、関数のパラメータ名はインタフェース定義のパラメータ名とは異なり、パラメータのタイプがインタフェース定義と一致している限り、関数のパラメータは一つ一つチェックされます.

interface Func {
  (arg: number): string
}


const fn: Func = function(num) {
  return num.toFixed(2)
}

六、索引タイプインタフェースarray[0]およびobj[prop]のように、これらはインデックスタイプによって記述されてもよい.

interface IData {
  // [    :        ]:         
  [index: number]: string
}
const data: IData = ['8', '9', '10']

Typeスクリプトでは、文字列と数字の2つのインデックス署名がサポートされています.つまり、オブジェクトと配列の2つです.

interface IArr {
  [key: number]: string
}

interface IObj {
  [key: string]: string
}

const arr: IArr = ['a', 'b', 'c']
const obj: IObj = {
  a: '1',
  b: '2',
  c: '3'
}

七、インタフェースの継承extends(継承)によって、1つのインタフェースのメンバーを別のインタフェースにコピーすることができる.

interface INum {
  num: number
}

interface IStr {
  str: string
}

//         
interface IComb extends INum, IStr {
  handle: () => void
}

const obj: IComb = {
  num: 0,
  str: 'some',
  handle: () => { console.log('function') }
}

インタフェース継承クラス
インタフェースはクラスを継承することもできます.インタフェースはクラス内のすべてのメンバーを継承するだけであり、その実装は含まれません.クラスにprivateまたはprotectedメンバーがある場合、インタフェースによっても継承されますが、このインタフェースはクラスまたはそのサブクラスによってのみ実現されます.

class Factory {
  private state
  protected name
}

interface IFactory extends Factory {
  getName(): any
}

class factory extends Factory implements IFactory {
  getName() {
    return this.name
  }
}

//   “bad”    “IFactory”      : state, name
class bad implements IFactory {
  getName() {
    return this.name
  }
}

八、まとめ
TypeScriptの1つのコアはタイプチェックであり,インタフェースを用いてタイプチェックを行い,タイプ変換によるエラーを効果的に回避し,開発効率を向上させる.インタフェース自体はオブジェクト言語に対する概念であり、インタフェースを使用してオブジェクトプログラミングをよりよく行うことができます.