四、函数

2020-02-19  本文已影响0人  zdxhxh

函数

函数是 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 }
  }
}

上一篇 下一篇

猜你喜欢

热点阅读