19. TypeScript 类型运算符

TypeScript作为JavaScript的超集,不仅提供了静态类型检查,还引入了多种类型运算符,使得类型定义更加灵活和强大。这些运算符可以帮助我们构建更加精确和灵活的类型定义。本文将详细介绍这些类型运算符的用法和应用场景。

keyof 运算符

keyof 运算符用于获取对象类型的所有键的联合类型。

使用场景 : 当你需要引用对象的键作为类型时,keyof非常有用。

typescript 复制代码
interface User {
  id: number;
  name: string;
}

type UserKeys = keyof User; // 'id' | 'name'

// 使用keyof类型保护函数参数只能是特定的键
function getValue(user: User, key: UserKeys) {
  return user[key];
}

typeof 运算符

typeof 运算符用于获取一个变量或属性的类型。

使用场景 : 当你需要引用一个变量的类型作为另一个变量的类型时,typeof可以派上用场。

typescript 复制代码
let foo = "Hello, TypeScript!";
type FooType = typeof foo; // string

// 使用typeof创建与变量foo相同类型的新变量
let bar: FooType = "Hi, Copilot!";

in 运算符

在TypeScript中,in运算符用于迭代联合类型,通常与映射类型一起使用。

使用场景 : 当你需要根据联合类型的值动态生成类型时,in运算符非常有用。

typescript 复制代码
type Properties = "propA" | "propB";
type Obj = {
  [P in Properties]: P extends "propA" ? string : number;
};
// Obj类型为 { propA: string; propB: number; }

extends 关键字

extends关键字用于条件类型,表示如果一个类型可以赋值给另一个类型,则结果是一个类型,否则是另一个类型。

使用场景 : extends用于创建基于条件的类型,类似于JavaScript中的三元运算符。

typescript 复制代码
type NonNullable<T> = T extends null | undefined ? never : T;

// 使用extends移除null和undefined类型
type StringOrNull = string | null;
type JustString = NonNullable<StringOrNull>; // string

infer 关键字

infer关键字用于在条件类型中推断类型变量。

使用场景 : infer常用于在函数类型中推断返回类型。

typescript 复制代码
type ReturnType<T> = T extends (...args: any[]) => infer R ? R : any;

// 使用infer推断函数返回类型
type ExampleType = ReturnType<() => string>; // string

方括号

方括号用于访问类型中特定属性的类型。

使用场景: 当你需要引用对象中某个属性的类型时,方括号语法很有帮助。

typescript 复制代码
type Person = { name: string; age: number; };
type NameType = Person["name"]; // string

// 使用方括号访问类型属性
let personName: NameType = "Alice";

is 运算符

is运算符用于类型守卫,它告诉TypeScript编译器一个值是特定的类型。

使用场景 : is运算符用于在运行时检查类型,并在编译时提供类型信息。

typescript 复制代码
function isString(test: any): test is string {
  return typeof test === "string";
}

// 使用is运算符进行类型守卫
if (isString(foo)) {
  console.log(foo.toUpperCase()); // 现在foo被识别为string类型
}

satisfies 运算符

satisfies运算符用于在表达式级别上强制类型兼容性。

使用场景 : 当你想要确保一个对象满足某个类型,但不想进行类型断言时,satisfies可以使用。

typescript 复制代码
let obj = { id: 1, name: "Copilot" } satisfies User;

// 使用satisfies确保obj符合User接口

TypeScript的类型运算符极大地丰富了类型系统的表达能力,使得我们可以编写出更加安全、可维护的代码。通过本文的介绍和示例,希望大家能够更好地理解和运用这些类型运算符,提升自己的TypeScript编程技能。

相关推荐
Hyyy32 分钟前
普通前端自救记录——第0周
前端
前端若水1 小时前
在 Vue 2 与 Vue 3 中使用 markdown-it-vue 渲染 Markdown 和数学公式
前端·javascript·vue.js
之歆1 小时前
DAY_10 JavaScript 深度解析:原型链 · 引用类型 · 内置对象 · 数组方法全攻略(下)
开发语言·前端·javascript·ecmascript
Aolith1 小时前
用 Vue 递归组件实现嵌套回复,我的评论系统升级全记录
vue.js·全栈
行星飞行1 小时前
从 cursor 、 Claude code 迁移到 codex,30 分钟快速上手 codex 常用技巧
前端
__log2 小时前
ComfyUI 集成技术方案分析报告
javascript·python·django
Pu_Nine_92 小时前
前端埋点从入门到企业实践:手写一个Demo + 主流方案对比
前端·埋点
ZC跨境爬虫2 小时前
跟着 MDN 学 HTML day_56:(HTML 表格基础完全指南)
前端·javascript·ui·html·音视频
Dxy12393102162 小时前
CSS滤镜使用方法完全指南
前端·css
江晓曼*凡云基地2 小时前
Hermes Agent 多Agent模式:并行拆解复杂任务的实战指南
javascript·windows·microsoft