TypeScript part2 | 青训营笔记

57 阅读3分钟

本文主要是TS学习的第二部分,主要是创建类型中可以使用的一些工具,尤其是泛型,就像TS中的函数一样,很灵活,很强大。当然,本文的内容还是过于基础,如果要掌握TS还是需要课后下很大一番功夫的。

类型创建:基于已有的类型创建新的类型

类型别名

  • type 关键字声明类型别名
  • 用于对一组类型或一个特定类型结构进行封装,以便于在其它地方进行复用
  • 能够接受泛型参数
type StatusCode = 200 | 301 | 400 | 500 | 502

type func = (name: string, age: number) => void

type Example<T> = T | null

type 和 interface

  • 共同点:都可以描述一个对象或者函数

  • 区别:

    • interface 可以通过重复声明来扩展,type 创建的类型只能声明一次
    • interface 只能用于声明对象类型,而type还能用于声明原始类型的别名
    • interface 使用 extends 来实现继承,type 使用 & 来实现交叉类型
    • interface 会创建新的类型名,type 只是创建类型别名,并不新创建类型

联合类型/交叉类型

  • 交叉类型:用& 连接两个类型,需要两个类型都符合才算实现该交叉类型
  • 联合类型:用| 连接两个类型,只需满足任意一个类型即符合该联合类型

索引签名类型

  • 用于快速声明一个拥有任意属性且键值类型一致的接口结构
interface Foo {
	[key: string]: string
}

索引类型查询

  • keyof :从一个接口结构,创建一个由其键名字符串字面量组成的联合类型

索引类型访问

  • [ ] :从一个接口结构,使用键名字符串字面量访问到对应的键值类型
interface Person {
	name: string,
	age: number
}

type PersonKeys = keyof Person // 返回一个联合类型 "name" | "age" 

type PersonName = Person['name'] // string 

映射类型

  • 用于从一个联合类型依次映射到其内部的每一个类型
type Clone<T> = {
	[K in keyof T] = T[K]
}

泛型

泛型参数

  • 可以对泛型的参数进行约束,或是指定参数没有传入时的默认类型
  • 可以传入多个泛型参数,同时这些参数之间可以相互关联
type Foo<T extends string > = T | null

type Bar<T = string> = T | null

type Boo<T, K> = T extends K ? T : K

泛型在类型别名中的应用

  • 与索引类型、映射类型结合使用
// 传入一个对象类型T,返回一个属性均为可选的T类型
type Partial<T> {
	[K in keyof T]?: T[K]
}

interface Person {
	name: string,
	age: number
}

type PartialPerson = Partial<Person>
  • 泛型作为条件类型中的判断条件以及返回值
type IsString<T> = T extends string? string: number

type Foo = IsString<'string'|'number'> // Foo为 string 类型

对象类型中的泛型

// 网络请求返回数据的结构类型
interface IRes<T = any> {
	code: number,
	msg: string,
	data: T
}

函数中的泛型

  • 将返回值和参数的类型进行关联
function func<T>(input: T): T {}