TypeScript中的类型推论、联合类型和类型断言

102 阅读2分钟

这是我参与11月更文挑战的第18天,活动详情查看:2021最后一次更文挑战

类型推论

TypeScript里,在有些没有明确指出类型的地方,类型推论会帮助提供类型。

let str = '1';

这个时候变量str的类型被推断为字符串。 这种推断发生在初始化变量和成员,设置默认参数值和决定函数返回值时。

我们可以做一下试验:

let str = '1';
str = 1

这里str会报错,报错信息:

因为我们无法将数字类型的值赋给字符串类型的定义

联合类型(union tyes)

联合类型(Union Types)可以通过管道(|)将变量设置多种类型,赋值时可以根据设置的类型来赋值。

注意:只能赋值指定的类型,如果赋值其它类型就会报错。

场景:

我们知道当我们现阶段不清楚类型的变量应该指定什么类型的时候我们可以使用any类型来标记变量,但是any类型的范围太大了如果我们只需要几种固定的类型比如数字或者字符串,那么遇到这种情况我们就不需要用到any类型,我们只需要用到联合类型就可以了。

示例:

let numberOrString:number | string
numberOrString = 'abc'
numberOrString = 123

这个时候我们只能访问此联合属性里面的共有属性和方法,比如:

let numberOrString:number | string
numberOrString.toLocaleString()
numberOrString.toString()
numberOrString.valueOf()

但如果我们使用非共用属性那么会报错比如:

let numberOrString:number | string
numberOrString.length

报错信息:

类型断言

类型断言(Type Assertion)可以用来手动指定一个值的类型。

用途:

但有的时候当 TypeScript 不确定一个联合类型的变量到底是哪个类型的时候,我们只能访问此联合类型的所有类型中共有的属性或方法:

function getLength (input: string | number): number {
    const str = input as string
    if (str.length) {
        return str.length
    } else {
        const number = input as number
        return number.toString().length

    }
}

遇到上面的问题我们可以使用TypeScript 的一个属性type guard

function getLength2 (input: string | number): number {
    if (typeof input === 'string') {
        return input.length
    } else {
        return input.toString().length
    }
}