在TypeScript中，為什麼使用as number後變量類型仍然是string？

TypeScript類型斷言： as number為何無效？

本文探討TypeScript中類型轉換的常見誤區，特別是as關鍵字的局限性。

場景重現

考慮如下代碼：

 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"
}

即使sid聲明為number類型，且使用了as number類型斷言， typeof sid仍然可能返回"string" 。這並非as關鍵字失效，而是其作用機制導致的。

as關鍵字的本質

as關鍵字是TypeScript的類型斷言，它只在編譯時起作用，告訴編譯器“相信我，我知道我在做什麼，這個值是這個類型”。它不會在運行時進行實際的類型轉換。

因此，如果props.group在運行時實際值為字符串，即使進行了as number斷言，其運行時類型仍然是字符串。 typeof操作符在運行時檢查類型，所以結果仍然是"string" 。 parseInt(sid)編譯報錯是因為TypeScript 在編譯階段根據類型推斷，認為sid是number 類型，而parseInt期望的是string 類型，兩者不匹配。

正確的類型轉換方法

要進行真正的運行時類型轉換，需使用JavaScript內置的類型轉換函數：

• 字符串轉數字: Number(sid) , parseInt(sid, 10) (十進制)
• 數字轉字符串: String(sid)

修正後的代碼：

 export const getDictGroup = async (sid: string | number) => { // 修改參數類型const dict = await getDict()
  let numSid: number;
  if (typeof sid === 'string') {
    numSid = parseInt(sid, 10); // 安全轉換，處理潛在錯誤if (isNaN(numSid)) {
      console.error("Invalid input: sid is not a valid number");
      return; // 或拋出錯誤}
  } else {
    numSid = sid;
  }
  console.info(typeof numSid); // 輸出"number"
  // ...後續代碼使用numSid
}

此版本首先檢查sid的類型，然後進行相應的轉換，並處理潛在的錯誤，例如字符串無法轉換為數字的情況。

總結

as關鍵字是類型斷言，僅用於編譯時類型檢查，不會改變運行時類型。 真正的類型轉換需要使用JavaScript的類型轉換函數，並註意處理潛在的運行時錯誤。 修改參數類型為string | number允許函數接受字符串或數字作為輸入，並進行相應的處理。 記住在進行類型轉換時添加錯誤處理機制，以確保代碼的健壯性。

以上是在TypeScript中，為什麼使用as number後變量類型仍然是string？的詳細內容。更多資訊請關注PHP中文網其他相關文章！