TypeScript笔记 —— 类型缩小

类型缩小

类型缩小的英文是 Type Narrowing（也有人翻译成类型收窄）。我们可以通过类似于 typeof padding === "number" 的判断语句，来改变TypeScript的执行路径。在给定的执行路径中，我们可以缩小比声明时更小的类型，这个过程称之为 缩小。而我们编写的 typeof padding === "number 可以称之为 类型保护。

常见的类型保护有如下几种：

• typeof
• 平等缩小（比如===、!==）
• instanceof
• in

typeof

在 TypeScript 中，检查返回的值typeof是一种类型保护。因为 TypeScript 对如何typeof操作不同的值进行编码。

type ID = number | string
function printId(id: ID) {
    if(typeof id === 'string'){
        console.log(id.toUpperCase())
    }else {
        console.log(id)
    }
}

平等缩小

我们可以使用Switch或者相等的一些运算符来表达相等性（比如===, !==, ==, and != ）。

type Direction = 'left' | 'right' | 'center'
function turnDirection(direction: Direction) {
    switch(direction) {
        case 'left':
            console.log('left')
            break
        case 'right':
            console.log('right')
            break
        case 'center':
            console.log('center')
            break
        default:
            console.log('默认方法')
    }
}

instanceof

JavaScript 有一个运算符来检查一个值是否是另一个值的“实例”。

function printValue(date: Date | string){
    if(date instanceof Date){
        console.log(date.toLocalString)
    }else {
        console.log(date)
    }
}

in操作符

Javascript 有一个运算符，用于确定对象是否具有带名称的属性：in运算符。如果指定的属性在指定的对象或其原型链中，则in 运算符返回true。

type Fish = {swim: () => void}
type Dog = {run: () => void}

function move(animal: Fish | Dog) {
    if('swim' in animal) {
        animal.swim()
    } else {
        animal.run()
    }
}

TypeScript函数类型

在JavaScript开发中，函数是重要的组成部分，并且函数可以作为一等公民（可以作为参数，也可以作为返回值进行传递）。那么在使用函数的过程中，函数是否也可以有自己的类型呢？我们可以编写函数类型的表达式，来表示函数类型。

type CalcFunc = (num1: number, num2: number) => void
function calc(fn: CalcFunc) {
    console.log(fn(20, 30))
}

function sum(num1: number, num2: number) {
    return num1 + num2
}

function mul(num1: number, num2: number) {
    return num1 * num2
}

calc(sum)
calc(mul)

在上面的语法中 (num1: number, num2: number) => void，代表的就是一个函数类型：

• 接收两个参数的函数：num1和num2，并且都是number类型
• 并且这个函数是没有返回值的，所以是void

在某些语言中，可能参数名称num1和num2是可以省略，但是TypeScript是不可以的。