In TypeScript, why is the variable type still string after using as number?

TypeScript type assertion: Why is as number invalid?

This article discusses common misunderstandings about type conversion in TypeScript, especially the limitations of as keyword.

Scene reappears

Consider the following code:

 const props = defineProps()

getDictGroup(props.group)

export const getDictGroup = async (sid: number) => {
  const dict = await getDict()
  console.info(typeof sid); // The output may be "string"
  sid = sid as number;
  console.info(typeof sid); // The output may still be "string"
  console.info(typeof (sid as number)); // The output may still be "string"
}

Even if sid is declared as number type and as number type assertion is used, typeof sid may still return "string" . This is not caused by as keyword failure, but by its mechanism of action.

The nature of as keyword

The as keyword is a type assertion of TypeScript, which only works at compile time, telling the compiler "Believe me, I know what I'm doing, this value is this type". It does not perform actual type conversion at runtime.

Therefore, if props.group is actually a string at runtime, its runtime type is still a string even if an as number assertion is made. typeof operator checks the type at runtime, so the result is still "string" . parseInt(sid) compile errors are reported because TypeScript is based on type inference during the compilation stage and believes that sid is the number type, while parseInt expects string type, which does not match.

Correct type conversion method

To perform a true runtime type conversion, you need to use the built-in type conversion function in JavaScript:

• String to number: Number(sid) , parseInt(sid, 10) (decimal)
• To string: String(sid)

Corrected code:

 export const getDictGroup = async (sid: string | number) => { // Modify the parameter type const dict = await getDict()
  let numSid: number;
  if (typeof sid === 'string') {
    numSid = parseInt(sid, 10); // Safe conversion, handling potential errors if (isNaN(numSid)) {
      console.error("Invalid input: sid is not a valid number");
      return; // or throw an error}
  } else {
    numSid = sid;
  }
  console.info(typeof numSid); // Output "number"
  // ...The subsequent code uses numSid
}

This version first checks the type of sid , then performs corresponding conversions, and handles potential errors such as situations where strings cannot be converted to numbers.

Summarize

The as keyword is a type assertion, which is only used for compile-time type checking and does not change the runtime type. Real type conversion requires using JavaScript's type conversion function and pay attention to handling potential runtime errors. Modify the parameter type to string | number to allow the function to accept strings or numbers as input and perform corresponding processing. Remember to add error handling mechanisms when performing type conversions to ensure the robustness of your code.

The above is the detailed content of In TypeScript, why is the variable type still string after using as number?. For more information, please follow other related articles on the PHP Chinese website!