TypeScript- TS中的函数类型

前端人

共 7247字,需浏览 15分钟

 ·

2021-08-17 10:54

鬼哥本周将通过几篇优秀的Typescript文章,让大家学习到Typescript一些高级的用法,让大家对Typescript更加的深入理解,并且更好实践到工作当中,【一共五篇文章】,关注我们一起完成这个系列的学习

原文:https://github.com/leslie1943




  • TypeScript- 函数类型
  • TypeScript 函数类型中的 => 用来表示 函数的定义
  • 左侧是: 函数的参数类型
  • 右侧是: 函数的返回值类型
 // 🎃🎃 使用类型别名 定义 函数类型
 type Adder = (a: number, b: number) => number;
 
 // ✅✅ ES 的实现
 const add: Adder = (a: number, b: number) => a + b;
 
 // 🎃🎃 使用接口 定义 函数类型
 interface Accumulator {
     (a: number, b: number): number;
 }
 
 // ✅✅ ES 的实现
 const accumulator: Accumulator = (a: number, b: number) => a + b;

// ✅✅ES6中的 => 是函数的实现
 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;
}

// 接口是用来实现(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;
  }
  // 可推导的, 可省略返回类型
  mod() {
    return this.a / this.b;
  }
  test(): number {
    return this.a + this.b;
  }
}

const calc = new Calculator(12);
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;
}
// 实现方法-使用箭头函数实现
const adder: Add = (a: number, b: number): number => a + b;
adder(100200);
// 实现方法-使用方法定义实现
const reduce: Reduce = function (a: number, b: number): number {
  return a - b;
};

reduce(23);

export {};

🚀🚀🚀 DEMO 【类型别名】 定义一个/多个方法

// 使用类型别名 定义 单个函数类型
type Adder = (a: number, b: number) => number;
const add: Adder = (a, b) => a + b;

// 使用类型别名 定义 多个函数类型
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(12);
console.info(calc.add());
console.info(calc.del());
console.info(calc.multiple());
console.info(calc.mod());

🚀🚀🚀 函数类型 中的 剩余参数

  • ES6 中, JS支持函数参数的剩余参数, 可以把多个参数收集到一个变量中
// ES6 中, JS支持函数参数的剩余参数, 可以把多个参数收集到一个变量中
  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");

🚀🚀🚀 函数中的this => 链式中的this

class Container {
  private val: number;
  constructor(val: number) {
    this.val = val;
  }
  // 函数类型: => 左侧是  函数的参数类型
  // 函数类型: => 右侧是  函数的返回值类型
  // 🎃 cb是一个函数,其参数 x 是 number 类型, 返回类型 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, 可以一直调用
instance
  .map((x) => x + 1)
  .log()
  .map((x) => x * 3)
  .log();

关注公众号添加鬼哥微信

                            拉你进前端学习群一起学习

                     

❤️ 看完三件事

如果你觉得这篇内容对你挺有启发,不妨:

  • 点个【在看】,或者分享转发,让更多的人也能看到这篇内容

  • 点击↓面关注我们,一起学前端

  • 长按↓面二维码,添加鬼哥微信,一起学前端



浏览 78
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报