TypeScript笔记 —— 函数的参数类型

93 阅读2分钟

函数的参数类型

函数是JavaScript非常重要的组成部分,TypeScript允许我们指定函数的参数和返回值的类型。声明函数时,可以在每个参数后添加类型注解,以声明函数接受的参数类型。

function greet(name: string) {
    console.log("hello " + name.toUpperCase())
}

image.png

函数的返回值类型

我们也可以添加返回值的类型注解,这个注解出现在函数列表的后面。

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

和变量的类型注解一样,我们通常情况下不需要返回类型注解,因为TypeScript会根据 return 返回值推断函数的返回类型。某些第三方库出于方便理解,会明确指定返回类型,看个人喜好。

匿名函数的参数

匿名函数与函数声明会有一些不同:当一个函数出现在TypeScript可以确定该函数会被如何调用的地方时;该函数的参数会自动指定类型。

const names = ["abc", "cba", "bna"]
names.forEach(item => {
    console.log(item.toUpperCase())
})

我们并没有指定item的类型,但是item是一个string类型。这是因为TypeScript会根据forEach函数的类型以及数组的类型推断出item的类型。这个过程称之为上下文类型(contextual typing),因为函数执行的上下文可以帮助确定参数和返回值的类型。

对象类型

如果我们希望限定一个函数接受的参数是一个对象,这个时候要如何限定呢?我们可以使用对象类型。

function printCoordinate(point: {x: number, y: number}) {
    console.log(point.x)
    console.log(point.y)
}
printCoordinate({x: 10, y: 30})

在这里我们使用了一个对象来作为类型。在对象我们可以添加属性,并且告知TypeScript该属性需要是什么类型。属性之间可以使用 , 或者 ; 来分割,最后一个分隔符是可选的。每个属性的类型部分也是可选的,如果不指定,那么就是any类型。

可选类型

对象类型也可以指定哪些属性是可选的,可以在属性的后面添加一个?

function printCoordinate(point: {x: number, y: number, z?: number}) {
    console.log(point.x)
    console.log(point.y)
    if(point.z) {
       console.log(point.z)
    }
}
printCoordinate({x: 10, y: 30})
printCoordinate({x: 10, y: 30, z: 40})