函数
函数是 JavaScript 应用程序的基础,它帮助你实现抽象层,模拟类,信息隐藏和模块。在 TypeScript 里,虽然已经支持类,命名空间和模块,但函数仍然是主要的定义行为的地方。TypeScript 为 JavaScript 函数添加了额外的功能,让我们可以更容易地使用。
示例
// 声明式函数
function add(x,y) {
return x + y
}
// 函数表达式
let c = function(x,y) {
return x + y
}
1. 为函数定义类型
function add(x : number,y:number) {
return x + y
}
书写完整函数类型
let myAdd : (x : number,y : number)=>number =
function (x : number,y:number) {
return x + y
}
函数类型包含两部分:参数类型和返回值类型。 当写出完整函数类型的时候,这两部分都是需要的
注意 : 只要书写的函数,函数参数匹配函数类型,不用在乎函数类型的形参名字。
2. 推动类型
如果赋值语句一边指定了类型但另一边没有类型的话,TypeScript编译器会自动识别出类型。
这叫做“按上下文归类”,是类型推论的一种。它帮助我们更好地为程序指定类型。
3. 可选参数与默认参数
TypeScript里的每一个参数都是必须的,编译器会检查开发者是否为每个参数都传入了值,编译器会假设只有这些参数会被传入函数,入参个数必须与形参个数一致。
function processConfig(data : any,header : AxiosRequestHeader) {
// ....
}
processConfig(data) // Error 参数过少
processConfig(data,header,method) // Error 参数过多
processConfig(data,header) // OK
在TypeScritp中,可以为?
使一个参数可选的,通常可选参数放在形参位置的末尾。
function processConfig(data : any,header ?: AxiosRequestHeader) {
// ....
}
也可以通过设置参数的初始化值,与可选参数不同,它可以不指定类型,且可以不妨到形参位置末尾。
function processConfig(data ={ code : 200,msg : 'xxx'},header ?: AxiosRequestHeader) {
// ....
}
4. 剩余参数
有时候,你想要操作多个参数实现多态,在Javascript里,你可以通过Array.prototype.slice.call(arguments)
来访问传入参数。
在ES6里,可以通过function(..args)
,访问args
传入参数
在TypeScript中也一样。
function buildName(...args : string[]) {
}
5. this
我们可以显式为函数里面定义一个this
参数
function f(this : void ) {
// 确保this在此独立函数中可用
}
又例如 :
class A {
name : string
}
// 函数现在显式指定其被调用方必须是 deck 类型
let a : A = {
name : '叼捏奶'
sayMyName (this : A) {
console.log(this.a)
}
}
可以定义在回调函数中
interface UIElement {
addClickListener (onclick: (this: void, e: Event) => void): void
}
6. 重载
Javascript是个动态语言,加入TypeScript后,可以提供给他重载的特性。但并不是说传入的参数不同就能调用不同的重载函数,而仅仅是为躲过编译器的检查而已
// 下面两个是重载列表
function pickCard(x: {suit: string; card: number }[]): number
function pickCard(x: number): {suit: string; card: number }
// 这个是实现
function pickCard(x): any {
if (Array.isArray(x)) {
let pickedCard = Math.floor(Math.random() * x.length)
return pickedCard
} else if (typeof x === 'number') {
let pickedSuit = Math.floor(x / 13)
return { suit: suits[pickedSuit], card: x % 13 }
}
}
网友评论