前言

之前一直使用的是 js 现在转过来学习 ts 的时候尝到了 ts 对类型规范的很多好处，相应的 ts 的类型有时候也让人头大,下面简单总结一下自己对 ts 高级类型的学习成果。

一般类型

//给变量指定类型
const value: string = "value"
//给方法的形参和返回值指定类型
const fun0 = (str: string): string => {
    return ""
}
//甚至可以直接给方法指定类型
type funType = (str: string) => string
const fun1: funType = (str) => {
    return ""
}

这个时候我们可以看的 fun1 这时候是不用指定 str 的类型的，IDE会自动提示，如下：

image

但还有个特殊的情况 fun1 的形参是可以不写的，比如：

type funType = (str: string) => string
const fun2: funType = () => {
    return "fun2 return value"
}
console.log(fun2("value"));

这样是不会报错的，可是为什么呢？我们明明指定了funType的形参有且是string，那大家肯定想问真是为什么，抱歉我也不知道，哈哈哈！如果有知道的朋友希望能留言告知。这样做的问题是在fun2里面是拿不到传入的形参的，不知道是不是bug。

泛型

对就是它，我个人来说在学习和使用ts的途中最头疼的就是泛型，ts中泛型的使用真的让人头晕眼花，但当你真的看明白ts中泛型的使用是又不得不说这简直就像是在变魔术。下面记录一下泛型的一般用法：

//将对象中值为number类型的数据组成一个新对象
function getObjAllNum<T>(t: T): any {
    let numObj = {} as any;
    for (const tKey in t) {
        if (typeof t[tKey] == "number") {
            numObj[tKey] = t[tKey]
        }
    }
    return numObj
}
const value = {
    name: 'zl',
    age: 27,
    sex: 'm'
}
//输出 {age: 27}
console.log(getObjAllNum(value));

可以看到，当我们调用getObjAllNum的时候T类型已经转变成对象value的类型了。

image.png

高级类型

接下来要说的就是ts为我们提供的一些类型的高级操作方式

类型别名（type）

可以理解成可以给一个类型再取另一个名字，比如：

type myString = string
const str: myString = "str"

联合类型（|）

A|B表示A或者B中的任意一个类型 ，如下代码，zhangSan就是属于Man类型，xiaoLi属于Woman类型。

interface Man {
    working(): void;
}
interface Woman {
    shopping(): void;
}
type Person = Man | Woman
const zhangSan: Person = {
    working() {
        console.log('working')
    }
}
zhangSan.working()
const xiaoLi: Person = {
    shopping() {
        console.log('shopping')
    }
}
xiaoLi.shopping()

但需要注意的是下面这种写法：

const person: Person = {
    working() {
        console.log('working')
    },
    shopping() {
        console.log('shopping')
    }
}

这样写是不会报错的，但是当试图调用方法的时候就会报错，可以看出调用shopping的时候，就会提示Man不存在shopping属性，其实这是因为A|B联合类型表示的是A或者B中的任意一个类型，只有一个类型，而不是两种类型的合并，下面来说说真正的合并交叉类型（&）

image.png

交叉类型（&）

A&B高级类型是将两个类型合并成了一个类型，这个类型拥有A和B的所有属性，所以称其为合并类型也没啥毛病。这东西才学的时候一直以为是交集，其实应该是并集才对。

interface Apple {
    size: string,
    color: string,
}
interface Pen {
    type: string,
    color: string,
}
type Pineapple = Apple & Pen
const pineapple: Pineapple = {
    size: '大',
    color: '黄色',
    type: '海南凤梨'
}

这里有个问题就是两个Interface做交叉类型时，如果含有相同的key会出现什么问题呢？详情请见另一篇。

类型索引（keyof）

keyof的作用是将一个类型拆分开了，将拆分出来的子类型的集合作为类型返回，如下代码，PersonKeys的类型（图keyof.png所示）为name|age这种联合类型

interface Person {
    name: string,
    age: number
}
type PersonKeys = keyof Person

keyof.png

类型约束（extends）

extends的作用是约束泛型，将泛型的类型限定成某个类型，如下例子:logPersonInfo<Person>()可以传入Man和Woman两种类型，但logPersonInfo<Man>()却只能传入Man类型,logPersonInfo<Woman>()却只能传入Woman类型。

interface Person {
    name: string,
    age: number
}
class Man implements Person {
    name = 'zhangSan';
    age = 27;
    working() {}
}
class Woman implements Person {
    name = 'xiaoLi';
    age = 26;
    shopping() {}
}
function logPersonInfo<T extends Person>(t: T) {
    console.log(`name : ${t.name} , age : ${t.age}`)
}
logPersonInfo<Person>(new Man())
logPersonInfo<Person>(new Woman())
logPersonInfo<Man>(new Man())
logPersonInfo<Woman>(new Woman())

下面再说一种情况，来更加深入的了解extends:

interface Person {
    name: string,
    age: number
}
class Alien {
    name = "E.T"
    age = 1000
    fly() {
    }
}
function logPersonInfo<T extends Person>(t: T) {
    console.log(`name : ${t.name} , age : ${t.age}`)
}
logPersonInfo<Person>(new Alien())

这个时候我们传入logPersonInfo<Person>()的是一个Alien，这时候也不会有什么问题，因为Alien包含了Person的所有属性。对比两个例子我们能看得出来这里的extends和类继承的extends是不一样的，这个地方的extends起到的作用只是限制泛型T的类型为包含了Person类型的所有属性（当然所有属性的类型也要一致）的类型。

类型映射（in）

in高级类型起到的作用是做类型的映射，它会遍历已有类型的所有key或者是联合类型的所有类型，有点类似于forin。下面我们写的demo，将已有类型的所有属性转换成可空类型。

interface Person {
    name: string;
    age: number;
}
//此时这里的P就是in遍历出来的key
//将Person的所有key遍历出来设置成?:可空类型，再赋值上key对应的value
//这时候的PersonValueCanNull类型就是所有属性可为空的Person类型了
type PersonValueCanNull = { [P in keyof Person]?: Person[P] }

如上代码，这个时候PersonValueCanNull的类型为{name?: string, age?: number},如图：

image.png

再来个联合类型的例子：

type ValueKeyType = "key1" | "key2" | "key3"
type ValueType = { [P in ValueKeyType]: boolean }
const value: ValueType = {
    key1: false,
    key2: false,
    key3: false,
}

结合上面联合类型的例子，我们再来看第一个例子，[P in keyof Person]就可以拆分成[P in keyof "name"|"age"]，其实最终都是使用联合类型来进行in操作

条件类型（A ? B : C）

条件类型其实就是一个三元运算操作，如果满足条件A那么就是B类型，否则就是C类型，话不多说上代码：

//传入T和U，如果T包含U所有的key，那么返回类型是T，反之返回的是T和U的交叉类型
type MergeAction<T, U> = T extends U ? T : T & U

interface Teacher {
    name: string,
    age: number,
    teachStudentNum: number
}

interface Father {
    name: string,
    age: number,
    childNum: number
}

//回顾一下之前的 extends， Teacher里面没有包含Father里面的
//所有key，所以返回的是Teacher&Father的交叉类型
const person: MergeAction<Teacher, Father> = {
    name: 'zl',
    age: 27,
    teachStudentNum: 60,
    childNum: 1
}

类型如图：

image.png

下面我们再来个keyof的例子

const person :MergeAction<keyof Teacher, keyof Father> = "name"

此时的类型就是 name|age的联合类型了。

image.png