Typescript入门(五)

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第5天，点击查看活动详情

大家好,我是吃鱼的老鼠.最近在学习ts,有些心得来分享一下

在线练习网站

官方文档

六. 高级类型

1. 交叉类型

交叉类型是把多个类型合成一个类型,减少代码的重复声明.

一个简单例子

interface Student {
    name: string,
    age: number
}

type Class = Student & { much: number }

在ant-ProComponents开源中有许多应用

export type ProColumnGroupType<RecordType, ValueType> = {
  children: ProColumns<RecordType>[];
} & ProColumnType<RecordType, ValueType>;

类型ProColumnGroupType 中就复用ProColumnType的类型,并还有自己的类型{children}

2. 联合类型

一个变量可能有多种类型,这种情况下就可以用联合类型 例如

let action: number | string;

action = 666;

action = 'hello xdm'

也可以这么用

// colums可以有多种类型
export type ProColumns<T = any, ValueType = 'text'> =
  | ProColumnGroupType<T, ValueType>
  | ProColumnType<T, ValueType>;

// 只能传确定的值
export type BorderedType = 'search' | 'table'; 

3. 类型保护

类型保护可以确保类型在一定的范围内,会在运行时检查以确保在某个作用域里的类型

3.1 使用typeof关键字

function sum (x: number | string ): number {
    if(typeof x === 'number') {
        return x + 1
    } else {
        return x.length
    }
}

参数x可以接受两种类型的参数number和string,函数sum调用后返回一个数值,当参数x是number类型时加1,是string类型是返回其长度.

3.2 使用instanceof关键字

借用官网的例子

interface Padder {
    getPaddingString(): string
}

class SpaceRepeatingPadder implements Padder {
    constructor(private numSpaces: number) { }
    getPaddingString() {
        return Array(this.numSpaces + 1).join(" ");
    }
}

class StringPadder implements Padder {
    constructor(private value: string) { }
    getPaddingString() {
        return this.value;
    }
}

function getRandomPadder() {
    return Math.random() < 0.5 ?
        new SpaceRepeatingPadder(4) :
        new StringPadder("  ");
}

// 类型为SpaceRepeatingPadder | StringPadder
let padder: Padder = getRandomPadder();

if (padder instanceof SpaceRepeatingPadder) {
    padder; // 类型细化为'SpaceRepeatingPadder'
}
if (padder instanceof StringPadder) {
    padder; // 类型细化为'StringPadder'
}

`instanceof`的右侧要求是一个构造函数，TypeScript将细化为：

1.  此构造函数的 `prototype`属性的类型，如果它的类型不为 `any`的话
1.  构造签名所返回的类型的联合