Typescript高级类型Record,Partial,Readonly等介绍_typescript 遍历record_目标学完css的博客

相关文章推荐
气宇轩昂的蜡烛 · python合并字典，相同key的value ...· 2 月前 ·
正直的棒棒糖 · 基于Vue+OpenSeaDragon的数字 ...· 5 月前 ·
稳重的煎饼 · html将文字放在图片右边_Notion【0 ...· 8 月前 ·
有胆有识的煎鸡蛋 · java输出异常json ...· 1 年前 ·
不拘小节的金针菇 · 在工作区中运行 Jupyter ...· 1 年前 ·
/* 首先是联合类型的介绍 */
let a: string | number = '123' // 变量a的类型既可以是string，也可以是number
a = 123
keyof
 
将一个类型的属性名全部提取出来当做联合类型




    
 
// 1. 定义一个接口
interface Person {
  name: string
  age: number
type PersonKeys = keyof Person // 等同于 type PersonKeys = 'name' | 'age'
const p1: PersonKeys = 'name' // 可以
const p2: PersonKeys = 'age' // 可以
const p3: PersonKeys = 'height' // 不能将类型“"height"”分配给“name | age”
Record
 
Record用于属性映射，听不懂？直接上案例 
定义一个普通的对象类型
 
搭配联合类型用法
 
同样可以映射对象,让对象的每个属性都是一个拥有特定键值对的类型
 
 Record的实现原理
 Record的内部定义，接收两个泛型参数 
type Record<K extends string | number | symbol, T> = {
    [P in K]: T;
泛型K即为第一次参数
p in xx 又是什么意思呢？
 in的意思就是遍历，如上就是将 类型string进行遍历，也就是string
每个属性都是传入的T类型，如 string: PersonModel 
Partial (部分的; 不完全的)
 
ts中就是让一个定义中的所有属性都变成可选参数 
// 定义一个Person接口
interface Person {
  name: string
  age: number
// 但是我们有可能数据是请求过来的，刚开始我们需要定义一个空对象，如下。
const person1: Person = {}
  但是这样就加粗样式会出现报错，类型“{}”缺少类型“Person”中的以下属性: name, age。
  可能我们可以更改定义方式如下，但是有的时候我们不想破坏事先的定义，或者不能破坏
  interface Person {
    name?: string
    age?: number
  那这个时候我们就可以用到typescript自带的高级类型 Partial，就相当于将上方接口所有属性变成可选的
  将我们需要定义的类型当做泛型传入Partial中，那么就相当于当前的类型里面的所有属性都是可选的
const person2: Partial<Person> = {} // 可以
const person3: Partial<Person> = { name: 'xiaodu' } // 可以
const person4: Partial<Person> = { height: 1.88 } // 报错 “height”不在类型“Partial<Person>”中
Partial的实现原理
 Partial的内部定义 
type Partial<T> = {
  [P in keyof T]?: T[P]
将一个类型的属性名全部提取出来当做联合类型
将 age和name进行遍历
[P in keyof T]? 的冒号就代表 可选 的参数
T[P] 就代表 如 Person[name]代表的是 string 类型 
Required（必须的）
 
和Partial刚好相反，将一个定义中的属性全部变成必选参数
 
 Required的实现原理
 Required的内部定义 
type Required<T> = {
    [P in keyof T]-?: T[P];
将一个类型的属性名全部提取出来当做联合类型
将 age和name进行遍历
在?之前加个-，代表着这个属性是必须的。
T[P] 就代表 如 Person[name]代表的是 string 类型 
Pick（选择）
 
ts中可以选择一个原来的接口中一部分的属性定义
 
 如果想要选择多个属性定义呢？
 
 pick的实现原理 
type Pick<T, K extends keyof T> = {
  [P in K]: T[P]
pick接收两个泛型 
第一个泛型 T 便是 interface 或者 type 定义
第二个就是第一个定义中的属性， extends就代表继承
 K extends keyof T 等同于 k extends ‘name’ | ‘age’,意思就是k只能是age或者name 
Readonly (意思是只读的)
 
ts中就是让一个定义中的所有属性都变成只读参数 
// 定义一个Person接口
interface Person {
  name: string
  age: number
  girlFriend: {
    name: string
    age: number 

 可以看到Readonly可以将接口所有属性变为只读的不可修改的，但是是浅层的。
 Readonly的实现原理
 Readonly的内部定义 
type Readonly<T> = {
  readonly [P in keyof T]: T[P];
将一个类型的属性名全部提取出来当做联合类型
将 age和name进行遍历
readonly 修饰符代表属性是只读的
T[P] 就代表 如 Person[name]代表的是 string 类型 
Exclude(排除)
 
ts中可以排除 联合类型 中一部分的内容
 注意Exclude是操作联合类型的
 
 Exclude的原理 
type Exclude<T, U> = T extends U ? never : T
传入两个泛型 
我们这里用 MyTypes 也就是 ‘name’ | ‘age’ | ‘height’ 去代表 T
用 name 属性去代表第二个泛型 U
T extends U 就判断是否’name’ | ‘age’ | ‘height’ 有 name， 有name就返回never,就代表将其排除 
Omit (省略的)
 
ts中就是将接口或者类型的键值对删除一部分
 
 
 Omit原理
 也就是上面所讲解的知识点拼凑起来的 
type Omit<T, K extends string | number | symbol> = {
  [P in Exclude<keyof T, K>]: T[P]
ReadonlyArray（只读数组）
 
创建一个数组，数组中的索引不允许被修改 
我们知道当我们使用const创建对象或者数组时，其实是可以修改其内部属性的，但是有的时候我们可能不需要其内部能够被修改 
const arr: number[] = [1, 2, 3, 4, 5]
arr[0] = 3 
方法1：通过类型断言的方式
 
 方法2：使用ReadonlyArray，需要传入一个泛型来约束数组中的索引类型
 
 
 这个时候你是不是就想知道as const 和 ReadonlyArray这两者的区别在哪里？ 
区别在于as const是深层次的，尽管数组内放的对象，对象内部数据也是不能被修改的。ReadonlyArray则是‘浅层’的。 
as const
 
 
 ReadonlyArray 

 可以看到修改ReadonlyArray数组内的第二层其实是可以的
                    Typescript的联合类型、Partial、Pick、Exclude、Omit介绍联合类型Partial的实现原理pick的实现原理Exclude的原理Omit原理Typescript的联合类型、Partial、Pick、Exclude、Omit介绍联合类型/* 首先是联合类型的介绍 */let a: string | number = '123' // 变量a的类型既可以是string，也可以是numbera = 123Partial (意思是部分的; 不完全的)，t
				ts文档上关于Record的介绍非常少，但却经常用到，是一个很好用的工具类型。
他会将一个类型的所有属性值都映射到另一个类型上并创造一个新的类型，先看下Record的源码。
 * Construct a type with a set of properties K of type T
type Record<K extends keyof any, T> = {
				Record<K,T>;
将petsGroup中的每个值(‘dog’ | ‘cat’ | ‘fish’)都转为 IPetInfo 类型。当然也可以自己在第一个参数后追加额外的值，
type petsGroup = 'dog' | 'cat' | 'fish';
interface IPetInfo {
  name:string,
  age:number,
type IPets = Record<petsGroup, IPetInfo>;
const anim...
				TS 里几个常用的内置工具类型（Partial、Partial 、 Required 、 Readonly、 Pick 、 Exclude 、 Extract 、 Omit）的使用
Partial
type Partial<T> = {
    [P in kefof T]?: T[P]
作用：生成一个新类型，该类型与 T 拥有相同的属性，但是所有属性皆为可选项
interface Foo {
    name: string
    age: number
				TypeScript 是一种由微软开发的超集语言，它在 JavaScript 的基础上添加了类型系统和对 ECMAScript 新标准的支持。
TypeScript 为 JavaScript 带来了类型系统，可以在编码过程中捕获更多错误，提供了更好的开发体验和更强大的工具。它还提供了对 ECMAScript 的未来版本的支持，可以让开发人员在使用新特性的同时使用类型检查。
TypeScript 的类型系统提供了很多种类型，包括基本类型（如 number、string 和 boolean）和复合类型（如数组、元组和枚举）。它还允许开发人员定义自定义类型，如接口和类。
TypeScript 的类型系统在编译过程中工作，可以捕获在编写代码时可能出现的错误。这有助于提高代码质量和减少开发时间。