typeScript 型別斷言、聯合型別和交叉型別（七）

史洲宇發表於2024-11-21
TypeScript型別

首先介紹聯合型別

let testStr: number | string = '1111111'

// 函式使用聯合型別

const fn = function (name: string | number): number {
    return 1111
}

那麼什麼是交叉型別呢

多種型別的集合，聯合物件將具有所聯合型別的所有成員

interface person {
    name: string,
    age: number
}

interface Man {
    sex: number
}

// 這裡使用&符號連線型別
const objPerson: person & Man = {
    name: 'momo',
    age: 7,
    sex: 1
}

// 函式使用
const testFN = (man: person & Man): void =>{
    console.log('man :>> ', man);
}

型別斷言

語法介紹：值 as 型別　或　<型別>值 value as string <string>value

interface A {
    run: string
}

interface B {
    build: string
}

const testFn = (type: A | B): string => {
　　// 這裡這麼寫會報錯
    return type.run
}

// 這個時候可以使用型別斷言來推斷他傳入的是哪個資料

// 改造如下：
const testFn1 = (type: A | B): string => {
    return (type as A).run
}

需要注意的是，型別斷言只能夠「欺騙」TypeScript 編譯器，無法避免執行時的錯誤，反而濫用型別斷言可能會導致執行時錯誤：

使用any臨時斷言

window.abc = 123
//這樣寫會報錯因為window沒有abc這個東西

// 改造如下
(window as any).abc = 123
//可以使用any臨時斷言在 any 型別的變數上，訪問任何屬性都是允許的。

as const

是對字面值的斷言，與const直接定義常量是有區別的

如果是普通型別跟直接const 宣告是一樣的

const names = 'momo'
names = 'aa' //無法修改 這裡會報錯是因為const宣告瞭只讀


let names2 = 'momo' as const
names2 = 'aa' //無法修改 這個報錯是因為型別斷言成了只讀，兩者方式並不一樣

下面換一種方式介紹一下

// 這裡宣告一個陣列陣列，並告訴編譯器是作為const只讀的 這個時候新增和刪除就會提示報錯
let a1 = [10, 20] as const;
// 但是原生宣告的const 是不會報錯的
const a2 = [10, 20];

a1.unshift(30); // 錯誤，此時已經斷言字面量為[10, 20],資料無法做任何修改
a2.unshift(30); // 透過，沒有修改指標

型別斷言是不具影響力的

在下面的例子中，將 something 斷言為 boolean 雖然可以透過編譯，但是並沒有什麼用 並不會影響結果, 因為編譯過程中會刪除型別斷言

function toBoolean(something: any): boolean {
    return something as boolean;
}
 
toBoolean(1);
// 返回值為 1
//

下一節學習typeScript 內建物件

相關文章