TypeScript -- 函数

TypeScript – 函数

JS – 函数的两种表现形式

我们熟知js有两种函数表现形式’函数声明’和’函数表达式’

函数声明

// 函数声明（Function Declaration）
function sum(x, y) {
    return x + y;
}

函数的表达式

// 函数表达式（Function Expression）
let mySum = function (x, y) {
    return x + y;
};

es6 箭头函数

const esExample = (name)=>{
    console.log(name)
}

TS – 定义一个函数

将上面的三种写法依次推导成'ts'的写法

TS – 函数声明

1.TS以函数的声明的形式，需要定义函数参数中的类型，以及返回类型。
    'function 函数名(参数:类型):函数返回的类型{}'
2.如果函数没有返回类型就是 void

// 返回number类型的值
function add(arg1:number, arg2:number): number{
    return arg1 + arg2
}

// 没有返回值
function sub(arg1: number): void{
    console.log(arg1）
}

TS – 函数函数的表达式/ 箭头函数（定义）

下面两种写法最后编译成'js'的结果不同，但是却在'TS' 表现形式略有区别
    第一个案例只对等号右侧的匿名函数进行了类型定义，在把这个重新被
定义的类型函数赋值给了'add'。
    第二个案例就比较遵循'ts' 规则，先定义了一个函数类型，这个类型参
数指定的类型，以及函数返回的类型，然后使用的时候在按照定义规范去用

• 第一种写法

const add = (arg1:number,arg2:number) => arg1 + arg2
add(1,2) // 3

• 第二种写法

// 声明一个函数类型包括参数类型和返回类型， ts 箭头函数左面是函数参数，右面是函数返回类型
let add:(x:number,y:number) => number

// 使用的时候具体函数使用
add = (arg1:number,arg2:number) =>{ return arg1+arg2}
add(1,2) // 3

使用接口(定义)

interface Add {
    (x:number,y:number):number
}

// 按照接口格式 规范实现我们的myAdd方法
let myAdd: Add
myAdd = (x:number,y:number)=>{
    return x+y
}
// 使用
console.log(myAdd(1,2)) //3

ts 定义参数可选参数写法 – '?'的使用

1.JavaScript里，每个参数都是可选的，可传可不传。但'TS'不同每个函数参数
都是必须的，可以理解定义则必须使用

2.但是有时候不想将每一个定义的参数都传值使用，这时候就可以用'?' 的形式
  来将参数变成可选的和接口中使用的方式相似

3.需要注意的是，可选参数必须接在必需参数最后面。

let AddFun: (x:number,y:number,z?:any) => number

let add:AddFun
add = (x:number,y:number)=>{
    return x+y
}

// 增加了一个z参数
add = (x:number,y:number,z:number)=>{
    return x+y+z
}

• 官方给的案例

function buildName(firstName: string, lastName?: string) {
    if (lastName)
        return firstName + " " + lastName;
    else
        return firstName;
}

let result1 = buildName("Bob");  // works correctly now
let result2 = buildName("Bob", "Adams", "Sr.");  // error, too many parameters
let result3 = buildName("Bob", "Adams");  // ah, just right

TS函数 – 设置函数参数默认值

1.和es6 一样直接在参数中给要增加的参数赋值默认参数即可
2.当有默认参数的时候，默认参数会自动变成一个可选参数,不填就用默认参数，
  填就用填写参数，但是'?'形式的可选参数依然必须在末尾

function buildName(firstName: string, lastName: string = 'Cat') {
    return firstName + ' ' + lastName;
}
let tomcat = buildName('Tom', 'Cat');
let tom = buildName('Tom');

• 案例二

function buildName(firstName = "Will", lastName: string) {
    return firstName + " " + lastName;
}

let result1 = buildName("Bob");                  // 错误，少了个参数
let result2 = buildName("Bob", "Adams", "Sr.");  // 错误，多了个参数
let result3 = buildName("Bob", "Adams");         //  Bob Adams
let result4 = buildName(undefined, "Adams");     // Will Adams

TS函数 – 设置剩余参数

1. 使用的场景：同时操作多个参数，或者在不确定有多少个参数的时候
2. 对es6中的'...' 简单讲解:
    var a = [1,2,3]
    var b = [...a]
    console.log(b) //  [1, 2, 3] 
    // 对象解构
    var aObj = {'a':1}
    var bObj2 = {...aObj,"b":2}
    console.log(bObj2 ) // {a: 1, b: 2}
4. 在'ts' 中也是'...'但需要定义数组类型参数' ...args: number[]'
5. 需要注意的是，剩余参数必须接在必需参数最后面。

const handleData = (arg1: number, ...args: number[]) => {
    console.log(arg1, arg2)
}

函数重载

1.有时候函数会因为传递的参数不同，导致函数参数返回的时候类型值不同
   一种解决办法就是利用'联合类型'

    function reverse(x: number | string): number | string {
        if (typeof x === 'number') {
            return Number(x.toString().split('').reverse().join(''));
        } else if (typeof x === 'string') {
            return x.split('').reverse().join('');
        }
    }

 但是有个缺点，就是不能够精确的表达输入为数字的时候，输出也应该为数字
 输入为字符串的时候，输出也应该为字符串
    
   另一种解决办法就是利用'重载'
2.官方文档的标准解释：重载允许一个函数接受不同数量或类型的参数时，作出不同的处理。

• 用重载定义多个 reverse 的函数类型

function reverse(x: number): number;
function reverse(x: string): string;
function reverse(x: number | string): number | string {
    if (typeof x === 'number') {
        return Number(x.toString().split('').reverse().join(''));
    } else if (typeof x === 'string') {
        return x.split('').reverse().join('');
    }
}

注意，TypeScript 会优先从最前面的函数定义开始匹配，所以多个函数定义如果有包含关系，需要优先把精确的定义写在前面。