.jpg)
typescript 類型轉(zhuǎn)換疑難解答：as number 轉(zhuǎn)換失效
本文分析 TypeScript 中使用 as number 進(jìn)行類型轉(zhuǎn)換卻仍然顯示為 String 類型的問(wèn)題，并提供正確的解決方案。
問(wèn)題描述
開發(fā)者在使用 as number 進(jìn)行類型轉(zhuǎn)換時(shí)，發(fā)現(xiàn)即使已聲明變量為 number 類型，運(yùn)行時(shí)仍然顯示為 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) 也遇到問(wèn)題：number 類型參數(shù)無(wú)法賦值給 string 類型函數(shù)參數(shù)。
問(wèn)題根源
as 關(guān)鍵字是 TypeScript 的類型斷言，它僅僅告訴編譯器該變量應(yīng)該被視為某種類型，不會(huì)在運(yùn)行時(shí)執(zhí)行實(shí)際的類型轉(zhuǎn)換。 console.info(typeof sid) 輸出 string，是因?yàn)?sid 變量的實(shí)際值仍然是字符串。as number 只是繞過(guò)了編譯器的類型檢查，并沒(méi)有改變變量的運(yùn)行時(shí)類型。
正確的類型轉(zhuǎn)換方法
要實(shí)現(xiàn)運(yùn)行時(shí)類型轉(zhuǎn)換，需要使用相應(yīng)的轉(zhuǎn)換函數(shù)：
-
將字符串轉(zhuǎn)換為數(shù)字: Number() 或 parseInt()。Number() 會(huì)嘗試將整個(gè)字符串轉(zhuǎn)換為數(shù)字，而 parseInt() 只會(huì)轉(zhuǎn)換字符串的開頭部分，直到遇到非數(shù)字字符。
-
將數(shù)字轉(zhuǎn)換為字符串: String()。
以下是一個(gè)正確的類型轉(zhuǎn)換示例：
let sid: string = "12345"; let numSid: number = Number(sid); // 或 parseInt(sid, 10); (10表示十進(jìn)制) 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"
總結(jié)
as 關(guān)鍵字用于類型斷言，而非運(yùn)行時(shí)類型轉(zhuǎn)換。 需要進(jìn)行運(yùn)行時(shí)類型轉(zhuǎn)換時(shí)，必須使用 Number()、parseInt()、String() 等函數(shù)。 確保在轉(zhuǎn)換前檢查輸入數(shù)據(jù)的有效性，避免潛在的錯(cuò)誤。 如果props.group本身就是字符串，則需要在傳遞給getDictGroup函數(shù)之前進(jìn)行類型轉(zhuǎn)換。 例如：getDictGroup(Number(props.group))。 如果轉(zhuǎn)換失敗，Number()會(huì)返回NaN，需要進(jìn)行相應(yīng)的錯(cuò)誤處理。
.png)
