TypeScript高级类型

前言

        上一期我们讲到了TypeScript的基础类型，不了解TypeScript可以看我上期的内容。

        点击此处<<<

        这次我们来学习TypeScript的高级类型

1.高级类型

1.1 联合类型

        当一个变量我们想要它是一个number类型，或者也可以是一个string类型时，我们可以使用联合类型，书写方式为 number | string ，这样这个变量为number或者为string时在TypeScript中是合法的，为其他变量就会报错，就相当于JavaScript中的短路或( || ) 。

function getSum(num1: number | string, num2: number | string): number {
    return (+num1) + (+num2); // 这里分不清'+'号的作用，需要将a,b隐式转换为数值类型
}

1.2 交叉类型

        可以将多个类型合并为一个统一的类型，相当于求并集，当一个变量同时想要A类型的属性和方法，也想要B类型的属性和方法，可以使用交叉类型，使用 & 符号合并到一起。

interface UserName {
    id?: number // ?表示可选
    name: string
}
interface Gender {
    gender: string
}
const User: UserName & Gender = {
    id: 1,
    name: '张三',
    gender: '男',
    age: 18 // 报错 对象字面量只能指定已知属性，并且“age”不在类型“UserName & Gender”中。
}

        从上述代码中可以看到，使用&将UserName和Gender两个类型合并到了一起，?表示可选的意思，当出现两个类型都没有的属性时会报错。

1.3 可选类型

        可选类型把声明的类型变为可选的，使用Partial关键字，从字面意思可以看出和可选符号(?)有关，顾名思义，就相当于将所有涉及到的属性都加上？。

interface User {
    id: number
    name: string
    gender: string
}
const user1: User = {
    id: 1,
    name: '张三',
    gender: '男'
}
const user2: Partial<User> = {
    name: '李四'
}

        从上述代码可以看出不使用可选类型的变量必须严格按照设置的类型，缺一不可。

1.4 条件类型

        相当于JavaScript中的三元表达式，也称三目表达式，只是在TypeScript中操作的是类型而非值。

interface UserId {
    id: number
}
interface UserName {
    name: string
}
interface UserGender {
    gender: string
}
interface UserAge {
    age: number
}
type User<T> = T extends UserId ? UserName : UserGender // extends是将后面的类型继承给前面的类型
const user1: User<UserId> = {
    name: '张三'
}
const user2: User<UserName> = {
    gender: '男'
}
const user3: User<UserAge> = {
    age: 18 // 报错 对象字面量只能指定已知属性，并且“age”不在类型“UserGender”中。
}

        上述代码的意思是判断T的类型，如果T是UserId类型的话，它取得是UserName类型，反之就是UserGender类型。