TS常用高级类型有哪些,以及如何使用

TypeScript 提供了许多高级类型操作符,用于处理和转换类型。以下是一些常用的高级类型操作符及其用法:

  1. Partial<T>:将类型 T 中的所有属性变为可选。

    type MyPartial = Partial<MyObject>;

  2. Required<T>:将类型 T 中的所有属性变为必需。

    type MyRequired = Required<MyPartial>;

  3. Readonly<T>:将类型 T 中的所有属性变为只读。

    type MyReadonly = Readonly<MyObject>;

  4. Pick<T, K>:从类型 T 中选择指定键类型 K 的属性。

    type MyPick = Pick<MyObject, 'id' | 'name'>;

  5. Record<K, T>:创建一个具有指定键类型 K 和值类型 T 的对象类型。

    type MyRecord = Record<string, number>;

  6. Exclude<T, U>:从类型 T 中排除可以赋值给类型 U 的属性。

    type MyExclude = Exclude<'a' | 'b' | 'c', 'a' | 'b'>;

  7. Extract<T, U>:从类型 T 中提取可以赋值给类型 U 的属性。

    type MyExtract = Extract<'a' | 'b' | 'c', 'a' | 'b'>;

  8. Omit<T, K>:从类型 T 中排除指定键类型 K 的属性。

    type MyOmit = Omit<MyObject, 'id'>;

  9. NonNullable<T>:从类型 T 中排除 nullundefined

    type MyNonNullable = NonNullable<string | null | undefined>;

  10. ReturnType<T>:获取函数类型 T 的返回类型。

    type MyReturnType = ReturnType<() => string>;

这些高级类型操作符可以在 程序中中更灵活地操作和转换类型。根据需求,可以组合使用这些操作符来创建更复杂的类型定义。

相关推荐
濮水大叔21 小时前
不必把 Vue3 写成“麻花”:从状态碎片到对象协作,重新理解 Zova 的前端心智模型
前端·typescript·vue3·ioc·tsx·zova
退休倒计时1 天前
【每日一题】LeetCode 45. 跳跃游戏 II TypeScript
算法·leetcode·typescript
TunerT_TQ1 天前
GitHub深度工程评测:Cline 源码级工程评测|65k Star 开源AI编程助手的工程全景
typescript·开源·github·vs code·ai编程助手·开源供应链安全·静态源码审计
贩卖黄昏的熊2 天前
NestJS简明教程——安全
开发语言·javascript·安全·typescript·nest.js
theoweb32 天前
Typescript关于sort需要注意的地方
typescript
黄泉路醉s2 天前
在Vant+Vue+TypeScript的H移动前端使用UnoCSS
前端·vue.js·typescript
不好听6132 天前
TypeScript 类型系统:`type` vs `interface` 与 `import type`
typescript
晓说前端3 天前
TypeScript 高级特性 —— 类型断言与泛型
前端·typescript
烬羽3 天前
React 状态提升:一个 ColorPicker,彻底搞懂状态该放哪里
react.js·typescript·设计
ji_shuke4 天前
Playwright 从零到 CI 实战:基于 TypeScript 的端到端测试完整指南
javascript·ci/cd·typescript·playwright