TypeScript 中類型轉換時為什么使用 `as number` 仍然顯示為 `string`？

typescript 類型轉換疑難解答：as number 轉換失效

本文分析 TypeScript 中使用 as number 進行類型轉換卻仍然顯示為 String 類型的問題，并提供正確的解決方案。

問題描述

開發者在使用 as number 進行類型轉換時，發現即使已聲明變量為 number 類型，運行時仍然顯示為 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' }

嘗試使用 parseInt(sid) 也遇到問題：number 類型參數無法賦值給 string 類型函數參數。

問題根源

as 關鍵字是 TypeScript 的類型斷言，它僅僅告訴編譯器該變量應該被視為某種類型，不會在運行時執行實際的類型轉換。 console.info(typeof sid) 輸出 string，是因為 sid 變量的實際值仍然是字符串。as number 只是繞過了編譯器的類型檢查，并沒有改變變量的運行時類型。

正確的類型轉換方法

要實現運行時類型轉換，需要使用相應的轉換函數：

• 將字符串轉換為數字: Number() 或 parseInt()。Number() 會嘗試將整個字符串轉換為數字，而 parseInt() 只會轉換字符串的開頭部分，直到遇到非數字字符。

• 將數字轉換為字符串: String()。

以下是一個正確的類型轉換示例：

let sid: string = "12345"; let numSid: number = Number(sid); // 或 parseInt(sid, 10);  (10表示十進制) console.log(typeof numSid); // 輸出 'number' console.log(numSid); // 輸出 12345  let n: number = 12345; let strN: string = String(n); console.log(typeof strN); // 輸出 'string' console.log(strN); // 輸出 "12345"

總結

as 關鍵字用于類型斷言，而非運行時類型轉換。 需要進行運行時類型轉換時，必須使用 Number()、parseInt()、String() 等函數。 確保在轉換前檢查輸入數據的有效性，避免潛在的錯誤。 如果props.group本身就是字符串，則需要在傳遞給getDictGroup函數之前進行類型轉換。 例如：getDictGroup(Number(props.group))。 如果轉換失敗，Number()會返回NaN，需要進行相應的錯誤處理。