typescript

Doris_2023
118 阅读2分钟

泛型理解

泛型定义类似于JavaScript中的函数定义，支持定义参数，解决代码复用等问题。

image.png

 

image.png

 

  image.png

 

image.png

 

 

映射

使用场景：用户注册、查看用户信息是只读

image.png

 

image.png  

image.png  

 

映射语法：

没有加前缀默认是+ image.png

image.png

 

例子：实践映射语法

image.png

 

例子：利用映射类型重新定义userPartial

image.png

 

image.png  

 

 映射使用as：使用as 对只需映射的键进行 重新映射

  image.png

  • NewKeyType的类型必须是string,number,symole,联合类型的子类型

  • 定义一个getters工具类型，用于为对象类型生成对应的getter类型

image.png

image.png

 

type 和interface什么区别

type

image.png  

给一个类型起一个新名字

image.png

  • TypeScript 1.6 版本开始，类型别名开始支持泛型。
意味着type可以实现工具类型
  • 我们都知道泛型定义类似于JavaScript中的函数定义，支持定义参数，解决代码复用等问题。那这意味着什么？
  • 这意味着可以用 type（类型别名）来实现工具类型。

比如我们常用的，Partrail、Required、Pick、Exclude等，都是以type来定义的：  

image.png

 

interface

interface只能用于定义对象类型

比如Vue3中的 App 就是用 inferface 来定义的：

image.png

 

在定义接口时，我们可以同时申明对象类型上的属性和方法

异同点

相同点：

  • 1.都可以来定义 对象或函数
  • 2.都可以扩展，interface 用extends type & 不同点
  • 1.type 可以为基本类型、联合类型或元祖类型 定义别名， interface 不行
  • 2.同名接口会自动合并，而类型别名不会
相似点：

image.png

方便在其他地方使用这些函数

  image.png

image.png

 

不同点

  image.png

 

image.png

  正是因为有了同名接口会自动合并的特性，在开发第三方库的时候就能够为使用者提供更好的安全保障。

image.png

 

使用一般场景

image.png

omit

业务场景

  1. 定义User类型， 用户注册时，只有name、password属性 必填，其他字段服务端生成

  2. 使用 Omit过滤掉对象中不需要的属性 image.png 3.使用接口继承方式 覆盖业务中已知属性的类型

image.png

Omit内部如何实现

image.png

image.png

Omit Pick 互补

avatar
文章
阅读
粉丝