現(xiàn)代化前端開(kāi)發(fā)中, TypeScript已然成為重要的必備技能. 由于TypeScript知識(shí)比較多, 本文只介紹以下幾點(diǎn)

• type 和 interface 的區(qū)別
• any, unkonwn, never
• 常用的工具類(lèi)Partial, Required, Readonly, Pick, Omit, Extract, Exclude

話不多說(shuō), 直接進(jìn)入主題

想練習(xí)的話,推薦使用 在線TypeScript Playground

type 和 interface 的區(qū)別

interface可以重復(fù)聲明, 可以繼承. type 則不行.

在對(duì)象擴(kuò)展的情況下, 使用接口繼承要比交叉類(lèi)型的性能更好. 建議使用 interface 來(lái)描述對(duì)象對(duì)外暴露的接口.

使用 type 將一組類(lèi)型重命名, 或?qū)︻?lèi)型進(jìn)行復(fù)雜編程, type 適合用于枚舉值.

interface IMan {
    name: string;
    age?: number;
}

// 接口可以進(jìn)行聲明合并
interface IMan {
    hobby: string;
}

type TMan = {
    name: string;
    age?: number;
    country: string;
}

// type 不能重復(fù)定義
// type TMan = {}

// 接口可繼承接口, 使用 extends 關(guān)鍵字
interface IManPlus extends IMan {
    weight: string;
}

// 接口可繼承 type, 使用 extends 關(guān)鍵字
interface IManStudent extends TMan {
    gender: 'male' | 'female'
}

// 接口可多繼承
interface IManTeacher extends IMan, TMan {}


// type可使用聯(lián)合類(lèi)型 & 類(lèi)似于繼承效果
type TManPlus1 =  TMan & { height: string }
type TManPlus2 =  { height: string } & TMan


let a: IManStudent = {
    gender: 'female',
    name: '張哈',
    country: '中國(guó)'
}

let b: IManTeacher = {
    name: '張哈',
    country: '中國(guó)',
    hobby: '籃球'
}

let c: TManPlus1 = {
    name: '戴維',
    country: '美國(guó)',
    height: '170cm',
}

any、unkonwn、never

any和unkonwn在TS類(lèi)型中屬于最頂層的Top Type，即所有的類(lèi)型都是它倆的子類(lèi)型。而never則相反，它作為Bottom Type是所有類(lèi)型的子類(lèi)型。

常用的工具類(lèi)

• Partial: 部分屬性(可無(wú))
• Required: 所有屬性都需要
• Readonly: 所有屬性只讀
• Pick: 選取部分屬性
• Omit: 剔除部分屬性
• Extract: 取交集
• Exclude: 取差集

// Partial
const iMainPartial: Partial<IMan> = { // 可無(wú)
}

const tMainPartial: Partial<TMan> = {
    name: '取Type部分屬性'
}


// Required
const iMainRequired: Required<IMan> = {
    name: '所有屬性都得有',
    age: 20,
    hobby: '沒(méi)有會(huì)報(bào)錯(cuò)'
}

const tMainRequired: Required<TMan> = {
    name: '所有屬性都得有',
    age: 20,
    country: '中國(guó)'
}

// Readonly
const iMainReadonly: Readonly<IMan> = {
    name: '李四',
    // age: 12,
    hobby: '游泳'
}

// 無(wú)法為 iMainReadonly 任意屬性賦值, 因?yàn)樗袑傩远际侵蛔x
// iMainReadonly.age = 20










interface Car {
    brand: string;
    price: number;
    isSale: boolean;
    publishTime?: string
}

// Pick
type PickedCar = Pick<Car, 'brand' | 'isSale' | 'publishTime'> // 從 Car 中挑選屬性

// Omit
type OmitCar = Omit<Car, 'isSale'> // 從 Car 中排除哪些屬性



type SetA = 1 | 2 | 3 | 4
type SetB = 4 | 5 | 6

// Extract
type AExtractB = Extract<SetA, SetB> // 取交集 4


// Exclude
type AExcludeB = Exclude<SetA, SetB> // 從 A 里面剔除和 B 有交集的 4, 最后變成 1 | 2 | 3
type BExcludeA = Exclude<SetB, SetA> // 從 B 里面剔除和 C 有交集的 5, 最后變成 5 | 6