TypeScript 中如何正確進行類型轉換？

深入探討TypeScript 類型轉換

本文將詳細分析TypeScript 類型轉換，特別是as關鍵字的用法及其局限性，並提供最佳實踐。

場景分析：Vue 組件與類型斷言

假設一個Vue 組件的props定義了group屬性為number類型。 getDictGroup函數期望sid參數也為number類型。然而，運行時sid卻可能為string類型，導致類型錯誤。以下代碼片段展示了這個問題：

 const props = defineProps();

getDictGroup(props.group);

export const getDictGroup = async (sid: number) => {
  const dict = await getDict();
  console.info(typeof sid); // 可能輸出"string"
  sid = sid as number; // 類型斷言，但不會改變運行時類型console.info(typeof sid); // 仍然輸出"string"
  console.info(typeof (sid as number)); // 仍然輸出"string"
};

使用as number進行類型斷言，僅僅是告訴TypeScript 編譯器該變量應該被視為number類型，並沒有進行運行時類型轉換。 parseInt(sid)也無法解決問題，因為TypeScript 會報錯，不允許將number賦值給string 。

類型轉換的本質

as關鍵字是類型斷言，它是一種編譯時機制，不會改變變量的運行時類型。要進行真正的類型轉換，需要使用JavaScript 的類型轉換函數。

例如，將數字轉換為字符串：

 let n: number = 12345;
n = String(n);
console.log(n); // "12345"
console.log(typeof n); // "string"

將字符串轉換為數字：

 let strNum: string = "42";
let num: number = Number(strNum);
console.log(num); // 42
console.log(typeof num); // "number"

TypeScript 中的正確類型轉換方法

在TypeScript 中，安全的類型轉換需要結合JavaScript 的類型轉換函數和必要的類型檢查：

1. 字符串轉數字:使用Number()函數，並結合可選鍊和空值合併運算符處理潛在的錯誤：

    let strNum: string | undefined = "42";
   let num: number = Number(strNum) ?? 0; // 使用空值合併運算符處理undefined

2. 數字轉字符串:使用String()函數：

    let num: number = 42;
   let str: string = String(num);

3. 更嚴格的類型檢查:在轉換之前，先進行類型檢查，避免潛在的運行時錯誤：

    function convertToString(value: number | string): string {
     if (typeof value === 'number') {
       return String(value);
     } else if (typeof value === 'string') {
       return value;
     } else {
       throw new Error('Invalid input type');
     }
   }

解決初始問題的方案

針對初始問題，正確的解決方法是使用Number()函數進行類型轉換，並處理潛在的錯誤：

 const props = defineProps(); // 修改props類型，允許string

getDictGroup(props.group);

export const getDictGroup = async (sid: number | string) => {
  const dict = await getDict();
  let convertedSid: number = Number(sid);
  if (isNaN(convertedSid)) {
    console.error("Invalid input: sid is not a number");
    return; // or handle the error appropriately
  }
  console.info(typeof convertedSid); // "number"
  // 使用convertedSid 進行後續操作};

通過這種方式，我們既進行了正確的運行時類型轉換，又確保了TypeScript 編譯器的類型安全。 同時，我們也添加了對非數字輸入的錯誤處理。 修改props類型允許string輸入，更符合實際情況。

以上是TypeScript 中如何正確進行類型轉換？的詳細內容。更多資訊請關注PHP中文網其他相關文章！