Typescript 学习笔记（二）高级类型二

交叉类型

交叉类型（&）：功能类似于接口继承（extends），用于组合多个类型为一个类型（常用于对象类型）

interface Person2 {name: string}
interface Contact {phone: number}
type PersonDetail = Person2 & Contact

let Obj: PersonDetail = {
    name: 'Anas',
    phone: 1111
}
1
2
3
4
5
6
7
8

交叉类型（&）和接口继承（extends）的对比：
相同点：都可以实现对象类型的组合。
不同点：两种方式实现类型组合时，对于同名属性之间，处理类型冲突的方式不同。

接口类型

interface A {
    fn: (value: number) => void
}
interface B extends A {
    fn: (value: string) => void
}
1
2
3
4
5
6

产生报错

交叉类型

interface A {
    fn: (value: number) => void
}
interface B {
    fn: (value: string) => void
}

type C = A & B

let c: C = {fn(value: number| string){}}
c.fn()
1
2
3
4
5
6
7
8
9
10
11

泛型

泛型是可以在保证类型安全前提下，让函数等与多种类型一起工作，从而实现复用，常用于：函数、接口、class 中。
需求：创建一个 id 函数，传入什么数据就返回该数据本身（也就是说，参数和返回值类型相同）

function id<Type>(value: Type): Type {
    return value
} 

const num =  id<number>(10)
1
2
3
4
5

简单调用泛型函数

const str = id('a')
1

添加泛型约束收缩类型，主要有以下两种方式：1 指定更加具体的类型 2 添加约束。

1. 指定更加具体的类型

function id<Type>(value: Type[]): Type[] {
    console.log(value.length)
    return value
}
1
2
3
4

2 添加约束

interface ILENGTH {length: number}

function id<Type extends ILENGTH> (value: Type): Type {
    console.log(value.length)
    return value
}

const num3 =  id<string>('100')
1
2
3
4
5
6
7
8

多个泛型变量

泛型的类型变量可以有多个，并且类型变量之间还可以约束（比如，第二个类型变量受第一个类型变量约束）
比如，创建一个函数来获取对象中属性的值：

function getProp<Type, Key extends keyof Type>(obj: Type, key: Key) {
    console.log(obj[key])
    return obj[key]
}

let person = {name: 'Anas', age: 18}
getProp(person, 'name') //正常运行
getProp(person, 'name1') //报错
1
2
3
4
5
6
7
8

泛型接口

泛型接口：接口也可以配合泛型来使用，以增加其灵活性，增强其复用性

interface IdFunc<Type> {
    id: (value: Type) => Type
    ids: () => Type[]
}

let obj6: IdFunc<number> = {
    id(value) {return value},
    ids() {return [1, 2, 3]}
}
1
2
3
4
5
6
7
8
9

泛型类

class GenericNumber<NumType> {
    defaultValue: NumType
    add: (x: NumType, y: NumType) => {}
    constructor(value: NumType) {
        this.defaultValue = value
    }
}

const myNum = new GenericNumber<number>(100)

myNum.defaultValue = 10
myNum.add('a', 'b') //报错
1
2
3
4
5
6
7
8
9
10
11
12

泛型工具类型

泛型工具类型：TS 内置了一些常用的工具类型，来简化 TS 中的一些常见操作
它们都是基于泛型实现的（泛型适用于多种类型，更加通用），并且是内置的，可以直接在代码中使用。
这些工具类型有很多，主要学习以下几个：

1. Partial
2. Readonly
3. Pick
4. Record

泛型工具类型 - Partial

泛型工具类型 - Partial 用来构造（创建）一个类型，将 Type 的所有属性设置为可选

interface Props {
    id: string
    children: string[]
}

type PartialProp = Partial<Props>

let pp:PartialProp = {}
1
2
3
4
5
6
7
8

泛型工具类型 - Readonly

泛型工具类型 - Readonly 用来构造一个类型，将 Type 的所有属性都设置为 readonly（只读）