[TOC] >[success] # JS -- 函数的两种表现形式 ~~~ 1.我们熟知js有两种函数表现形式'函数声明'和'函数表达式' 2.二者的区别：在函数声明的中，重名的函数不管你在哪 里调用，都执行最后一个函数，函数表达式就不会出现函 数声明 重名的问题，只会依次正常执行 ~~~ >[danger] ##### 函数声明 ~~~ // 函数声明（Function Declaration） function sum(x, y) { return x + y; } ~~~ >[danger] ##### 函数的表达式 ~~~ // 函数表达式（Function Expression） let mySum = function (x, y) { return x + y; }; ~~~ >[danger] ##### es6 箭头函数 ~~~ const esExample = (name)=>{ console.log(name) } ~~~ >[success] # TS -- 定义一个函数 ~~~ 1.刚才已经知道js 函数中的常见三种写法，接下的案例将会根据这个三种 写法依次推到成现在我们要写的'ts' 写法 ~~~ >[danger] ##### TS -- 函数声明 （定义） ~~~ 1.TS以函数的声明的形式，需要定义函数参数中的类型，以及返回类型。 'function 函数名(参数:类型):函数返回的类型{}' 2.如果函数没有返回类型就是void ~~~ ~~~ function add(arg1:number,arg2:number):number{ return arg1 + arg2 } console.log(add(1,2)) //3 ~~~ >[danger] TS -- 函数函数的表达式/ 箭头函数（定义） ~~~ 1.这个案例直接用箭头函数写一个函数表达式的形式 2.下面两种写法最后编译成'js'的结果不同，但是却在'TS' 表现形式略有区别 第一个案例只对等号右侧的匿名函数进行了类型定义，在吧这个重新被定义 的类型函数赋值给了'add',第二个案例就比较遵循'ts' 规则，先定义了一个 函数类型，这个类型参数指定的类型，以及函数返回的类型，然后使用的 时候在按照定义规范去用 ~~~ * 第一种写法 ~~~ const add = (arg1:number,arg2:number) => arg1 + arg2 console.log(add(1,2)) // 3 ~~~ * 第二种写法 ~~~ // 声明一个函数类型包括参数类型和返回类型 // 这里要注意的是这里表示的是ts 箭头函数左面是函数参数，右面是函数返回类型 let add:(x:number,y:number) => number // 使用的时候具体函数使用 // 参数名字可以不一致但是类型一定要相同 add = (arg1:number,arg2:number) =>{ return arg1+arg2} console.log(add(1,2)) // 3 ~~~ * 第二种写法 弄成基本类型对比理解 ~~~ // 函数比我多了一步使用而已 let name:string name = "1" ~~~ >[danger] ##### 使用接口(定义) ~~~ 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 ~~~ >[danger] ##### 使用类型别名(定义) ~~~ // ts箭头函数不加大括号的含义是 返回 类型 type PersonInfo = (name:string) => string // 这里箭头函数是正常的js 表达的意思 let personName:PersonInfo = (name) => name ~~~ >[danger] ##### ts 定义参数可选参数写法 -- '?'的使用 ~~~ 1.JavaScript里，每个参数都是可选的，可传可不传。但'TS'不同每个函数参数都是必须的，可以理解定义即使用 2.但使用的时候不想将每一个定义的参数都传值使用，就可以用'?' 的形式， 和接口中使用的方式相似 3.需要注意的是，可选参数必须接在必需参数最后面。 ~~~ ~~~ type 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 ~~~ >[danger] TS函数 -- 设置函数参数默认值 ~~~ 1.和es6 一样直接在参数中给要增加的参数赋值默认参数即可 2.案例二中，如果定义默认参数在最前面，想使用默认参数需要传 递'undefined' 3.当有默认参数的时候，默认参数会自动变成一个可选参数，这个好理解 因为不填就用默认参数，填就用填写参数，但是'?'形式的可选参数依然必须 在末尾 ~~~ ~~~ 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"); // error, too few parameters let result2 = buildName("Bob", "Adams", "Sr."); // error, too many parameters let result3 = buildName("Bob", "Adams"); // okay and returns "Bob Adams" let result4 = buildName(undefined, "Adams"); // okay and returns "Will Adams" ~~~ >[danger] ##### TS函数 -- 设置 剩余参数 [js 函数传递](https://www.kancloud.cn/cyyspring/more/1006387) ~~~ 1.使用的场景：你想同时操作多个参数，或者你并不知道会有多少参数传递 进来 2.在es5的时候使用'arguments',在es6 使用'...' 3.对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[]' ~~~ ~~~ const handleData = (arg1: number, ...args: number[]) => { // ... } ~~~ >[danger] ##### 函数重载 ~~~ 1.有时候函数会因为传递的参数不同，导致函数参数返回的时候类型值不同 ，这时候第一反应可能是使用我们之前用的'联合类型',案例一将告诉你为什 推荐'重载' 而用'联合类型' 2.官方文档的标准解释：为了让编译器能够选择正确的检查类型，它与 JavaScript里的处理流程相似。 它查找重载列表，尝试使用第一个重载定 义。 如果匹配的话就使用这个。 因此，在定义重载的时候，一定要把最精 确的定义放在最前面。 ~~~ * 3.4.5 版本不支持下面的写法 ~~~ 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(''); } } ~~~ * 为了让 刚才的写法更加严格使用'重载' ~~~ 1.在编写的时候发现你的参数是数字，就会提示你必须用数字类型作为返回 值。 ~~~ ~~~ function reverse(x: number): number; function reverse(x: string): string; function reverse(x: number | string): any { if (typeof x === 'number') { return Number(x.toString().split('').reverse().join('')); } else if (typeof x === 'string') { return x.split('').reverse().join(''); } } ~~~