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(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;
}
// 实现方法-使用箭头函数实现
const adder: Add = (a: number, b: number): number => a + b;
adder(100, 200);
// 实现方法-使用方法定义实现
const reduce: Reduce = function (a: number, b: number): number {
return a - b;
};
reduce(2, 3);
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(1, 2);
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();
关注公众号添加鬼哥微信
拉你进前端学习群一起学习
❤️ 看完三件事
如果你觉得这篇内容对你挺有启发,不妨:
点个【在看】,或者分享转发,让更多的人也能看到这篇内容
点击↓面关注我们,一起学前端
长按↓面二维码,添加鬼哥微信,一起学前端
评论