TypeScript函数

介绍

函数是 JavaScript 应用程序的基础，它帮助你实现抽象层，模拟类，信息隐藏和模块。在 TypeScript 里，虽然已经支持类，命名空间和模块，但函数仍然是主要的定义行为的地方。TypeScript 为 JavaScript 函数添加了额外的功能，让我们可以更容易地使用

函数类型

为函数定义类型

// 有名称
function add(x:number, y:number):number {
    return x + y
}
// 匿名函数
const addZ = function(x:number, y:number):number {
    return x + y
}

完整函数类型

函数类型包含两部分：参数类型和返回值类型
1、只要参数类型是匹配的就认为它是有效的函数类型，而不在乎参数名是否正确
2、 对于返回值，在函数和返回值类型之前使用( =>)符号表示

// 箭头函数后的number,表示函数返回值类型，没有返回须用void表示，void不可省略
let allFun:(firstNum:number, lastNum:number)=> number =  function(x:number, y:number) {
    return x + y
}
console.log(allFun(10,20)

推断类型

赋值语句的一边指定了类型但是另一边没有类型，编译器会自动识别

let allFun:(first:number, last:number)=> number = function(x, y) {
    return x + y
}
console.log(allFun(10,20))

可选参数和默认参数

1、可选参数必须跟在必须参数后面
2、?实现可选参数的功能
3、=默认初始化值参数

const fullName:(firstName:string, lastName?:string) => string = function(str1, str2) {
    if(str2) {
        return str1 + '_' + str2
    } else {
        return str1
    }
    
}
console.log(fullName('诸葛'))

const fullName2 = (str1:string, str2='不败')=>{
    return str1 + '_' + str2
}
console.log(fullName2('东方'))

const fullName3:(firstName:string, lastName?:string) => string = function(str1, str2='悟空') {
    return str1 + '_' + str2
}
console.log(fullName3('孙'))

剩余参数

必要参数，默认参数和可选参数有个共同点：它们表示某一个参数。你想同时操作多个参数，或者你并不知道会有多少参数传递进来。 在JavaScript里，你可以使用 arguments来访问所有传入的参数。
在TypeScript里，你可以把所有参数收集到一个变量里：

function fun(first:string, ...rest:string[]):string{
    return first + '_' + rest.join('_')
}
const fun2:(first:string, ...rest:string[])=>string = fun

const name = fun('Jack', 'Joh', 'philippe')
console.log(name)

this和箭头函数

是个函数，并且它又返回了一个函数，使用普通函数会报错（“this” 隐式具有类型 “any”）
箭头函数能保存函数创建时的 this值，而不是调用时的值：

let person = {
    name: ['Jack', 'Philippe', 'Make', 'Joh'],
    car: Array(3),
    fun:function(){
        let x:number = 1;
        let y:number = 2
        return ()=> {
            return {
                name: this.name[x],
                car: y
            }
        }
    }
}
let fun = person.fun()
console.log(fun)
console.log(fun())

重载

函数重载: 函数名相同, 而形参不同的多个函数
在JS中, 由于弱类型的特点和形参与实参可以不匹配, 是没有函数重载这一说的 但在TS中, 与其它面向对象的语言(如Java)就存在此语法

function add(x:string, y:string): string
function add(x:number, y:number): number

function add(x:string | number, y:string | number) {
    if(typeof x === 'string' && typeof y === 'string') {
        return x + '_' + y
    } else if (typeof x === 'number' && typeof y === 'number'){
        return x + y
    }
}
console.log(add('a', 'b'))
console.log(add(10, 20))