TypeScript 中如何正確進(jìn)行類型轉(zhuǎn)換？

深入探討 typescript 類型轉(zhuǎn)換

本文將詳細(xì)分析 TypeScript 類型轉(zhuǎn)換，特別是 as 關(guān)鍵字的用法及其局限性，并提供最佳實(shí)踐。

場(chǎng)景分析：vue 組件與類型斷言

假設(shè)一個(gè) Vue 組件的 props 定義了 group 屬性為 number 類型。getDictGroup 函數(shù)期望 sid 參數(shù)也為 number 類型。然而，運(yùn)行時(shí) sid 卻可能為 String 類型，導(dǎo)致類型錯(cuò)誤。以下代碼片段展示了這個(gè)問題：

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

使用 as number 進(jìn)行類型斷言，僅僅是告訴 TypeScript 編譯器該變量應(yīng)該被視為 number 類型，并沒有進(jìn)行運(yùn)行時(shí)類型轉(zhuǎn)換。 parseInt(sid) 也無法解決問題，因?yàn)?TypeScript 會(huì)報(bào)錯(cuò)，不允許將 number 賦值給 string。

類型轉(zhuǎn)換的本質(zhì)

as 關(guān)鍵字是類型斷言，它是一種編譯時(shí)機(jī)制，不會(huì)改變變量的運(yùn)行時(shí)類型。要進(jìn)行真正的類型轉(zhuǎn)換，需要使用 JavaScript 的類型轉(zhuǎn)換函數(shù)。

例如，將數(shù)字轉(zhuǎn)換為字符串：

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

將字符串轉(zhuǎn)換為數(shù)字：

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

TypeScript 中的正確類型轉(zhuǎn)換方法

在 TypeScript 中，安全的類型轉(zhuǎn)換需要結(jié)合 JavaScript 的類型轉(zhuǎn)換函數(shù)和必要的類型檢查：

1. 字符串轉(zhuǎn)數(shù)字: 使用 Number() 函數(shù)，并結(jié)合可選鏈和空值合并運(yùn)算符處理潛在的錯(cuò)誤：

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

2. 數(shù)字轉(zhuǎn)字符串: 使用 String() 函數(shù)：

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

3. 更嚴(yán)格的類型檢查: 在轉(zhuǎn)換之前，先進(jìn)行類型檢查，避免潛在的運(yùn)行時(shí)錯(cuò)誤：

   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');   } }

解決初始問題的方案

針對(duì)初始問題，正確的解決方法是使用 Number() 函數(shù)進(jìn)行類型轉(zhuǎn)換，并處理潛在的錯(cuò)誤：

const props = defineProps<{ group: number | string }>(); // 修改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 進(jìn)行后續(xù)操作 };

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