被迫開始學習Typescript —— interface

金色海洋(jyk) 發表於 2022-05-14

一開始以為,需要使用 class 來定義呢,學習之後才發現,一般都是使用 interface 來定義的。

這個嘛,倒是挺適合 js 環境的。

參考:https://typescript.bootcss.com/interfaces.html

簡單介面

我們先來定義一個簡單的介面

interface Person {
  name: string,
  age: number
}

用介面定義一個物件

const jim: Person = {
  name: 'jyk',
  age: 18
}

這樣編輯器就可以按照介面的定義來檢查 jim 是否符合要求。

巢狀的情況

如果是多層的屬性怎麼辦呢?我們可以一起定義,也可以分開定義。

  • 在一起定義(比較直觀):
interface Person {
  name: string,
  age: number,
  role: {
    api: string,
    moduleId: number
  }
}
  • 分開定義(可以靈活組合):
interface Role {
  api: string,
  moduleId: number
}

interface Person {
  name: string,
  age: number,
  role: Role
}

陣列和索引

如果有多個 role 呢,我們可以用陣列的形式,也可以用索引的方式。

  • 陣列的方式
interface Person {
  name: string,
  age: number,
  roles: Array<Role>
}
  • 索引的方式
interface Person {
  name: string,
  age: number,
  roles: {
    [index: number | string ]: Role
  }
}

可以有其他任何屬性

js 可以很隨意,沒想到 ts 也可以比較隨意。

interface SquareConfig {
    color: string;
    width: number;
    [propName: string]: any;
}

除了指定的屬性之外,還可以有其他任意屬性。這個嘛。

函式型別

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

定義引數和返回型別。

介面的合併

這個嘛,說起來挺奇怪的,雖然是一個我想要的的方式,但是發現真的有這種方式的時候,還是感覺挺詫異的。

interface StateOption {
  isLocal?: boolean, 
  isLog?: boolean, 
  level?: number
}

interface StateCreateOption {
  state?: any,
  getters?: any,
  actions?: any
}


const foo: StateCreateOption & StateOption = {
  isLocal: true, 
  state: {},
}

可以把兩個介面合併在一起,約束一個物件,要求有兩個介面的屬性。

貫徹了 js 世界裡的 “組合>繼承” 的特點。

介面繼承介面

介面除了合併之外,還可以繼承介面,支援多繼承。

interface Customer extends Person, 其他介面 {
  phone: string
}

類繼承(實現)介面

ts 的 class 也可以繼承(實現)介面,也支援多繼承。

class Customer extends Person, 其他介面 {
  phone: string
}

介面繼承類

介面還可以繼承類?我也沒想到可以這樣。

class Control {
    private state: any;
}

interface SelectableControl extends Control {
    select(): void;
}

class Button extends Control implements SelectableControl {
    select() { }
}

class TextBox extends Control {

}

// Error: Property 'state' is missing in type 'Image'.
class Image implements SelectableControl {
    select() { }
}

class Location {

}

是不是挺繞的?好吧,我也沒繞出來。

小結

  • 繼承 class 使用 extends。
  • 繼承 interface 使用 implements。
  • 既有約束,也有一定的靈活性。