被迫開始學習Typescript —— interface

金色海洋（jyk）發表於2022-05-14
TypeScript

一開始以為，需要使用 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。
  • 既有約束，也有一定的靈活性。

相關文章