TypeScript 第四章 高级类型

已于 2024-10-02 15:43:18 修改
阅读量393 收藏 6
点赞数 13
分类专栏： TypeScript 文章标签： typescript
于 2024-10-02 15:39:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/YUELEI118/article/details/142681978
版权

TS官网链接

1. 高级类型

1. 重载签名

  • 重载签名允许你在同一个函数名称下定义多个不同的函数签名，每个签名有不同的参数列表和返回类型。实际的函数实现只需要一个，并且必须匹配其中一个签名。

在 TypeScript 中，函数签名定义了函数的参数列表和返回类型。一个函数签名包括：

  1. 参数列表（参数名和类型）
  2. 返回类型
function sum(arg1: number, arg2: number):number;
function sum(arg1: string, arg2: string):string;

function sum (arg1,arg2){
  return arg1+arg2;
}
// 在 TypeScript 中，当你使用重载签名时，编译器会根据实际传递的参数类型来决定使用哪个重载签名。具体来说，编译器会根据参数的实际类型匹配最合适的重载签名。
console.log(sum(1,2));  // 3
console.log(sum('1','2'))   // '12'
  • 在 TypeScript 中，当你看到 +1 overload 的提示时，这意味着当前函数定义中存在一个或多个重载签名（overload signatures）。具体来说，这个提示表明除了当前显示的函数签名外，还有至少一个额外的重载签名。
    在这里插入图片描述

2. 条件类型 T extends U ? X : Y

  • 语法：T extends U ? X : Y 使用了继承关键字extend和三元运算符
  • 含义：T类型是否继承自U类型，如果是则T是X类型，不是则T是Y类型
  • 简单的示例
type ExtractNumberOrString<T> = T extends number | string ? T : never;

// 测试
type Test1 = ExtractNumberOrString<number>; // 结果为 number
type Test2 = ExtractNumberOrString<string>; // 结果为 string
type Test3 = ExtractNumberOrString<boolean>; // 结果为 never
  • 将上面的重载签名的函数改为泛型的条件类型
function sum<T extends number | string>(
  arg1: T,
  arg2: T
): T extends number ? number : string;

function sum(arg1,arg2){
  return arg1 + arg2
}

console.log(sum(1,2));  // 3

console.log(sum('1','2'))   // '12'

3. 类型推断 infer

  • infer 要和条件类型 T extends U ? X : Y一起使用
  • 自己的理解：infer的作用确实是做类型推断，在实际使用中可以理解为声明了一个类型参数，比如下面的例子中就理解为在返回值的地方声明了一个类型参数R，等实参传过来的时候，R就是实参的类型
  1. 示例：计算函数的返回值类型
type ReturnType<T extends (...args: any[]) => any> = T extends (...args: any[]) => infer R ? R : any;
  • 分析：
    1. <T extends (...args: any[]) => any>：T类型被约束为一个函数类型
    2. T extends (...args: any[]) => any ? X : Y：这种结构是条件类型，如果T类型是函数类型，则返回X类型，不是则返回Y类型；因为T类型已经在传入时就确定为函数类型，所以此处必定为真
    3. T extends (...args: any[]) => infer R：infer R代替了上面的any,infer R推断此处的类型为R
    4. T extends (...args: any[]) => infer R ? R : any连起来就是，首先T肯定是个函数类型， infer R：返回值类型推断为R，下面做条件判断，T如果是函数类型，则返回推导出的R类型，不是则无所谓因为T肯定是函数类型。
type ReturnType<T extends (...args: any[]) => any> = T extends (...args: any[]) => infer R ? R : any;

function foo(){
  return 1
}

type Foo = ReturnType<typeof foo>

4. 分发条件类型

  • |：虽然|不是泛型中的关键字，分发类型中必须有它
  • 也必须与T extends U ? X : Y相结合
type toArray<T> = T[]

type newType = toArray<number|string> //newType = (string|number)[]

type toArray1<T> = T extends any ? T[] : never
// 联合类型遇到条件类型就变成了分发类型，会将联合类型中每一项单独运算然后再联合
type newType1 = toArray1<number|string> // newType1 = string[] | number[]


// 区别
// [1,2,3] 是 newType类型也是newType1类型
// ['1',2,3] 是newType类型，但不是newType1类型

2. TypeScript内置的类型工具

1. Partial<T>：把类型T内所有属性变为可选

interface Person {
    name: string;
    age: number;
}
type newType = Partial<Person>
// newType相当于
type newType = {
    name?: string;
    age?: number;
}
  • 实现过程
interface Person {
    name: string;
    age: number;
}
type ToPartial<T> = {
  [P in keyof T]?: T[P];
};
type MyPartial = ToPartial<Person>;
  • 分析
    1. 传入一个对象类型T
    2. keyof T:baT类型中key组成一个联合类型，例子中就组成： name | age
    3. [P in keyof T]?关键字in就是遍历，P遍历key的联合类型；这里相当于把T的key都遍历一次，并且在后面加上?可选属性
    4. T[P]：T是整个对象，P是key，那 T[P]就是value

2. Required<T> :把类型T所有属性变为必选

  • 示例
interface Person {
    name?: string;
    age?: number;
}

type RequiredPerson = Required<Person>;
// RequiredPerson 等价于
// {
//   name: string;
//   age: number;
// }
  • 实现过程
type myRequired<T> = {
    [P in keyof T]-?: T[P];
}
  • 解析
    1. 过程类似于Partial
    2. 不同之处-?，去掉属性的可选

3. ReadOnly<T> :把类型T 内所有属性变为只读

interface Person {
    name: string;
    age: number;
}

type ReadonlyPerson = Readonly<Person>;
// ReadonlyPerson 等价于
// {
//   readonly name: string;
//   readonly age: number;
// }
  • 实现过程
type Readonly<T> = {
    readonly [P in keyof T]: T[P];
};
  • 解析
    1. 过程类似于Partial
    2. 不同之处readonly，所有属性加上readonly

4. Record 把两种类型组合成一个新类型

  • Record<K extends keyof any, T>
type RecordType = Record<Keys, Value>

// 其中keys满足联合类型的约束条件
// keys = "name" | "age" | "adress"
  • 示例1：合并两种类型
type keys = "上海" | "北京";

type value = {
  人口: number;
  面积: number;
};

type newType = Record<keys, value>;

const obj: newType = {
  上海: {
    人口: 100,
    面积: 200,
  },
  北京: {
    人口: 200,
    面积: 300,
  },
};
  • 示例2：将属性的类型一起改变
type value = {
  人口: number;
  面积: number;
};
type newType2 = NewRecord<keyof value, string>;

// type newType2 = {
//   人口: string;
//   面积: string;
// }
  • 实现过程
type NewRecord<T extends keyof any, R> = {
  [key in T]: R;
};
  • 解析
    1. keyof any ：keyof的作用是取对象的属性，返回的是联合类型， keyof any这里的作用主要是想说明这里是联合类型
    2. T extends keyof any：T被约束为联合类型
    3. [key in T]：in关键字的后面只能是联社类型，这里就是在遍历联合类型T

5. Pick 挑选对象内的部分属性

  • Pick<T, K extends keyof T>
interface Info {
  name: string;
  age: number;
  address: string;
}
// 选择了对象中 name和 age属性
type newInfo = Pick<Info, "name" | "age">

// type newInfo = {
//   name: string;
//   age: number;
// }
  • 自己实现pick
interface Info {
  name: string;
  age: number;
  address: string;
}
type newPick<T, V extends keyof T> = {
  [k in V]: T[k];
};

type newInfo2 = newPick<Info, "name" | "age">;
  • 解析：
    1. V extends keyof T：V被约束为T类型中key的联合类型也就是：‘name’|‘age’|‘address’
    2. [k in V]：遍历所有的V，形成新的key
    3. T[k]：T类型中K属性对应的值

6. Omit 把对象内部分属性删除

  • 官方实现：type Omit<T, K extends keyof any> = Pick<T, Exclude<keyof T, K>>;
interface Info {
  name: string;
  age: number;
  gender: string;
}

type newInfo = Omit<Info, "name" | "age">;
// type newInfo = {
//   gender: string;
// }
  • 自己实现omit
type newOmit<T, K extends keyof T> = {
  [P in keyof T as P extends K ? never : P]: T[P];
};
type newInfo1 = newOmit<Info, "name" | "age">;
  • 解析：
    1. P in keyof T：P遍历整个T的key
    2. P in keyof T as P：遍历后命名为P，且只能命名为P，我觉得最后这个P就是前面P in keyof T遍历时的返回值，像是filfter里面的item
    3. P extends K ? never : P：P是否在K的组合类型中，在则弃用，不在则返回
    4. [P in keyof T as P extends K ? never : P]:整个给我的感觉就像是使用filfter来求差集，遍历一个集合，另一个集合中是否也有这个元素，有则排除，没有则留下，最后返回了两个集合的差集

7. Exclude 排除联合类型中的类型

  • type Exclude<T, U>：排除在T类型中的U类型
  • T 必须是联合类型，不然达不到想要的结果
type Info =  string | number | boolean 

type newInfo = Exclude<Info, string>

// type newInfo = number | boolean
  • 自己实现
type Info = string | number | symbol ;

type newExclude<T, U> = T extends U ? never : T;

type newInfo2 = newExclude<Info, string>;

8. Extract 提取两个联合类型中共有的类型，求交集

  • type Extract<T, U> ：在源码中并没有对T和U做类型约束，但是如果T和U不是联合类型，这么做就没有必要
type Info =  string | number | boolean 
type Info1 = string | symbol

type newInfo = Extract<Info, Info1>

// type newInfo = string
  • 自己实现
type newExtract<T, U> = T extends U ? T : never 
// 觉得还可以使用
type newExtract1<T,U> = T & U

9. NonNullable 排除联合类型中的null和undefined

  • type NonNullable<T>
type Info = string | number | boolean | null | undefined;

type newInfo = NonNullable<Info>;d

// type newInfo = string | number | boolean
  • 自己实现
type myNonNullable<T> = T extends null | undefined ? never : T;
  • 源码实现方法比较特殊
type NonNullable<T> = T & {};	// 交叉类型：既满足T
  • 解释：

string & {} 的结果是 string。
number & {} 的结果是 number。
boolean & {} 的结果是 boolean。
null & {} 的结果是 never（因为 null 和 {} 没有公共部分）。
undefined & {} 的结果也是 never（同理）。

10. ReturnType 获取返回值的类型

  • ReturnType<T extends (…args: any) => any>
  • 参考上面的类型推断infer章节

11. InstanceType 类的实例对象的类型

  • type InstanceType<T extends abstract new (...args: any) => any> = T extends abstract new (...args: any) => infer R ? R : any;
  • 解释源码：
    1. new (...args: any) => any 表示构造函数，直接理解为类
    2. abstract new (...args: any) => any：抽象类的构造函数
    3. T extends abstract new (...args: any) => any：传入的类型T既可以是抽象类，也可以是普通的类
    4. R：类的实例类型
  • 示例
class Person {}
class Dog {}
// 工厂函数
function factory<T extends new (...arg: any[]) => any>(
  ctor: T
): InstanceType<T> {
  return new ctor();
}

// 如果没有InstanceType<T>，通过工厂函数实例化的person和dog都是any类型
const person = factory(Person); // person是Person类型
const dog = factory(Dog); // dog是Dog类型

类型中的关键字

  • extends：表示类型约束，用于限制泛型参数的范围。T extends R ：T类型必须是R类型的子集
  • keyof：表示键类型，用于获取对象类型的键。返回的是联合类型："类型1" |"类型2"
  • extends ?：条件类型。
  • infer：用于条件类型中的类型推断。
  • never：表示永远不出现的类型，通常用于错误处理或类型排除。
  • this：表示当前上下文的对象类型。
  • readonly：表示只读属性。
  • in：用于迭代类型或键。in后面必须是联合类型，或经过keyof处理的类型，keyof处理后的类型也是联合类型

泛型的语法

  • T extends keyof any：T 约束为联合类型（大范围可用，有些实际情况不行，参考Exclude中的示例）
YUELEI118
关注
专栏目录
TypeScript 第一章：入门教程（配置、类型推断、基本类型）
知之为知之，不知为不知
06-26 3858
TypeScript 第一章：入门教程，编译TS、TS配置文件、TS的类型推断、TS基本类型、函数
typescript数据类型
wubeidangziqiang的博客
04-24 733
我们提过使用var声明时，它不在乎你声明多少次；你只会得到1个。var x;var x;var x;在上面的例子里，所有x的声明实际上都引用一个相同的x，并且这是完全有效的代码。这经常会成为bug的来源。好的是，let声明就不会这么宽松了。let x = 10;let x = 20;// 错误，不能在1个作用域里多次声明`x`并不是要求两个均是块级作用域的声明TypeScript才会给出一个错误的警告。并不是说块级作用域变量不能用函数作用域变量来声明。而是。
TypeScript 第一章
世间万物皆不如你
06-14 1224
TypeScript 是 JavaScript 的一个超集，它提供了静态类型检查、类、接口等特性，使得编写大型应用程序变得更加容易和可维护。TypeScript 编写的代码可以被编译成 JavaScript，可以在任何支持 JavaScript 的环境中运行。以上是 TypeScript 的一些基础知识。在接下来的学习中，我们将深入了解这些概念，并学习更多高级特性。欢迎来到 TypeScript 学习！本章将为您介绍 TypeScript 的基础知识。
【TypeScript】TS入门到实战（详解：高级类型）
qq_45796592的博客
07-03 1343
彻底理解typescript的语法并会用
Vue TypeScript 实战：掌握静态类型编程
06-10 995
这篇文章介绍了如何在TypeScript环境下为Vue.js应用搭建项目结构，包括初始化配置、创建Vue组件、实现状态管理利用Vuex、配置路由以及性能优化的方法，旨在提升开发效率与应用性能。
第一章 TypeScript快速入门
书启鸿蒙知秋枫
09-28 315
TypeScript是JavaScript的超集。它对JS进行了扩展，向JS中引入了类型的概念，并添加了许多新的特性。TS代码需要通过编译器编译为JS，然后再交由JS解析器执行。TS完全兼容JS，换言之，任何的JS代码都可以直接当成JS使用。相较于JS而言，TS拥有了静态类型，更加严格的语法，更强大的功能；TS可以在代码执行前就完成代码的检查，减小了运行时异常的出现的几率；TS代码可以编译为任意版本的JS代码，可有效解决不同JS运行环境的兼容问题；
两小时快速入门 TypeScript 基础（一）工作流、基本类型、高级类型
HuoZhiyan 的博客
06-26 9601
本文介绍了TypeScript的工作流、基本类型和高级类型，并对一些类型做了举例说明，最后对本文章进行了总结...
TypeScript 高级用法总结
程序员成长指北
10-10 1865
本文主要介绍 TypeScript 的高级用法，适用于对 TypeScript 已经有所了解或者已经实际用过一段时间的同学，分别从类型、运算符、操作符、泛型的角度来系统介绍常见的 Type...
TypeScript 高级用法
CreatorRay的博客
02-08 1153
码字不易，有帮助的同学希望能关注一下我的微信公众号：Code程序人生，感谢！代码自用自取。 本文主要介绍 TypeScript 的高级用法，适用于对 TypeScript 已经有所了解或者已经实际用过一段时间的同学，分别从类型、运算符、操作符、泛型的角度来系统介绍常见的 TypeScript 文章没有好好讲解的功能点，最后再分享一下自己的实践经历。 一、 类型 unknown unknown 指的是不可预先定义的类型，在很多场景下，它可以替代 any 的功能同时保留静态检查的能力。 const n.
（完结14章）TS 从入门到深度掌握，晋级TypeScript高手
08-03
#### 第四章：高级特性 - **装饰器（Decorators）**：探讨装饰器的基础概念，以及它们在类和属性级别的应用。 - **元组（Tuples）**：介绍元组类型的特点及应用场景，特别是在处理固定长度和类型的数组时的优势。 - ...
dashgo:Projeto de aula-点燃第四章
04-02
TypeScript支持接口（Interfaces）、类（Classes）和泛型（Generics）等高级语言特性，这些在"Dashgo"项目中会得到充分展示。接口用于定义对象的结构，确保数据的一致性；类则用于面向对象编程，实现代码的复用和...
TypeScript中的高级类型：联合类型与交叉类型
# 第一章：TypeScript中的类型基础 ## 1.1 类型系统概述 在TypeScript中，类型扮演着非常重要的角色，它有助于在编码过程中捕获潜在的错误，并提供了更好的代码提示和文档，从而提高了代码的可维护性和可读性。 ...
TypeScript高级类型备忘录（附示例）
Yvette Lau的专栏
09-11 633
原文链接: https://dev.to/ibrahima92/advanced-typescript-types-cheat-sheet-with-examples-5414经作者授权...
vue3+el-tale封装（编辑、删除、查看详情按钮一起封装）
CallMe_CrabXie的博客
08-27 2014
对应的tableData和tableDataHeader文件（实际开发中，应该从后端拿tableData，tableHeader根据情况自定义）
基于 python 实现的ios混淆脚本工具
10-01
【作品名称】：基于 python 实现的ios混淆脚本工具 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【项目介绍】： . addNative.py 生成oc垃圾代码工具 此脚本会扫描指定目录，给OC文件添加垃圾函数，同时创建垃圾文件到/trash目录。 参数说明 --oc_folder OC_FOLDER OC_FOLDER为OC代码所在目录 --replace替换OC_FOLDER下的原文件，同时原代码会备份到脚本目录下的backup_ios目录。不指定此项垃圾代码只会放到脚本目录下的target_ios/ addNative.py里还有一些配置可以看需求手动修改，如生成垃圾文件的数量，垃圾函数的数量，忽略文件列表等，具体请查看代码顶部相关注释 renameNative.py 修改类名前缀工具 类名是引用可能较为复杂 【资源声明】：本资源作为“参考资料”而不是“定制需求”，代码只能作为参考，不能完全复制照搬。需要有一定的基础能够看懂代码，能够自行调试代码并解决报错，能够自行添加功能修改代码。
基于SOM算法对IRIS数据集分类_Learning-Som_IrisClassification.zip
10-01
基于SOM算法对IRIS数据集分类_Learning-Som_IrisClassification
06_摄影展示小程序.zip
最新发布
10-01
我们的小程序源码功能多样，涵盖社交、电商等领域。高度定制化，轻松打造专属风格。用户体验佳，界面美观操作便捷。安全可靠，保障数据与运行稳定。适合创业者、企业和开发者。提供技术支持与文档说明。快来下载，开启精彩之旅！
大学生创业计划书××信息技术公司商业计划书
10-01
大学生创业计划书××信息技术公司商业计划书
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值