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>;

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

相关推荐
烛阴7 小时前
解锁 TypeScript 的元编程魔法:从 `extends` 到 `infer` 的条件类型之旅
前端·javascript·typescript
四月_h9 小时前
在 Vue 3 + TypeScript 项目中实现主题切换功能
前端·vue.js·typescript
北辰浮光14 小时前
[Web数据控制]浏览器中cookie、localStorage和sessionStorage
前端·vue.js·typescript
小公主20 小时前
面试官:你对TS的泛型怎么理解?
typescript
烛阴1 天前
TypeScript 中的 `&` 运算符:从入门、踩坑到最佳实践
前端·javascript·typescript
叫我阿柒啊1 天前
从Java全栈到前端框架的深度探索
java·微服务·typescript·vue3·springboot·前端开发·全栈开发
阿虎儿2 天前
TypeScript 内置工具类型完全指南
前端·javascript·typescript
深兰科技2 天前
深兰科技:搬迁公告,我们搬家了
javascript·人工智能·python·科技·typescript·laravel·深兰科技
用户47949283569152 天前
字节面试官:ts中any和unkown的区别是什么
javascript·typescript
烛阴2 天前
TypeScript 的“读心术”:让类型在代码中“流动”起来
前端·javascript·typescript