TypeScript实例讲解(二十六)

429 阅读2分钟

这是我参与11月更文挑战的第26天,活动详情查看:2021最后一次更文挑战

接上一篇:TypeScript实例讲解(二十五)

本篇内容:TypeScript 内置类型。

全局对象

// 例 1
const fruits: Array<string> = ['banana', 'orange', 'mango'];

微信截图_20211125171133.png 我们尝试查看一下 Array 是在哪里定义的,如上图 Array 在不同的文件中都有定义。根据不同版本或不同的功能合并在了一起,前面讲解过 interfaceclass 多次定义会合并。这些文件都是以 libs 开头并且以 .d.ts 结尾,告诉大家这是一个内置对象类型。

内置对象是指根据标准在全局作用域上存在的对象,在 TypeScript 项目中会自动加载进来。

// 例 2
const date = new Date()
date.getTime()

变量 date 变成了内置的 Date 类型,此时就可以方便地调用上面的方法。

// 例 3
const reg = /[a-z]/
reg.test('a')

变量 reg 的类型是 RegExp 类型,此时同样可以调用上面的方法。

内置对象

// 例 4
Math.abs(-20)

Math 与其他全局对象不同,Math 不是一个构造函数,它所有的属性和方法都是静态的。

// 例 5
let body = document.body

document 也是一个内置对象,变量 body 的类型为 HTMLElement

功能性类型举例

除了内置类型,TypeScript 还提供了一些功能性的类型。

Partial
Partial 的作用是把传入的类型都变成可选。

// 例 6
interface Person {
    name: string
    age: number
}
type Person2 = Partial<Person>

此时的 Person2 的属性已经变成可选的了。相当于:

interface Person2 {
    name?: string
    age?: number
}

实现 Partial

type Partial<T> = {
    [k in keyof T]?:T[k]
}

Readonly
Readonly 的作用是它返回的类型将所有属性标记为 readonly。

// 例 7
type Person3 = Readonly<Person>

此时的 Person3 已经变成只读。相当于:

interface Person3 {
    readonly name: string
    readonly age: number
}

实现 Readonly:

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

常用的功能性类型

Partial<T>:将所有类型转为可选类型
Required<T> :将所有属性类型转为必选属性类型
Readony<T>: 将所有属性类型转为只读属性选项类型
Pick<T, K>:从 T 中筛选出 K (大类型中挑选小类型)
Record<T>: 标记 K 中的属性为T类型; key=>value
Exclude<T, U>: 从 T 中剔除可以赋值给 U 的类型 (返回 T 中除了 U 的类型)
Extract<T, U>:提取 T 中可以赋值给 U 的类型(提取 T 与 U 的交集)
NonNullable<T>:从 T 中剔除 null,underfined 类型
Parameters<T>:获取函数参数类型
ReturnType<T>:获取函数返回值类型
ConstructorParamters<T>:获取构造函数的参数类型
InstanceType<T>:获取构造函数类型的实例类型(获取一个类的返回类型)

本篇完!如果文章对你有一点点帮助,请记得点个赞哦。