解决 ES12 中 TypeScript 类型转换的问题-JavaScript中文网-JavaScript教程资源分享门户

在 TypeScript 中，我们经常需要进行类型转换，以便更准确地描述值的类型。在 ES12 中，有一些新特性可以帮助我们更好地处理这些类型转换的问题。本文将介绍一些常用的处理方法，并提供示例。

as 断言操作符

as 断言操作符是 TypeScript 中常用的类型转换方式。它可以将一个值强制转换为某个类型。例如：

const x: unknown = getSomeValue();
const s: string = x as string;

上述代码中，x 是某个未知类型的值，我们需要将其转换为字符串类型，然后赋值给 s。as 操作符告诉 TypeScript：x 被转换为 string 类型，不需要进行类型检查。

类型保护

有时候，我们需要根据某个值的类型，执行不同的逻辑。例如：

interface Foo {
  bar: number;
}

interface Baz {
  qux: string;
}

function doSomething(arg: Foo | Baz) {
  if ('bar' in arg) { // 类型保护
    console.log(arg.bar);
  } else {
    console.log(arg.qux);
  }
}

在上述代码中，doSomething 函数接收一个参数 arg，它可能是 Foo 或者 Baz 类型。我们通过 in 操作符检查 arg 中是否含有 bar，以此来确定 arg 的类型，并执行不同的逻辑。

还有一种类型保护方式，叫做“类型谓词”，使用方式如下：

function isFoo(arg: any): arg is Foo {
  return arg && typeof arg.bar === 'number';
}

function doSomething(arg: Foo | Baz) {
  if (isFoo(arg)) { // 类型保护
    console.log(arg.bar);
  } else {
    console.log(arg.qux);
  }
}

在上述代码中，我们定义了 isFoo 函数，它可以判断一个值是否是 Foo 类型。isFoo 函数返回一个布尔值，在 doSomething 函数中使用它来确定 arg 的类型，并执行不同的逻辑。

可选链操作符

ES12 中引入了可选链操作符 ?.，它可以用于安全地访问对象的属性或方法。例如：

const obj = {
  foo: {
    bar() { return 'Hello, world!'; }
  }
};

const s: string | undefined = obj.foo?.bar?.();

上述代码中，obj 对象包含一个 foo 属性，它是一个对象，包含一个 bar 方法。我们使用可选链操作符 ?. 安全地访问了 bar 方法，即使 foo 或 bar 不存在，也不会抛出异常。

另外，我们也可以使用可选链操作符来设置对象的属性值：

const obj = {
  foo: {}
};

const s = 'Hello, world!';
obj?.foo?.bar = s;

上述代码中，我们给 obj.foo 对象添加了一个新的 bar 属性，它的值是 s。

nullish 合并操作符

ES12 中还引入了 nullish 合并操作符 ??，它可以用于处理 null 或 undefined 值。例如：

const x: string | undefined = undefined;
const s: string = x ?? 'Hello, world!';

上述代码中，我们定义了 x，它是一个字符串类型或 undefined 类型的值。我们使用 nullish 合并操作符 ??，将 x 和一个默认值 'Hello, world!' 进行比较，如果 x 是 null 或 undefined，则返回默认值，否则返回 x。

总结

ES12 中的新特性使得 TypeScript 中的类型转换更加简洁和描述性。在本文中，我们介绍了 as 断言操作符、类型保护、可选链操作符、nullish 合并操作符的用法，并提供了相应的示例代码。掌握这些新特性，可以更有效地处理 TypeScript 中的类型转换问题。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65b71934add4f0e0fffb1e2d