How to correctly perform type conversion in TypeScript?

In-depth discussion of TypeScript type conversion

This article will analyze in detail the usage and limitations of TypeScript type conversion, especially as keyword, and provide best practices.

Scenario Analysis: Vue Components and Type Assertions

Suppose that a Vue component's props define the group attribute as number type. The getDictGroup function expects that the sid parameter is also of type number . However, the runtime sid may be of type string , resulting in type error. The following code snippet shows this problem:

 const props = defineProps();

getDictGroup(props.group);

export const getDictGroup = async (sid: number) => {
  const dict = await getDict();
  console.info(typeof sid); // May output "string"
  sid = sid as number; // Type assert, but will not change the runtime type console.info(typeof sid); // Still output "string"
  console.info(typeof (sid as number)); // Still output "string"
};

Using as number for type assertions is simply to tell the TypeScript compiler that the variable should be treated as number type and does not perform runtime type conversion . parseInt(sid) cannot solve the problem, because TypeScript will report an error and number is not allowed to be assigned to string .

The nature of type conversion

as keyword is a type assertion, which is a compile-time mechanism that does not change the runtime type of a variable. To perform a real type conversion, you need to use JavaScript's type conversion function.

For example, convert a number to a string:

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

Convert a string to a number:

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

Correct type conversion method in TypeScript

In TypeScript, safe type conversion requires combining JavaScript's type conversion functions and necessary type checks:

1. String to number: Use the Number() function and combine optional chain and null value merging operator to deal with potential errors:

    let strNum: string | undefined = "42";
   let number: number = Number(strNum) ?? 0; // Use the null value merge operator to handle undefined

2. To string: Use String() function:

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

3. Stricter type checking: Before conversion, do type checking to avoid potential runtime errors:

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

Solutions to solve the initial problem

For the initial problem, the correct solution is to use the Number() function for type conversion and handle potential errors:

 const props = defineProps(); // Modify props type to allow 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"
  // Use convertedSid for subsequent operations};

In this way, we not only perform the correct runtime type conversion, but also ensure the type safety of the TypeScript compiler. At the same time, we have also added error handling for non-numeric inputs. Modifying props type allows string input, which is more in line with the actual situation.

The above is the detailed content of How to correctly perform type conversion in TypeScript?. For more information, please follow other related articles on the PHP Chinese website!