來學習typescript 吧！ --6 聯合型別 | 交叉型別 |型別斷言

蜗牛般庄發表於2024-12-06
TypeScript型別

1、聯合型別 |

<u>聯合型別（Union Types）表示取值可以為多種型別中的一種。 </u>使用 | 分隔每個型別。

let myFavoriteNumber: string | number;
myFavoriteNumber = 'seven';
myFavoriteNumber = 7;

函式使用聯合型別

function getString(something: string | number): string {
  return something.toString();
}

聯合型別的變數在被賦值的時候，會根據型別推論的規則推斷出一個型別：

let myFavoriteNumber: string | number;
myFavoriteNumber = 'seven';

2.交叉型別 &

交叉型別透過&運算子將多個型別合併為一個型別

相同名稱的屬性會被合併，而不同名稱的屬性則會保留

如果兩個型別中有相同的屬性但屬性型別不同，那麼這個屬性的型別將是這兩個屬性型別的聯合型別。

interface People {
  age: number;
  height: number;
}
​
interface Employee {
  employeeId: number;
}
​
const zxd = (man: People & Employee) => {
  console.log(man.height);
  console.log(man.age);
  console.log(man.employeeId);
};
​
zxd({ age: 18, height: 180, employeeId: 32145 });

3.型別斷言

型別斷言（Type Assertion）可以用來手動指定一個值的型別。

值 as 型別　　或　　<型別>值

value as string <string>value

let someValue: any = "this is a string";

“尖括號”語法

let strLength: number = (<string>someValue).length;

as語法

let strLength: number = (someValue as string).length;

型別斷言只能夠「欺騙」TypeScript 編譯器，無法避免執行時的錯誤，所以切不可濫用。

let someValue: any = "this is a string";
let strLength: number = (someValue as number).length; // Error: Type 'string' cannot be used as an index type.

使用any臨時斷言

 window.abc = 123 //這樣寫會報錯因為window沒有abc這個東西
 (window as any).abc = 123 //這樣寫就不會報錯

as const

const name = 'zxd'
name = 'aa' //無法修改
​
let name2 = 'zxd' as const
names = 'aa' //無法修改
​
//陣列
let a1 = [10, 20] as 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

相關文章