TypeScript中的Function函数

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

有句俗话说在JS中，函数是一等公民。那么在TS中呢？

函数是JavaScript应用程序的基础。 它帮助我们实现抽象层，模拟类，信息隐藏和模块。在TypeScript里，虽然已经支持类，命名空间和模块，但函数仍然是主要的定义行为的地方。

函数

与JavaScript一样，TypeScript函数可以创建有名字的函数和匿名函数。

函数类型

在TypeScript中我们可以给函数定义数据类型。

function add(x:number,y:number):number{
    return x+y
}
add(1,2)
let result = add(1,2)

当然如果我们的数据类型错误他会报错：

function add(x:number,y:number):number{
    return x+y
}
add('1','2')
let result = add(1,2)

报错信息：

同样的如果参数的数量不对也会报错：

function add(x:number,y:number):number{
    return x+y
}
add(1,2,3)
let result = add(1,2)

报错信息：

function add(x:number,y:number):number{
    return x+y
}
add(1)
let result = add(1,2)

报错信息：

可选参数

在TypeScript里我们可以在参数名旁使用?实现可选参数的功能。

function add(x:number,y:number,z?:number):number{
    if(typeof z=== 'number'){
        return x+y+z
    }
    else{
        return x+y
    }
}

注意：如果可选参数后面再加确定参数那么是会报错的。

function add(x:number,y:number,z?:number,t:number):number{
    if(typeof z=== 'number'){
        return x+y+z
    }
    else{
        return x+y
    }
}

报错信息：

函数表达式

const add=(x:number,y:number,z?:number):number=>{
    if(typeof z=== 'number'){
        return x+y+z
    }
    else{
        return x+y
    }
}

但这个时候我们将鼠标放到add上面后会发现add获得了一个类型（函数类型）

如果我们将这里函数类型的add赋值给别的类型的变量会报错：

const add=(x:number,y:number,z?:number):number=>{
    if(typeof z=== 'number'){
        return x+y+z
    }
    else{
        return x+y
    }
}
let add2:string = add

报错信息：

如果要赋值正确的写法如下：

const add=(x:number,y:number,z?:number):number=>{
    if(typeof z=== 'number'){
        return x+y+z
    }
    else{
        return x+y
    }
}

let add2:(x:number,y:number,z?:number) => number = add

拓展

interface也可以描述函数类型

示例：

const add=(x:number,y:number,z?:number):number=>{
    if(typeof z=== 'number'){
        return x+y+z
    }
    else{
        return x+y
    }
}
interface fun{
    (x:number,y:number,z?:number):number
}
let add2:fun = add