函数类型
函数是JavaScript中非常重要的组成部分,因此typeScript也允许我们指定函数的参数和返回值的类型,声明函数时,可以在每个参数后添加类型注解,用以声明函数接受的参数类型:
function sum(num1: number, num2: number) {
return num1 + num2
}
sum(123, 321)
我们也可以为函数的返回值添加类型注解,这个注解出现在函数列表的后面:
function sum(num1: number, num2: number):number {
return num1 + num2 //我们不仅规定了函数参数的类型,还规定了函数返回值的类型
}
sum(123, 321)
匿名函数的参数
匿名函数与函数声明会有一些不同,当一个函数出现在typeScript可以确定该函数会被如何调用的地方时,该函数的参数会自动指定类型,我们并没有指定item的类型,但是item是一个string类型,这是因为TypeScript会根据forEach函数的类型以及数组的类型推断出item的类型,这个过程称之为上下文类型,因为函数执行的上下文可以帮助确定参数和返回值的类型。
const names = ["abc", "cba", "nba"]
// item根据上下文的环境推导出来的, 这个时候可以不添加的类型注解
// 上下文中的函数: 可以不添加类型注解
names.forEach(function(item) {
console.log(item.split(""))
})
参数类型为对象类型
如果我们希望限定一个函数的参数为对象类型,在对象里我们可以添加属性并且告知typeScript该属性需要是什么类型,属性之间可以使用 , 或者 ; 来分割,最后一个分隔符是可选的,每个属性的类型部分也是可选的,如果不指定,那么就是any类型。
function printPoint(point: {x: number, y: number}) {
console.log(point.x);
console.log(point.y)
}
printPoint({x: 123, y: 321})
可选类型
对象类型也可以指定哪些属性是可选的,可以在属性的后面添加一个?,当然我们在开发中建议函数如果有多个参数时,建议将可选类型放在参数的最后面。
function printPoint(point: {x: number, y: number, z?: number}) {
console.log(point.x)
console.log(point.y)
console.log(point.z)
}
printPoint({x: 123, y: 321})
printPoint({x: 123, y: 321, z: 111})
联合类型
typeScript允许我们使用多种运算符,从现有类型中构建新类型,我们来使用第一种组合类型的方法,联合类型,联合类型是由两个或者多个其他类型组成的类型,表示函数参数可以是这些类型中的任何一个类型,而联合类型中的每一个类型被称之为联合成员。但是在使用联合类型时还是需要注意类型缩小的问题。
function printID(id: number|string|boolean) {
// 使用联合类型的值时, 需要特别的小心narrow: 缩小
// TypeScript帮助确定id一定是string类型
if (typeof id === 'string') {
console.log(id.toUpperCase())
} else {
console.log(id)
}
}
printID(123)
printID("abc")
printID(true)
类型别名
在上面,我们通过在类型注解中编写对象类型或者联合类型,但是当我们想要多次在其他地方使用它们时,就要编写多次,因此我们可以给对象类型起一个别名:
type IDType = string | number | boolean
type PointType = {
x: number
y: number
z?: number
}
function printId(id: IDType) {}
function printPoint(point: PointType) {}
剩余参数
从ES6开始,JavaScript也支持剩余参数,剩余参数语法允许我们将一个不定数量的参数放到一个数组中。
function sum(initalNum: number, ...nums: number[]) {
let total = initalNum
for (const num of nums) {
total += num
}
return total
}
console.log(sum(20, 30))
console.log(sum(20, 30, 40))
console.log(sum(20, 30, 40, 50))
最后由于函数的重载比较重要也难懂,因此我单独总结了一篇文章。