跳到主要內容
← 回到學習

學習 · 面試考題

型別轉換

By Kurau2 分鐘閱讀

目錄 · 2 個段落
  1. 01型別斷言（Type Assertion）的幾種方式
  2. 02型別守衛（Type Guard）- 更安全的做法

在 TypeScript 中，有時候需要將一個值的類型「放寬」，因為該值的實際類型比較複雜，或者 TypeScript 無法很好地推斷它的類型。這時候可以使用 unknown 類型。

舉例來說

在這段程式碼中，newSelectedFiles 是一個 Array，它需要轉換為 FileList。然而，由於 FileList 並不是一個常見的 JavaScript 類型，TypeScript 可能無法確定這樣的轉換是否安全。因此，使用 **as unknown** 可以先將類型轉為 unknown，再轉回 FileList。

newSelectedFiles as unknown as FileList
javascript

型別斷言（Type Assertion）的幾種方式

1. as 語法（推薦）

const value: unknown = 'hello';
const strLength: number = (value as string).length;
typescript

2. 角括號語法（JSX 中不可用）

const strLength: number = (<string>value).length;
typescript

3. 雙重斷言（謹慎使用）

當兩個型別之間沒有直接關係時，需要透過 unknown 中轉：

// 不能直接轉：Type 'string' 不能轉換為 'number'
const x = 'hello' as unknown as number;
typescript

型別守衛（Type Guard）- 更安全的做法

// typeof 守衛
function printValue(val: string | number) {
  if (typeof val === 'string') {
    console.log(val.toUpperCase());
  } else {
    console.log(val.toFixed(2));
  }
}
 
// instanceof 守衛
if (error instanceof Error) {
  console.log(error.message);
}
 
// in 守衛
if ('name' in obj) {
  console.log(obj.name);
}
typescript
盡量使用型別守衛而非型別斷言，因為守衛會在執行時實際檢查型別，更加安全。

目錄