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

wufei123 2025-04-07 阅读:16 评论:0

深入探讨 TypeScript 类型转换本文将详细分析 TypeScript 类型转换，特别是 as 关键字的用法及其局限性，并提供最佳实践。场景分析：Vue 组件与类型断言假设一个 Vue 组件的 props 定义了 group...

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

深入探讨 TypeScript 类型转换

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

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

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

PHP

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 的类型转换函数。

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

PHP

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

将字符串转换为数字：

PHP

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

TypeScript 中的正确类型转换方法

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

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

PHP

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

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

PHP

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

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

PHP

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() 函数进行类型转换，并处理潜在的错误：

PHP

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 进行后续操作
};