TS 介面

pardon110發表於2020-06-02

用vscode這類工具溯源經常遇到 xxx.d.ts 檔案，基本上大多數情況下看懂它，就知道當前js庫的正確開啟姿勢。

TS 新型別

any

如果在 TS 裡沒有宣告型別，那麼預設就是 any 型別

let a: number = 1
a = 'Hello' // 報錯

let a: any = 1
a = 'Hello' // OK

enum

列舉多選一，理念同java列舉一樣，與golang中的iota雷同

 enum Gender {
    Male = 'Male',
    Female = 'Female'
}

let gender: Gender = Gender.Male
gender = Gender.Female
console.log(gender) // 'Female'
gender = Gender.Woman // 報錯

介面

在 TS 裡介面一般是指對變數的描述，如屬性

interface Human {
    readonly name: string
}
let jack: Human = {
    name: 'Jack'
}
jack.name = 'Ivan' // 報錯: name 是隻讀的

又如,可選屬性age，可計算屬性propName

interface Human {
    gender: string,
    age?: number
}

interface Rect {
    height: number;
    width: number;
    [propName: string]: number
}

函式介面

這種騷操作，與golang結構體函式成員有得一拼

interface Fn {
    (a: number, b: number): number;
}

let add: Fn = function(a: number, b: number): number {
    return a + b
}
console.log(add(1, 2))

該介面相當於一個匿名函式，只宣告瞭函式原型簽名（入參與出參)

擴充套件介面

實現了一個類似於顯式的介面繼承

interface Animal {
    move(): void;
}

interface Human extends Animal {
    name: string;
    age: number;
}

let jack: Human = {
    age: 18,
    name: 'Jack',
    move() {
        console.log('move')
    }
}
本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章