第5课: 函数类型

函数声明

// 命名函数
function add(x: number, y: number): number {
  return x + y;
}

// 匿名函数
let myAdd = function(x: number, y: number): number {
  return x + y;
};

// 箭头函数
let myAdd2 = (x: number, y: number): number => x + y;

完整函数类型

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

// 类型推断
let myAdd2 = function(x: number, y: number): number {
  return x + y;
};

可选参数

使用 ? 标记可选参数，可选参数必须在必需参数后面：

function buildName(firstName: string, lastName?: string): string {
  if (lastName) {
    return firstName + " " + lastName;
  } else {
    return firstName;
  }
}

let result1 = buildName("Bob");
let result2 = buildName("Bob", "Adams");
let result3 = buildName("Bob", "Adams", "Sr."); // 错误：参数过多

默认参数

function buildName(firstName: string, lastName = "Smith"): string {
  return firstName + " " + lastName;
}

let result1 = buildName("Bob");
let result2 = buildName("Bob", "Adams");
let result3 = buildName("Bob", undefined); // 使用默认值

剩余参数

function buildName(firstName: string, ...restOfName: string[]): string {
  return firstName + " " + restOfName.join(" ");
}

let employeeName = buildName("Joseph", "Samuel", "Lucas", "MacKinzie");

函数重载

TypeScript支持函数重载，可以为同一个函数提供多个函数类型定义：

// 重载签名
function reverse(x: string): string;
function reverse(x: number): number;

// 实现签名
function reverse(x: string | number): string | number {
  if (typeof x === "string") {
    return x.split("").reverse().join("");
  } else {
    return Number(x.toString().split("").reverse().join(""));
  }
}

console.log(reverse("hello")); // "olleh"
console.log(reverse(12345)); // 54321

this参数

interface Card {
  suit: string;
  card: number;
}

interface Deck {
  suits: string[];
  cards: number[];
  createCardPicker(this: Deck): () => Card;
}

let deck: Deck = {
  suits: ["hearts", "spades", "clubs", "diamonds"],
  cards: Array(52),
  createCardPicker: function(this: Deck) {
    return () => {
      let pickedCard = Math.floor(Math.random() * 52);
      let pickedSuit = Math.floor(pickedCard / 13);

      return { suit: this.suits[pickedSuit], card: pickedCard % 13 };
    };
  }
};

let cardPicker = deck.createCardPicker();
let pickedCard = cardPicker();

回调函数中的this

interface UIElement {
  addClickListener(onclick: (this: void, e: Event) => void): void;
}

class Handler {
  info: string = "";

  onClickBad(this: Handler, e: Event) {
    this.info = e.type;
  }
}

let h = new Handler();
// uiElement.addClickListener(h.onClickBad); // 错误！

函数类型表达式

type GreetFunction = (name: string) => void;

function greeter(fn: GreetFunction) {
  fn("World");
}

function printToConsole(s: string) {
  console.log(s);
}

greeter(printToConsole);

调用签名

type DescribableFunction = {
  description: string;
  (someArg: number): boolean;
};

function doSomething(fn: DescribableFunction) {
  console.log(fn.description + " returned " + fn(6));
}

function myFunc(someArg: number) {
  return someArg > 3;
}
myFunc.description = "default description";

doSomething(myFunc);