seo网站建设价格,双城网站,建设网络平台绩效目标申报表,做课程的网站文章目录 TypeScript -- 函数JS -- 函数的两种表现形式函数声明函数的表达式es6 箭头函数 TS -- 定义一个函数TS -- 函数声明使用接口(定义)ts 定义参数可选参数写法 -- ?的使用TS函数 -- 设置剩余参数函数重载 TypeScript – 函数
JS – 函数的两种表现形式
我们熟知js有两… 文章目录 TypeScript -- 函数JS -- 函数的两种表现形式函数声明函数的表达式es6 箭头函数 TS -- 定义一个函数TS -- 函数声明使用接口(定义)ts 定义参数可选参数写法 -- ?的使用TS函数 -- 设置剩余参数函数重载 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 arg1arg2}
add(1,2) // 3使用接口(定义)
interface Add {(x:number,y:number):number
}// 按照接口格式 规范实现我们的myAdd方法
let myAdd: Add
myAdd (x:number,y:number){return xy
}
// 使用
console.log(myAdd(1,2)) //3ts 定义参数可选参数写法 – ?的使用
1.JavaScript里每个参数都是可选的可传可不传。但TS不同每个函数参数
都是必须的可以理解定义则必须使用2.但是有时候不想将每一个定义的参数都传值使用这时候就可以用? 的形式来将参数变成可选的和接口中使用的方式相似3.需要注意的是可选参数必须接在必需参数最后面。let AddFun: (x:number,y:number,z?:any) numberlet add:AddFun
add (x:number,y:number){return xy
}// 增加了一个z参数
add (x:number,y:number,z:number){return xyz
}官方给的案例
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 rightTS函数 – 设置函数参数默认值 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 AdamsTS函数 – 设置剩余参数
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 会优先从最前面的函数定义开始匹配所以多个函数定义如果有包含关系需要优先把精确的定义写在前面。
