typescript初探之函数(function)与泛型(generic)

之前我们有简单了解了一下使用接口表示函数类型。接下来我们了解 typescript 中的函数和泛型。

函数

//声明式
function add(x, y) {
   
  return x + y;
}
// 函数表达式
let myAdd = function(x, y) {
   
  return x + y;
};

JavaScript 声明方式有声明式和表达式，另外有具名函数和匿名函数：

// 匿名函数
(function() {
   
  let a = 20;
  console.log(a);
})();

typescript 除了在 JavaScript 基础上添加了一系列校验外其它没什么很大区别。
typescript 函数类型：

function add(x: number, y: number): number {
   
  return x + y;
}

let myAdd = function(x: number, y: number): number {
   
  return x + y;
};

//完整类型
let myAdd: (x: number, y: number) => number = function(
  x: number,
  y: number
): number {
   
  return x + y;
};

// 函数的参数名称不需要与参数类型定义时的名称一致
let myAdd: (baseValue: number, increment: number) => number = function(
  x: number,
  y: number
): number {
   
  return x + y;
};

这里我们队函数的参数和返回值指定了 number 类型的校验。TypeScript 能够根据返回语句自动推断出返回值类型，因此我们可以省略它。完整函数类型等于号之前的分别为参数和返回值的类型校验，有点类似写箭头函数()=>，=>箭头代表返回。函数的参数名称不需要和参数类型定义时得名称一致。

let myAdd = function(x: number, y: number): number {
   
  return x + y;
};

// 当指定了参数类型定义但 待校验函数参数没有标注类型时，typescript会自动识别类型
let myAdd: (baseValue: number, increment: number) => number = function(x, y) {
   
  return x + y;
};

当指定了参数类型定义但 待校验函数参数没有标注类型时，typescript 会自动识别类型，按照类型定义规则校验。
JavaScript 里函数的参数是可选的定义之后可传可不传，没有传参的时候是 undefined，例如：

function aa(name, age) {
   
  // do something
}

但是 typescript 里一旦表明这个函数有参数，那么在调用这个函数的时候必须加上参数。如果我们想要添加可选参数，可以使用可选类型：

// 可选参数必须跟在必须参数后面。 如果我们想让first name是可选的，那么就必须调整它们的位置，把first name放在后面
function buildName(firstName: string, lastName?: string) {
   
  if (lastName){
   
      return firstName + " " + lastName;
  } else{
   
      else return firstName;
  }
}

我们也可以直接像 ES6 一样给参数一个默认值：

// 当调用函数没有传参数lastName时ÿ