跳到主要内容

ts 类型缩小的方式有哪些

管

管理员

前端

2023年09月08日 1,205 次阅读
本页目录
TypeScript 中的类型缩小(Type Narrowing)是一种能够提高类型安全性的技巧。它可以让 TypeScript 的编译器更加明确变量或表达式的类型,从而减少潜在的类型错误。
以下是 TypeScript 中一些常见的类型缩小方式:
使用类型保护函数(Type Guard): TypeScript 中的类型保护函数是一种特殊的函数,它们执行运行时检查并返回一个类型谓语,告知 TypeScript 编译器变量或参数的更具体的类型。
 
function isString(test: any): test is string{
    return typeof test === "string";
}

function example(foo: any){
    if (isString(foo)) {
        console.log("It is a string: " + foo);
        console.log(foo.length); // string function
    }
}
使用 typeof 操作符: typeof 操作符可以检查变量或表达式的类型,并返回一个表示类型的字符串
let item: string | number;

if (typeof item === 'string') {
    // 在这个代码块中,TypeScript 知道 'item' 是一个 string 类型
    console.log(item.trim());
}
使用 instanceof 操作符: instanceof 操作符可以检查一个对象是否是某个类的实例。
class MyClass {}

const instance = new MyClass();

if (instance instanceof MyClass) {
    // TypeScript 知道 'instance' 是 MyClass 类型
}
使用 in 操作符: in 操作符用于检查对象是否包含某个特定属性。
type A = { a: number };
type B = { b: string };

function doSomething(value: A | B) {
  if ('a' in value) {
    // 在这里,TypeScript 知道 'value' 是类型 'A'
    console.log(value.a);
  }
}
使用字面量类型缩小:
type Foo = {
  kind: 'foo'; 
  foo: number;
}

type Bar = {
  kind: 'bar';
  bar: number;
}

type Union = Foo | Bar;

function example(arg: Union) {
  if (arg.kind === 'foo') {
    console.log(arg.foo); 
  } else {
    console.log(arg.bar); 
  }
}
上述每种类型缩小都有其适用场景,根据具体需求和上下文选择合适的类型缩小策略能够提高代码的类型安全性和可读性。

Related

相关文章

同分类文章 →
2025年06月10日 前端

gemini-2.5-pro-0605 按图生成html效果测试

Gemini 最新推出的 2.5 版本真的有点东西。之前用过不少 AI 辅助写代码的工具,但这次它的“图生 HTML”功能确实让我眼前一亮——上传一张设计图,它不仅能快速识别布局和元素,还能生成结构清晰、样

2025年03月14日 前端

css flex-1和overflow-hidden结合使用详解:弹性布局与内容溢出控制

在 Flexbox 布局中,flex: 1 和 overflow: hidden 是两个常用的属性,它们组合使用可以有效地控制子元素的尺寸和内容显示。flex: 1 的作用:当子元素设置 flex: 1 时,它会根据 Flex 容器的主轴方向,自动伸缩以填充剩余的可用

2025年03月13日 前端

Vue 3中实现处理后的v-model双向绑定

在Vue 3中,当你需要对v-model传入的值进行处理后再展示或使用时,可以使用计算属性的getter和setter来实现这种处理过程的双向绑定。 实现步骤 接收父组件传递的v-model值 创建计算属性,在getter中处理展示值,在setter中处

WeChat

扫码加我微信

微信二维码