这是我参与更文挑战的第7天，活动详情查看：更文挑战
函数 Function
Typescript 文档地址：Functions
在JavaScript中，函数是构成任何应用程序的基础块。通过函数，你得以实现建立抽象层、模仿类、信息隐藏和模块化。在TypeScript中，虽然已经存在类和模块化，但是函数依旧在如何去"处理"事件的问题上起关键作用。TypeScript在JavaScript的标准基础上给函数添加了一些新的功能使使用者可以更好的用函数处理工作。
首先，和JavaScript一样，TypeScript中的函数可以创建命名函数和匿名函数。这样你就可以为应用程序选择最合适的方式，无论是定义一系列函数API还是一次性使用的函数。
小demo
// 来到我们的第一个例子，约定输入，约定输出
function add(x: number, y: number): number {
return x + y
}
// 可选参数
function add(x: number, y: number, z?: number): number {
if (typeof z === 'number') {
return x + y + z
} else {
return x + y
}
}
// 函数本身的类型
const add2: (x: number, y: number, z?:number) => number = add
// interface 描述函数类型
const sum = (x: number, y: number) => {
return x + y
}
interface ISum {
(x: number, y: number): number
}
const sum2: ISum = sum
函数类型
JavaScript的函数参数是可以任何类型的，typeScript中加了对参数提添加类型，函数本身添加返回值类型。
function greetNane(name: string): string {
return `hello ${name}`
}
还有一种函数声明的方式：
let greetNane: (name: string) => string = function (name: string): string {
return `hello ${name}`
}
typeScript中函数调用时传的参数类型和数量和函数声明时候不匹配会报错。
可选参数和默认参数
可选参数：typeScript中设置函数中一个参数可传也可不传的。
let greetNane: (name: string, age?: number) => string = function (name: string, age?: number): string {
return `hello ${name}`
}
默认参数：和es6的默认参数写一样，也可以在参数后面加类型。
let greetNane: (name: string, age: number = 0) => string = function (name: string, age: number = 0): string {
return `hello ${name} ${age}`
}
let greetNane: (name: string, age = 0) => string = function (name: string, age = 0): string {
return `hello ${name} ${age}`
}
剩余参数
typeScript剩余参数和es6的写法差不多，也是后面加个参数的类型。
let greetNane: (name: string, ...arrs: string[]) => string = function (name: string, ...arrs: string[]): string {
return `hello ${name} ${age}`
}
...的用法和es6的一样。
注：因为现在主流浏览器都没有完全支持es6，所有在实际项目中es6和typescript都是最后转换成es5的写法。剩余参数的转换成es5是遍历arguments参数将参数放到arrs数组中。
let arrs=[]
for (var _i = 0, coumt = arguments.length; i < coumt; i++) {
arrs[_i]=arguments[_i]
}
如果你认为这个可能对应用程序带来性能问题,应考虑不使用剩余参数只使用数组作为参数。
重载
函数重载或方法重载是名称相同并且参数数量类型不同创建多个方法的能力。
typeScript中通过声明函数标签，最后在一个标签实现函数的。
function greetNane(name:string) :string;
function greetNane(name:number) :number;
function greetNane(name:boolean) :boolean;
function greetNane(name:(string|number|boolean)):any{
return name;
}
泛型
作用域，this，箭头函数就不说了，直接说泛型，泛型来创建可重用的组件，一个组件可以支持多种类型的数据。
function greetNane<T>(name:T):T{
return name
}
greetNane<string>('name')
greetNane('name')
函数根据参数的类型来返回对应类型的值。
参考文档：Typescript中文网
人懒，不想配图，都是自己的博客内容（干货），望能帮到大家
公众号：小何成长，佛系更文，都是自己曾经踩过的坑或者是学到的东西
有兴趣的小伙伴欢迎关注我哦，我是：何小玍。 大家一起进步鸭
