TypeScript 进阶一
这一部分的内容就需要费点脑细胞了,毕竟学习一门语言,还是没那么容易的,最好把基础的内容都理解透彻之后再来学进阶。
1 高级类型
高级类型分一和二两部分,一的部分不需要理解泛型也能理解,二的部分需要理解泛型之后才能理解,所以二被拆分到后面去了。
1.1 联合类型
如果希望一个变量可以支持多种类型,就可以用联合类型(union types)来定义。
例如,一个变量既支持 number 类型,又支持 string 类型,就可以这么写:
let num: number | string
num = 8
num = 'eight'
联合类型大大提高了类型的可扩展性,但当 TS 不确定一个联合类型的变量到底是哪个类型的时候,只能访问他们共有的属性和方法。
比如这里就只能访问 number 类型和 string 类型共有的方法
如果直接访问 length 属性,string 类型上有,number 类型上没有,就报错了
1.2 交叉类型
如果要对对象形状进行扩展,可以使用交叉类型 &。
比如 Person 有 name 和 age 的属性,而 Student 在 name 和 age 的基础上还有 grade 属性,就可以这么写,
interface Person {
name: string
age: number
}
type Student = Person & { grade: number }
这和类的继承是一模一样的,这样 Student 就继承了 Person 上的属性,
联合类型 | 是指可以取几种类型中的任意一种,而交叉类型 & 是指把几种类型合并起来。
交叉类型和 interface 的 extends 非常类似,都是为了实现对象形状的组合和扩展。
1.3 类型别名(type)
类型别名(type aliase),听名字就很好理解,就是给类型起个别名。
就像 NBA 球员 扬尼斯-阿德托昆博,名字太长难记,我们叫他字母哥。
就像我们项目中配置 alias,不用写相对路径就能很方便地引入文件
import componentA from ‘…/…/…/…/components/componentA/index.vue’
变成
import componentA from '@/components/componentA/index.vue
类型别名用 type 关键字来书写,有了类型别名,我们书写 TS 的时候可以更加方便简洁。
比如下面这个例子,getName 这个函数接收的参数可能是字符串,可能是函数,就可以这么写。
type Name = string
type NameResolver = () => string
type NameOrResolver = Name | NameResolver // 联合类型
function getName(n: NameOrResolver): Name {
if (typeof n === 'string') {
return n
}
else {
return n()
}
}
这样调用时传字符串和函数都可以。
getName('lin')
getName(() => 'lin')
如果传的格式有问题,就会提示。
类型别名会给一个类型起个新名字。类型别名有时和接口很像,但是可以作用于原始值,联合类型,元组以及其它任何你需要手写的类型。-- TS 文档
类型别名的用法如下,
type Name = string // 基本类型
type arrItem = number | string // 联合类型
const arr: arrItem[] = [1,'2', 3]
type Person = {
name: Name
}
type Student = Person & { grade: number } // 交叉类型
type Teacher = Person & { major: string }
type StudentAndTeacherList = [Student, Teacher] // 元组类型
const list:StudentAndTeacherList = [
{ name: 'lin', grade: 100 },
{ name: 'liu', major: 'Chinese' }
]
1.4 type 和 interface 的区别
比如下面这个例子,可以用 type,也可以用 interface。
interface Person {
name: string
age: number
}
const person: Person = {
name: 'lin',
age: 18
}
type Person = {
name: string
age: number
}
const person: Person = {
name: 'lin',
age: 18
}
那 type 和 interface 难道都可以随便用,总得有个区别吧。
两者相同点:
● 都可以定义一个对象或函数
● 都允许继承
● 都可以定义一个对象或函数
定义对象上文已经说了,我们来看一下如何定义函数。
type addType = (num1:number,num2:number) => number
interface addType {
(num1:number,num2:number):number
}
//这两种写法都可以定义函数类型
const add:addType = (num1, num2) => {
return num1 + num2
}
● 都允许继承
我们定义一个 Person 类型和 Student 类型,Student 继承自 Person,可以有下面四种方式
// interface 继承 interface
interface Person {
name: string
}
interface Student extends Person {
grade: number
}
const person:Student = {
name: 'lin',
grade: 100
}
// type 继承 type
type Person = {
name: string
}
type Student = Person & { grade: number } // 用交叉类型
// interface 继承 type
type Person = {
name: string
}
interface Student extends Person {
grade: number
}
// type 继承 interface
interface Person {
name: string
}
type Student = Person & { grade: number } // 用交叉类型
interface 使用 extends 实现继承, type 使用交叉类型实现继承
两者不同点:
● interface(接口) 是 TS 设计出来用于定义对象类型的,可以对对象的形状进行描述。
● type 是类型别名,用于给各种类型定义别名,让 TS 写起来更简洁、清晰。
● type 可以声明基本类型、联合类型、交叉类型、元组,interface 不行
● interface可以合并重复声明,type 不行
合并重复声明:
interface Person {
name: string
}
interface Person { // 重复声明 interface,就合并了
age: number
}
const person: Person = {
name: 'lin',
age: 18
}
重复声明 type ,就报错了
type Person = {
name: string
}
type Person = { // Duplicate identifier 'Person'
age: number
}
const person: Person = {
name: 'lin',
age: 18
}
这两者的区别说了这么多,其实本不该把这两个东西拿来做对比,他们俩是完全不同的概念。
interface 是接口,用于描述一个对象。
type 是类型别名,用于给各种类型定义别名,让 TS 写起来更简洁、清晰。
只是有时候两者都能实现同样的功能,才会经常被混淆
平时开发中,一般使用组合或者交叉类型的时候,用 type。
一般要用类的 extends 或 implements 时,用 interface。
其他情况,比如定义一个对象或者函数,就看你心情了。
1.5 类型保护
如果有一个 getLength 函数,入参是联合类型 number | string,返回入参的 length,
function getLength(arg: number | string): number {
return arg.length
}
从上文可知,这么写会报错,因为 number 类型上没有 length 属性。
这个时候,类型保护(Type Guards)出现了,可以使用 typeof 关键字判断变量的类型。
我们把 getLength 方法改造一下,就可以精准地获取到 string 类型的 length 属性了,
function getLength(arg: number | string): number {
if(typeof arg === 'string') {
return arg.length
} else {
return arg.toString().length
}
}
之所以叫类型保护,就是为了能够在不同的分支条件中缩小范围,这样我们代码出错的几率就大大降低了。
1.6 类型断言
上文的例子也可以使用类型断言来解决。
类型断言语法:
值 as 类型
使用类型断言来告诉 TS,我(开发者)比你(编译器)更清楚这个参数是什么类型,你就别给我报错了,
function getLength(arg: number | string): number {
const str = arg as string
if (str.length) {
return str.length
} else {
const number = arg as number
return number.toString().length
}
}
注意,类型断言不是类型转换,把一个类型断言成联合类型中不存在的类型会报错。
比如,
function getLength(arg: number | string): number {
return (arg as number[]).length
}
1.7 字面量类型
有时候,我们需要定义一些常量,就需要用到字面量类型,比如,
type ButtonSize = 'mini' | 'small' | 'normal' | 'large'
type Sex = '男' | '女'
这样就只能从这些定义的常量中取值,乱取值会报错,
1.8 泛型
泛型,是 TS 比较难理解的部分,拿下了泛型,对 TS 的理解就又上了一个台阶,对后续深入学习帮助很大。
为什么需要泛型?
如果你看过 TS 文档,一定看过这样两段话:
软件工程中,我们不仅要创建一致的定义良好的
API,同时也要考虑可重用性。组件不仅能够支持当前的数据类型,同时也能支持未来的数据类型,这在创建大型系统时为你提供了十分灵活的功能。
在像 C# 和 Java 这样的语言中,可以使用泛型来创建可重用的组件,一个组件可以支持多种类型的数据。这样用户就可以以自己的数据类型来使用组件。
简直说的就不是人话,你确定初学者看得懂?
我觉得初学者应该要先明白为什么需要泛型这个东西,它解决了什么问题?而不是看这种拗口的定义。
我们还是先来看这样一个例子,体会一下泛型解决的问题吧。
定义一个 print 函数,这个函数的功能是把传入的参数打印出来,再返回这个参数,传入参数的类型是 string,函数返回类型为 string。
function print(arg:string):string {
console.log(arg)
return arg
}
现在需求变了,我还需要打印 number 类型,怎么办?
可以使用联合类型来改造:
function print(arg:string | number):string | number {
console.log(arg)
return arg
}
现在需求又变了,我还需要打印 string 数组、number 数组,甚至任何类型,怎么办?
有个笨方法,支持多少类型就写多少联合类型。
或者把参数类型改成 any。
function print(arg:any):any {
console.log(arg)
return arg
}
且不说写 any 类型不好,毕竟在 TS 中尽量不要写 any。
而且这也不是我们想要的结果,只能说传入的值是 any 类型,输出的值是 any 类型,传入和返回并不是统一的。
这么写甚至还会出现bug
const res:string = print(123)
定义 string 类型来接收 print 函数的返回值,返回的是个 number 类型,TS 并不会报错提示我们。
这个时候,泛型就出现了,它可以轻松解决输入输出要一致的问题。
注意:泛型不是为了解决这一个问题设计出来的,泛型还解决了很多其他问题,这里是通过这个例子来引出泛型。
1.8.1 泛型基本使用
- 处理函数参数
我们使用泛型来解决上文的问题。
泛型的语法是 <> 里写类型参数,一般可以用 T 来表示。
function print<T>(arg:T):T {
console.log(arg)
return arg
}
这样,我们就做到了输入和输出的类型统一,且可以输入输出任何类型。
如果类型不统一,就会报错
泛型中的 T 就像一个占位符、或者说一个变量,在使用的时候可以把定义的类型像参数一样传入,它可以原封不动地输出。
泛型的写法对前端工程师来说是有些古怪,比如 <> T ,但记住就好,只要一看到 <>,就知道这是泛型。
我们在使用的时候可以有两种方式指定类型。
● 定义要使用的类型
● TS 类型推断,自动推导出类型
print<string>('hello') // 定义 T 为 string
print('hello') // TS 类型推断,自动推导类型为 string
我们知道,type 和 interface 都可以定义函数类型,也用泛型来写一下,type 这么写:
type Print = <T>(arg: T) => T
const printFn:Print = function print(arg) {
console.log(arg)
return arg
}
interface 这么写:
interface Iprint<T> {
(arg: T): T
}
function print<T>(arg:T) {
console.log(arg)
return arg
}
const myPrint: Iprint<number> = print
- 默认参数
如果要给泛型加默认参数,可以这么写:
interface Iprint<T = number> {
(arg: T): T
}
function print<T>(arg:T) {
console.log(arg)
return arg
}
const myPrint: Iprint = print
这样默认就是 number 类型了,怎么样,是不是感觉 T 就如同函数参数一样呢?
处理多个函数参数
现在有这么一个函数,传入一个只有两项的元组,交换元组的第 0 项和第 1 项,返回这个元组。
function swap(tuple) {
return [tuple[1], tuple[0]]
}
这么写,我们就丧失了类型,用泛型来改造一下。
我们用 T 代表第 0 项的类型,用 U 代表第 1 项的类型。
function swap<T, U>(tuple: [T, U]): [U, T]{
return [tuple[1], tuple[0]]
}
这样就可以实现了元组第 0 项和第 1 项类型的控制。
传入的参数里,第 0 项为 string 类型,第 1 项为 number 类型。
在交换函数的返回值里,第 0 项为 number 类型,第 1 项为 string 类型。
第 0 项上全是 number 的方法。
第 1 项上全是 string 的方法。
- 函数副作用操作
泛型不仅可以很方便地约束函数的参数类型,还可以用在函数执行副作用操作的时候。
比如我们有一个通用的异步请求方法,想根据不同的 url 请求返回不同类型的数据。
function request(url:string) {
return fetch(url).then(res => res.json())
}
调一个获取用户信息的接口:
request('user/info').then(res =>{
console.log(res)
})
这时候的返回结果 res 就是一个 any 类型,非常讨厌。
我们希望调用 API 都清晰的知道返回类型是什么数据结构,就可以这么做:
interface UserInfo {
name: string
age: number
}
function request<T>(url:string): Promise<T> {
return fetch(url).then(res => res.json())
}
request<UserInfo>('user/info').then(res =>{
console.log(res)
})
这样就能很舒服地拿到接口返回的数据类型,开发效率大大提高:
1.8.2 约束泛型
假设现在有这么一个函数,打印传入参数的长度,我们这么写:
function printLength<T>(arg: T): T {
console.log(arg.length)
return arg
}
因为不确定 T 是否有 length 属性,会报错
那么现在我想约束这个泛型,一定要有 length 属性,怎么办?
可以和 interface 结合,来约束类型。
interface ILength {
length: number
}
function printLength<T extends ILength>(arg: T): T {
console.log(arg.length)
return arg
}
这其中的关键就是 <T extends ILength>
,让这个泛型继承接口 ILength,这样就能约束泛型。
我们定义的变量一定要有 length 属性,比如下面的 str、arr 和 obj,才可以通过 TS 编译。
const str = printLength('lin')
const arr = printLength([1,2,3])
const obj = printLength({ length: 10 })
这个例子也再次印证了 interface 的 duck typing。
只要你有 length 属性,都符合约束,那就不管你是 str,arr 还是obj,都没问题。
当然,我们定义一个不包含 length 属性的变量,比如数字,就会报错
1.8.3泛型的一些应用
使用泛型,可以在定义函数、接口或类的时候,不预先指定具体类型,而是在使用的时候再指定类型。
- 泛型约束类
定义一个栈,有入栈和出栈两个方法,如果想入栈和出栈的元素类型统一,就可以这么写:
class Stack<T> {
private data: T[] = []
push(item:T) {
return this.data.push(item)
}
pop():T | undefined {
return this.data.pop()
}
}
在定义实例的时候写类型,比如,入栈和出栈都要是 number 类型,就这么写:
const s1 = new Stack<number>()
这样,入栈一个字符串就会报错
这是非常灵活的,如果需求变了,入栈和出栈都要是 string 类型,在定义实例的时候改一下就好了:
const s1 = new Stack<string>()
这样,入栈一个数字就会报错
特别注意的是,泛型无法约束类的静态成员。
给 pop 方法定义 static 关键字,就报错了
- 泛型约束接口
使用泛型,也可以对 interface 进行改造,让 interface 更灵活。
interface IKeyValue<T, U> {
key: T
value: U
}
const k1:IKeyValue<number, string> = { key: 18, value: 'lin'}
const k2:IKeyValue<string, number> = { key: 'lin', value: 18}
- 泛型定义数组
定义一个数组,我们之前是这么写的:
const arr: number[] = [1,2,3]
现在这么写也可以:
const arr: Array<number> = [1,2,3]
数组项写错类型,报错
小结
泛型(Generics),从字面上理解,泛型就是一般的,广泛的。
泛型是指在定义函数、接口或类的时候,不预先指定具体类型,而是在使用的时候再指定类型。
泛型中的 T 就像一个占位符、或者说一个变量,在使用的时候可以把定义的类型像参数一样传入,它可以原封不动地输出。
泛型在成员之间提供有意义的约束,这些成员可以是:函数参数、函数返回值、类的实例成员、类的方法等。