网站建设推广唯心磁遁8短视频培训机构排名

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) => numberlet 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;elsereturn 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 会优先从最前面的函数定义开始匹配，所以多个函数定义如果有包含关系，需要优先把精确的定义写在前面。