每一种面向对象的语言都提供了一个OOPS概念,即继承、多态和重载等。
Typescript也提供了同名的重载方法和构造函数。
重载是一个定义了相同名称的不同参数和返回类型的方法。
Typescript是一种不同的方法,与其他许多编程语言不同。Typescript也提供了这个概念,但是有不同的实现方式。
那么在typescript中什么是重载?
通常情况下,按照任何编程语言,我们会写出如下代码
class OverloadDemo {
constructor() {
}
method(num: number) {
console.log('method with number argument');
}
method(message: string) {
console.log('method with string argument');
}
}
let demo = new OverloadDemo();
console.log(demo.method(12));
这样做是不行的,会出现编译错误并抛出 重复的函数实现: 在将这段代码编译成javascript的过程中,两个函数的定义看起来是一样的。所以javascript不理解重载。
为了解决重复函数的问题,请提供一个具有可变参数的单一函数。
重载可以应用于functions 和constructor 在typecript中
Typecript的重载方法
函数重载是提供相同的函数名,但有不同的参数。我们提供的是一个简单的执行函数,其参数可能是不同的
在任何重载函数中,有一些不同的事情需要注意
1.参数数可能不同
2.参数类型是不同的类型
3.返回类型是可变的
重载在typescript中如何工作?
Typescript允许程序员根据变量参数的数量和数据类型来编写一个函数的不同行为。
我们可以用很多方法来实现这些限制
带有任何数据类型的函数重载。
Typecript中的任何数据类型是Typecript中预定义的数据类型。一个用Any 数据类型声明的变量可以分配任何值。它可以是字符串、数字。
同样的上述代码可以用以下方式重写
我们提供了唯一的函数,它有一个类型为any 的参数,我们可以在这里传递字符串或数字。这个方法我们提供了不同参数的重载功能,但参数数是一样的。
class OverloadAnyDemo {
constructor() {
}
method(num: any) {
console.log('method ', typeof num);
}
}
let demo = new OverloadAnyDemo();
console.log(demo.method(12));// returns number
console.log(demo.method({}));// returns object
console.log(demo.method(true));// returns boolean
在typescript中使用联合类型的函数重载
我们将为一个额外的函数提供实现,该函数将数字相加。传递给该函数的数字可能是两个或三个或更多的数字。
Typescript提供了Union Type,它是一个数据类型下的多个类型的联合。
class OverloadAnyDemo {
constructor() {
}
method(message: string | any) {
console.log('method ', typeof message);
}
}
let demo = new OverloadAnyDemo();
console.log(demo.method(12));// returns number
console.log(demo.method({}));// returns object
console.log(demo.method(true));// returns boolean
在typescript中使用可选参数的功能重载
在函数参数中使用可选参数(符号为问号-?
method(message?: string | any) {
console.log('method ', typeof message);
}
这里的字符串参数是optional ,所以这个函数接受零或一个字符串作为参数。这是另一种实现重载的方式。
构造函数重载在typescript中
构造函数是在typescript中用关键字Constructors创建的,它们和函数一样,只有一些区别。
让我们在typescript中定义一个Circle类
class circle {
radius: number;
// constructor signature with declared properties
constructor(radius = 0) {
this.radius = radius;
}
}
让我们添加重载构造函数
class circle {
// Constructor Overloads
constructor(radius: number, color: string);
constructor(color: string);
constructor(radius: any, color?: any) {
}
}
像函数重载一样,我们只能有一个具有不同参数的构造函数。这是有效的重载,因为它对新操作符有效。
函数重载和构造函数重载之间的区别
- 构造函数不允许有类型参数
- 构造函数中不允许类型注释,它总是返回类的实例。
- 在typescript中只允许一个构造函数的实现。
我们可以使用可选参数、Any 数据类型或联合类型来实现构造函数的重载。
使用箭头函数的类型脚本重载
让我们来看看一个圆的构造函数重载
class circle {
// Constructor Overloads
constructor(radius: number);
constructor(color: string);
}
在这个例子中,我们为上述内容创建了一个类型别名,你可以将上述带有箭头函数的构造函数重载改写为带有类型关键字的重载。
type Circle = {
(name: number): void,
(name: string): void,
}
const circle: Circle = (name: number | string): void => {
而调用者的代码如下
circle(5);
circle("red");
Typecript中的接口重载
让我们声明一个接口,它有两个重载方法,名称相同,参数不同。
interface Shape{
area(length:number,breadth:number): number;
area(side:number):number;
}
假设你正在声明Rectangle 和Square 类
所以Rectangle 和Square 应该实现Shape,所以我们需要实现接口的所有方法,如下图所示
class Rectangle implements Shape{
area(length:number,breadth:number): number{
// todo
}
area(side:number):number{
// todo
}
}
class Square implements Shape{
area(length:number,breadth:number): number{
// todo
}
area(side:number):number{
// todo
}
}
由于这些份额不需要计算面积实现两次。所以,像上面那样写一个interface overloading ,并不是最好的做法。
我们将重写上述接口的重载方法
interface Shape {
area:
((length:number,breadth:number) => number) |
((side:number) => number);
}
以及Rectangle 和Square 的实现,如下所示
class Rectangle {
area(length:number,breadth:number):number{
//todo
}
}
class HTMLElemeSquaretString {
area(side:number):number{
// todo
}
}
总结
你学会了用任意、可选和联合类型的 typescript 重载来实现
- 函数重载
- 构造器重载
- 用于重载的箭头函数
- typecript接口的重载方法