TS — 函数
最后更新于：2022-04-02 08:11:17
[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('');
}
}
~~~
';