Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >TS高级类型

TS高级类型

作者头像
贺贺V5
发布于 2023-02-14 11:25:40
发布于 2023-02-14 11:25:40
84400
代码可运行
举报
运行总次数:0
代码可运行

keyof

获取类型内所有的 key,即所有属性名 , 获取的是一个 联合类型 这里类型指:通过 interface 或 type 定义的类型;通过 typeof xxx 返回的类型等。keyof 后面必须是类型,不能是具体的对象

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
interface IPeople {
    name:string,
    age?: number,
    sex: string,
  }
  
  type T = keyof IPeople

  // 等同于
  type T = "name" | "age" | "sex"

in

循环类型 一般循环的是 联合类型,把联合类型中每一个属性名赋值给 P

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 使用上面的 T 类型
  type TObj =  {
    [P in keyof T]: any
  }

  // 等同于
  type TObj = {
    name: any;
    age: any;
    sex: any;
  }

typeof

ts 中 typeof 是获取数据的类型,常用用于获取 对象、数组、函数、class、枚举等类型

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const people = {
    name: 'liuyz',
    age: 18,
  }
  
  type INewPeople = typeof people
  // 等同于
  // type INewPeople = {
  //   name: number
  //   age: number
  // }
  
  const newPeople: INewPeople = {
    name: "zhi",
    age: 18,
  }
  
  type TKeys = keyof typeof newPeople
  // 等同于
  // type TKeys = "name" | "age"

Pick

从 T 类型中选取部分 K 类型,并返回新的类型,这里 T 常用于对象类型

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
 type Pick<T, K extends keyof T> = {
      [P in K]: T[P];
  };
// keyof T 获取 T 中所有的 key 属性
//K extends keyof T K 必须继承于 keyof T ,如果 K 中的属性有不属于 keyof T 的则会报错
interface IPeople {
    name:string,
    age?: number,
    sex: string,
  }
  
  type TPick = Pick<IPeople, 'name' | 'age'>
  
  // 等同于
  type TPick = {
    name: string;
    age?: number | undefined;
  }

Partial

将T中的所有属性设置为可选

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
type Partial<T> = {
      [P in keyof T]?: T[P];
  };
interface IPeople {
    name:string,
    age?: number,
    sex: string,
  }
  type TPartial = Partial<IPeople>
  
  // 等同于
  type TPartial = {
    name?: string | undefined;
    age?: number | undefined;
    sex?: string | undefined;
  }

Required

使 T 中的所有属性都变成必需的

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
interface IPeople {
    name:string,
    age?: number,
    sex: string,
  }
  type TRequired = Required<IPeople>

  // 等同于
  type TRequired = {
    name: string;
    age: number;
    sex: string;
  }

Readonly

将 T 中的所有属性设为只读

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!-- 源码 -->
  type Readonly<T> = {
    readonly [P in keyof T]: T[P];
  }

 interface IPeople {
    name:string,
    age?: number,
    sex: string,
  }
  type TReadonly = Readonly<IPeople>

  // 等同于
  type TReadonly = {
     readonly name: string;
     readonly age?: number | undefined;
     readonly sex: string;
  }

Exclude

从T中剔除可以赋值给U的类型

Extract

提取T中可以赋值给U的类型

Omit

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 就是在 User 的基础上,去掉 id 属性
type EditUser = Omit<User,"id">; 

Pick

从类型定义的属性中,选取指定一组属性,返回一个新的类型定义。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
type Pick<T, K extends keyof T> = {
  [P in K]: T[P];
};

NonNullable

去除 null 和 undefined 后的新类型

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
type TType= number | null | undefined
  type TNonNullable = NonNullable<TType>
  // 等同于
  // type TNonNullable = number

typeof

  • 自动生成对象的类型,如果对象上有类型则使用定义的类型
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2023-01-31,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
编写TypeScript工具类型,你需要知道的知识
用 JavaScript 编写中大型程序是离不开 lodash 工具的,而用 TypeScript 编程同样离不开工具类型的帮助,工具类型就是类型版的 lodash 。简单的来说,就是把已有的类型经过类型转换构造一个新的类型。工具类型本身也是类型,得益于泛型的帮助,使其能够对类型进行抽象的处理。工具类型主要目的是简化类型编程的过程,提高生产力。
WahFung
2020/08/24
1.5K0
TypeScript中的高级类型工具类型及关键字
本文主要帮助理解 TypeScript 中的高级类型及工具类型。在实际使用 TypeScript 的开发过程中,得益于这些高级类型于工具类型,我们可以更方便的构建出我们需要的类型。
路过的那只狗
2020/11/13
2.2K0
速查手册 - TypeScript 高级类型 cheat sheet
温馨提示:因微信中外链都无法点击,请通过文末的” “阅读原文” 到技术博客中完整查阅版;(本文整理自技术博客)
JSCON简时空
2020/03/31
1.4K0
TypeScript 类型体操 - 进阶
映射类型的语法用于构造新的索引类型,在构造的过程中可以对索引和值做一些修改或过滤。
Cellinlab
2023/05/17
4100
TypeScript 强大的类型别名
类型别名会给一个类型起个新名字。类型别名有时和接口很像,但是可以作用于原始值,联合类型,元组以及其它任何你需要手写的类型。
coder_koala
2019/11/20
3.5K0
一文看懂TypeScript工具类型
TypeScript 的工具类型,也被称作类型体操。通过本文你就知道这些工具类型的原理,并可以自己写出一些工具类型。在学习工具类型之前,我们先学学工具类型所用到的基础知识,当基础知识掌握牢固后,看懂工具类型自然水到渠成。
kai666666
2024/07/11
3660
TypeScript高级类型备忘录(附示例)
TypeScript 是一种类型化的语言,允许你指定变量的类型,函数参数,返回的值和对象属性。
刘小夕
2020/09/15
9260
TypeScript进阶(三)类型演算与高级内置类型
TypeScript 是一种静态类型检查的 JavaScript 超集,它通过类型注解和类型推断来提供更强大的类型系统。在 TypeScript 中,类型演算是一种重要的概念,它允许我们在编译时对类型进行操作和计算。本文将深入探讨 TypeScript 类型演算的原理和应用。
can4hou6joeng4
2023/11/28
3550
TS 进阶 - 类型编程
内置工具类型中有一个从联合类型中提出 null | undefined 的工具类型,可以借助其实现一个剔除所有属性的 null 与 undefined:
Cellinlab
2023/05/17
7980
typescript 入门-工具类型
type 类型别名 // 为某类型指定别名 type Name = string type Age = number type Man = { name: Name age: Age } const c: Man = { name: 'c', age: 20 } keyof 对象键类型 type _Object = { [key: string]: unknown } function getKeysByObj<T extends _Object>(o: T): (keyof T)[]{
copy_left
2021/06/11
5180
TS 中的类型验算,高级通用 API 实现
由于现在工作使用的技术栈是 React、TypeScript 和 ahooks,工作中需要用到大量的类型定义,特此记录一下一些常用的 类型通用API 封装。
白雾茫茫丶
2024/05/22
2530
TS 中的类型验算,高级通用 API 实现
TypeScript 中的泛型你真搞懂了吗?
在学习ts源码的时候,发现很多泛型还是看不懂,于是想写一篇文章,总结一下常用的泛型。 基础必备知识
coder_koala
2021/11/10
1.1K0
TypeScript 中的泛型你真搞懂了吗?
TypeScript高级类型与实用程序
我们一起来看一下今天的大纲,希望这些高级类型 与实用程序能够帮助大家节省一些开发的时间:
疯狂的技术宅
2021/01/14
7080
TypeScript高级类型与实用程序
TS内置类型与拓展
TypeScript具有类型系统,且是JavaScript的超集,其可以编译成普通的JavaScript代码,也就是说,其是带有类型检查的JavaScript。
WindRunnerMax
2022/05/06
1.1K0
TypeScript的另一面:类型编程
作为前端开发的趋势之一,TypeScript 正在越来越普及,很多人像我一样写了 TS 后再也回不去了,比如写再小的demo也要用 TS(得益于ts-node[1]),JS 只有在配置文件如Webpack(实际上,接下来肯定会有用TS写配置文件的趋势,如Vite)、ESLint等时才会用到。但同样,也有部分开发者对TS持有拒绝的态度,如nodemon的作者就曾表示自己从来没有使用过TS(见 #1565[2])。但同样还有另外一部分人认为TS学习成本太高,所以一直没有开始学习的决心。
zz_jesse
2021/07/30
1.7K0
《现代Typescript高级教程》泛型和类型体操
泛型和类型体操(Type Gymnastics)是 TypeScript 中高级类型系统的重要组成部分。它们提供了强大的工具和技巧,用于处理复杂的类型操作和转换。
linwu
2023/07/27
5610
Typescript 中,这些类型工具真好用
你是否曾经用 TypeScript 写代码,然后意识到这个包没有导出我需要的类型,例如下面这段代码提示 Content 在 @example 中不存在:
前端修罗场
2023/10/07
2640
Typescript 中,这些类型工具真好用
索引类型、映射类型与条件类型_TypeScript笔记12
P.S.注意,不同于typeof面向值,keyof是针对类型的,而不是值(因此keyof obj不合法)
ayqy贾杰
2019/06/12
1.8K0
【TS】1294- 搞懂 TypeScript 中的映射类型(Mapped Types)
本文会和大家详细介绍 TypeScript 中的映射类型(Mapped Type),看完本文你将学到以下知识点:
pingan8787
2022/06/07
2.5K0
【TS】1294- 搞懂 TypeScript 中的映射类型(Mapped Types)
聊聊TypeScript类型声明那些最佳实践
TypeScript 诞生已久,优缺点大家都知晓,它可以说是JavaScript静态类型校验和语法增强的利器,为了更好的代码可读性和可维护性,我们一个个老工程都坦然接受了用TypeScript 重构的命运。然而在改造的过程中,逐步意识到TypeScript这门语言的艺术魅力
Jafeney
2021/07/19
1.6K0
相关推荐
编写TypeScript工具类型,你需要知道的知识
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验