TypeScript- TS中的函數(shù)類(lèi)型

• TypeScript- 函數(shù)類(lèi)型
• TypeScript 函數(shù)類(lèi)型中的 => 用來(lái)表示 函數(shù)的定義
• 左側(cè)是: 函數(shù)的參數(shù)類(lèi)型
• 右側(cè)是: 函數(shù)的返回值類(lèi)型

 // ???? 使用類(lèi)型別名 定義 函數(shù)類(lèi)型
 type Adder = (a: number, b: number) => number;
 
 // ?? ES 的實(shí)現(xiàn)
 const add: Adder = (a: number, b: number) => a + b;
 
 // ???? 使用接口 定義 函數(shù)類(lèi)型
 interface Accumulator {
     (a: number, b: number): number;
 }
 
 // ?? ES 的實(shí)現(xiàn)
 const accumulator: Accumulator = (a: number, b: number) => a + b;

// ??ES6中的 => 是函數(shù)的實(shí)現(xiàn)
 const add: Adder = (a, b) => a + b;

?????? DEMO: 用【接口】定義方法

// ???? 定義接口

interface Calc {
  add: (a: number | undefined, b: number | undefined) => number;
  del: (a: number | undefined, b: number | undefined) => number;
  multiple: (a: number | undefined, b: number | undefined) => number;
  mod: (a: number | undefined, b: number | undefined) => number;
  test: () => number;
}

// 接口是用來(lái)實(shí)現(xiàn)(implements)
class Calculator implements Calc {
  // 成員變量
  a: number = 0;
  b: number = 0;

  constructor(a: number, b: number) {
    this.a = a;
    this.b = b;
  }

  add(): number {
    return this.a + this.b;
  }

  del(): number {
    return this.a - this.b;
  }
  multiple(): number {
    return this.a * this.b;
  }
  // 可推導(dǎo)的, 可省略返回類(lèi)型
  mod() {
    return this.a / this.b;
  }
  test(): number {
    return this.a + this.b;
  }
}

const calc = new Calculator(1, 2);
console.info(calc.add());
console.info(calc.del());
console.info(calc.multiple());
console.info(calc.mod());

// 用接口定義方法
interface Add {
  (a: number, b: number): number;
}
interface Reduce {
  (a: number, b: number): number;
}
// 實(shí)現(xiàn)方法-使用箭頭函數(shù)實(shí)現(xiàn)
const adder: Add = (a: number, b: number): number => a + b;
adder(100, 200);
// 實(shí)現(xiàn)方法-使用方法定義實(shí)現(xiàn)
const reduce: Reduce = function (a: number, b: number): number {
  return a - b;
};

reduce(2, 3);

export {};

?????? DEMO 【類(lèi)型別名】 定義一個(gè)/多個(gè)方法

// 使用類(lèi)型別名 定義 單個(gè)函數(shù)類(lèi)型
type Adder = (a: number, b: number) => number;
const add: Adder = (a, b) => a + b;

// 使用類(lèi)型別名 定義 多個(gè)函數(shù)類(lèi)型
type Calc = {
  add: (a: number | undefined, b: number | undefined) => number;
  del: (a: number | undefined, b: number | undefined) => number;
  multiple: (a: number | undefined, b: number | undefined) => number;
  mod: (a: number | undefined, b: number | undefined) => number;
  test: () => number;
};

class Calculator implements Calc {
  a: number = 0;
  b: number = 0;
  constructor(a: number, b: number) {
    this.a = a;
    this.b = b;
  }
  add(): number {
    return this.a + this.b;
  }
  del(): number {
    return this.a - this.b;
  }
  multiple(): number {
    return this.a * this.b;
  }
  mod() {
    return this.a / this.b;
  }
  test(): number {
    return this.a + this.b;
  }
}

const calc = new Calculator(1, 2);
console.info(calc.add());
console.info(calc.del());
console.info(calc.multiple());
console.info(calc.mod());

?????? 函數(shù)類(lèi)型 中的 剩余參數(shù)

• ES6 中, JS支持函數(shù)參數(shù)的剩余參數(shù), 可以把多個(gè)參數(shù)收集到一個(gè)變量中

// ES6 中, JS支持函數(shù)參數(shù)的剩余參數(shù), 可以把多個(gè)參數(shù)收集到一個(gè)變量中
  function acc(...nums: Array<number | string>) {
    return nums.reduce((a, b) => Number(a) + Number(b), 0);
  }
  function sum(...nums: (number | string)[]) {
    return nums.reduce<number>((a, b) => Number(a) + Number(b), 0);
  }

  sum(1, 2, 3);
  sum(2, 3, 4);
  sum(1, 2, "3");

?????? 函數(shù)中的this => 鏈?zhǔn)街械膖his

class Container {
  private val: number;
  constructor(val: number) {
    this.val = val;
  }
  // 函數(shù)類(lèi)型: => 左側(cè)是  函數(shù)的參數(shù)類(lèi)型
  // 函數(shù)類(lèi)型: => 右側(cè)是  函數(shù)的返回值類(lèi)型
  // ?? cb是一個(gè)函數(shù),其參數(shù) x 是 number 類(lèi)型, 返回類(lèi)型 number
  map(cb: (x: number) => number): this {
    this.val = cb(this.val);
    return this;
  }
  log(): this {
    console.info(this.val);
    return this;
  }
}
const instance = new Container(1);
// 返回的一直是 this, 可以一直調(diào)用
instance
  .map((x) => x + 1)
  .log()
  .map((x) => x * 3)
  .log();

?? 看完三件事