TypeScript 中如何正确进行类型转换？

深入探讨 TypeScript 类型转换

本文将详细分析 TypeScript 类型转换，特别是 as 关键字的用法及其局限性，并提供最佳实践。

场景分析：Vue 组件与类型断言

假设一个 Vue 组件的 props 定义了 group 属性为 number 类型。getDictGroup 函数期望 sid 参数也为 number 类型。然而，运行时 sid 却可能为 string 类型，导致类型错误。以下代码片段展示了这个问题：

const props = defineProps<{ group: number }>();

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

使用 as number 进行类型断言，仅仅是告诉 TypeScript 编译器该变量应该被视为 number 类型，并没有进行运行时类型转换。 parseInt(sid) 也无法解决问题，因为 TypeScript 会报错，不允许将 number 赋值给 string。

类型转换的本质

as 关键字是类型断言，它是一种编译时机制，不会改变变量的运行时类型。要进行真正的类型转换，需要使用 JavaScript 的类型转换函数。

例如，将数字转换为字符串：

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

将字符串转换为数字：

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

TypeScript 中的正确类型转换方法

在 TypeScript 中，安全的类型转换需要结合 JavaScript 的类型转换函数和必要的类型检查：

1. 字符串转数字: 使用 Number() 函数，并结合可选链和空值合并运算符处理潜在的错误：

   let strNum: string | undefined = "42";
   let num: number = Number(strNum) ?? 0; // 使用空值合并运算符处理 undefined

   登录后复制

2. 数字转字符串: 使用 String() 函数：

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

   登录后复制

3. 更严格的类型检查: 在转换之前，先进行类型检查，避免潜在的运行时错误：

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

   登录后复制

解决初始问题的方案

针对初始问题，正确的解决方法是使用 Number() 函数进行类型转换，并处理潜在的错误：

const props = defineProps<{ group: number | string }>(); // 修改props类型，允许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"
  // 使用 convertedSid 进行后续操作
};

通过这种方式，我们既进行了正确的运行时类型转换，又确保了 TypeScript 编译器的类型安全。 同时，我们也添加了对非数字输入的错误处理。 修改props类型允许string输入，更符合实际情况。

以上就是TypeScript 中如何正确进行类型转换？的详细内容，更多请关注php中文网其它相关文章！