typescript 类型体操 之 知识点总结(1)

211 阅读4分钟

一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第12天,点击查看活动详情

前言

在学习typescript的过程当中,有一个github库对其类型的学习特别有帮助,是一个有点类似于leetcode的刷题项目,能够在里面刷各种关于typescript类型的题目,在这之前我们已经完成了前面五道题,今天将来总结一下之前提到的或者比较基础的知识点,以及关于 typescript 映射类型的一些基本知识,以便于更好的向下学习。

type-challenges/type-challenges: Collection of TypeScript type challenges with online judge (github.com)

接口,类型别名 和 映射类型

接口

在 typescript 中,接口(interface)只能定义对象类型,接口,可以简单理解为,我们为对象属性声明一种约定。

Typescript中是这么描述的:

  • TypeScript的核心原则之一是对值所具有的结构进行类型检查。它有时被称做“鸭式辨型法”或“结构性子类型化”。
  • 在TypeScript里,接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。

比方说我们可以声明一个接口:

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

然后使用它对一个变量进行约束:

let man: Person;

man = { age: 18, name: 'xiaoming' }

此时在我们对 man 进行赋值的时候,就必须要遵守 Person 接口的定义,也就是必须存在 name 属性类型为 string,age 属性类型为 number,不满足的话 typescript 将会给出编译错误

image.png

接口还可以进行 merge 合并,也就是声明合并,何为声明合并?

声明合并是指TypeScript编译器将两个或多个类型合并为一个声明,只要它们具有相同的名称。

image.png

如果要合并的任何接口包含相同的属性名称,并且该属性不是函数,则属性的type必须相同,否则编译器将引发错误。

image.png

当合并接口中的元素是函数并且它们具有相同的名称时,它们将被重载,即,根据传递的参数的type ,将调用适当的函数。

image.png

类型别名

type 又叫类型别名(type alias),作用是给一个类型起一个新的名字,因为除了简单的基础类型,我们还会遇到复杂的结构类型需要复用,那么我们就可以给它起一个别名,方便在需要的地方重复使用。

image.png

类型别名可以声明任何的数据类型(基本类型别名,联合类型,元组等类型),比较经常用于联合类型,还可以声明等等要提到的映射类型。

映射类型

当你的一个新类型基于另一个类型,但是你又不想重复声明两个相似的类型的时候,就需要用到映射类型。

我们类型体操中的工具类型就是一个个的映射类型。

我们通常可以用 keyof 关键字来遍历键以创建类型:

image.png

我们可以使用 ToNumber 这个映射类型来快速的创建一个新类型,基于原本的类型之上。

并且在映射的过程之中,我们可以改变两个额外的修饰符,分别是 可变性和可选性,readonly。可以通过 -+ 前缀来删除或者添加这些修饰符

1650180875(1).png

keyof 关键字

keyof 操作符用于获取一个对象中所有的 key 值,并且它们会是一个联合类型

type Person1 = {
  name:string
  age:number
}

type Person3 = keyof Person1 // "name" | "age"

遍历枚举类型

我们可以用 in 关键字来遍历枚举类型

image.png

像我们上面的映射类型,就是需要使用 in 关键字来遍历每一个键值来进行操作。

todo[key]

Indexed Access Types 又叫做 索引访问类型

image.png

我们可以用一个简单的工具类型来看一下:

type Readonly<T> = {
    readonly [P in keyof T]: T[P];
}

Readonly 工具类型可以将对象中的每一个属性都转为只读,通过上面介绍的遍历和索引访问类型结合,我们就能够明白这个工具类型都做了什么,将对象中的每一个属性类型都取出来并且加上 readonly 关键字,然后在重新赋值回去。

总结

本文总结了之前碰到的或者没碰到的部分知识点,之后再类型体操的过程中会继续去总结部分的知识点,以便于能更好的进行刷题的进度进行~

引用

typescript接口_TypeScript中的接口声明合并

Indexed Access Types