TypeScript中的构造函数重载

Question

有没有人在TypeScript中完成构造函数重载。在语言规范的第64页（v 0.8）中，有一些语句描述构造函数重载，但没有给出任何示例代码。

我现在正在尝试一个非常基本的课堂宣言;它看起来像这样，

interface IBox {    
    x : number;
    y : number;
    height : number;
    width : number;
}

class Box {
    public x: number;
    public y: number;
    public height: number;
    public width: number;

    constructor(obj: IBox) {    
        this.x = obj.x;
        this.y = obj.y;
        this.height = obj.height;
        this.width = obj.width;
    }   

    constructor() {
        this.x = 0;
        this.y = 0;
        this.width = 0;
        this.height = 0;
    }
}

当使用tsc BoxSample.ts运行时，它会抛出一个重复的构造函数定义 - 这很明显。任何帮助表示赞赏。

Answer 1

TypeScript允许您声明重载，但是您只能有一个实现，并且该实现必须具有与所有重载兼容的签名。在您的示例中，可以使用

中的可选参数轻松完成此操作

interface IBox {    
    x : number;
    y : number;
    height : number;
    width : number;
}

class Box {
    public x: number;
    public y: number;
    public height: number;
    public width: number;

    constructor(obj?: IBox) {    
        this.x = obj && obj.x || 0
        this.y = obj && obj.y || 0
        this.height = obj && obj.height || 0
        this.width = obj && obj.width || 0;
    }   
}

或两个带有更通用构造函数的重载，如

interface IBox {    
    x : number;
    y : number;
    height : number;
    width : number;
}

class Box {
    public x: number;
    public y: number;
    public height: number;
    public width: number;

    constructor();
    constructor(obj: IBox); 
    constructor(obj?: any) {    
        this.x = obj && obj.x || 0
        this.y = obj && obj.y || 0
        this.height = obj && obj.height || 0
        this.width = obj && obj.width || 0;
    }   
}

Answer 2

关于构造函数重载，一个好的替代方法是将静态工厂方法实现其他重载。我认为它比在构造函数中检查所有可能的参数组合更具可读性和简单性。这是一个简单的例子：

class Person {
    static fromData(data: PersonData) {
        let { first, last, birthday, gender = 'M' } = data 
        return new this(
            `${last}, ${first}`,
            calculateAge(birthday),
            gender
        )
    }

    constructor(
        public fullName: string,
        public age: number,
        public gender: 'M' | 'F'
    ) {}
}

interface PersonData {
    first: string
    last: string
    birthday: string
    gender?: 'M' | 'F'
}


let personA = new Person('Doe, John', 31, 'M')
let personB = Person.fromData({
    first: 'John',
    last: 'Doe',
    birthday: '10-09-1986'
})

TypeScript 中的方法重载不是真正的，让我们说，因为它需要太多的编译器生成的代码，核心团队试图不惜一切代价避免这种情况。目前，在语言中出现方法重载的主要原因是提供一种在API中使用魔术参数编写库的声明的方法。既然你需要自己做所有繁重的工作来处理不同的论点，那么我在使用重载而不是分离方法时会看到很多优势。

Answer 3

请注意，您还可以通过TypeScript中的默认参数解决实现级别的重载问题，例如：

interface IBox {    
    x : number;
    y : number;
    height : number;
    width : number;
}

class Box {
    public x: number;
    public y: number;
    public height: number;
    public width: number;

    constructor(obj : IBox = {x:0,y:0, height:0, width:0}) {    
        this.x = obj.x;
        this.y = obj.y;
        this.height = obj.height;
        this.width = obj.width;
    }   
}

编辑： 自2016年12月5日起，请参阅Benson's answer以获得更精确的解决方案，从而提供更大的灵活性。

Answer 4

注意：这是为了反映TypeScript 2.1而在4/13/2017进行了简化和更新，请参阅TypeScript 1.8答案的历史记录。

听起来您希望object参数是可选的，并且对象中的每个属性都是可选的。在示例中，如所提供的，不需要重载语法。我想在这里的一些答案中指出一些不好的做法。当然，它并不是本质上写box = { x: 0, y: 87, width: 4, height: 0 }的最小可能表达式，但是这提供了所有可能想要从类中描述的细节的代码。此示例允许您使用one，some，all，或这些参数调用函数，但仍然可以获得默认值。

 /** @class */
 class Box {
     public x?: number;
     public y?: number;
     public height?: number;
     public width?: number;     

     // The Box class can work double-duty as the interface here since they are identical
     // If you choose to add methods or modify this class, you will need to
     // define and reference a new interface for the incoming parameters object 
     // e.g.:  `constructor(params: BoxObjI = {} as BoxObjI)` 
     constructor(params: Box = {} as Box) {

         // Define the properties of the incoming `params` object here. 
         // Setting a default value with the `= 0` syntax is optional for each parameter
         let {
             x = 0,
             y = 0,
             height = 1,
             width = 1
         } = params;

         //  If needed, make the parameters publicly accessible
         //  on the class ex.: 'this.var = var'.
         /**  Use jsdoc comments here for inline ide auto-documentation */
         this.x = x;
         this.y = y;
         this.height = height;
         this.width = width;
     }
 }

这是一种非常安全的方法来编写可能没有定义对象的所有属性的参数。您现在可以安全地编写以下任何内容：

const box1 = new Box();
const box2 = new Box({});
const box3 = new Box({x:0});
const box4 = new Box({x:0, height:10});
const box5 = new Box({x:0, y:87,width:4,height:0});

 // Correctly reports error in TypeScript, and in js, box6.z is undefined
const box6 = new Box({z:0});  

编译后，您会看到可选参数确实是可选的，通过检查var = isOptional || default;，这是void 0的简写，避免了undefined广泛使用（但容易出错）的回退语法的缺陷。 {1}}：

编译输出

var Box = (function () {
    function Box(params) {
        if (params === void 0) { params = {}; }
        var _a = params.x, x = _a === void 0 ? 0 : _a, _b = params.y, y = _b === void 0 ? 0 : _b, _c = params.height, height = _c === void 0 ? 1 : _c, _d = params.width, width = _d === void 0 ? 1 : _d;
        this.x = x;
        this.y = y;
        this.height = height;
        this.width = width;
    }
    return Box;
}());

附录：设置默认值：错误的方式

||（或）运算符

在设置默认回退值时，请考虑|| /或运算符的危险，如其他一些答案中所示。下面的代码说明了设置默认值的错误方法。在针对 falsey 值进行评估时，您可以获得意外结果，例如0，＆＃39;＆＃39;，null，undefined，false，NaN：

var myDesiredValue = 0;
var result = myDesiredValue || 2;

// This test will correctly report a problem with this setup.
console.assert(myDesiredValue === result && result === 0, 'Result should equal myDesiredValue. ' + myDesiredValue + ' does not equal ' + result);

Object.assign（此，则params）

在我的测试中，使用es6 / typescript destructured object can be almost 90% faster than Object.assign。使用destructured参数只允许您分配给对象的方法和属性。例如，请考虑以下方法：

class BoxTest {
    public x?: number = 1;

    constructor(params: BoxTest = {} as BoxTest) {
        Object.assign(this, params);
    }
}

如果其他用户没有使用TypeScript并尝试放置一个不属于的参数，那么他们可能会尝试添加z属性

var box = new BoxTest({x: 0, y: 87, width: 4, height: 0, z: 7});

// This test will correctly report an error with this setup. `z` was defined even though `z` is not an allowed property of params.
console.assert(typeof box.z === 'undefined')

Answer 5

我知道这是一个老问题，但1.4中的新内容是联合类型;将这些用于所有函数重载（包括构造函数）。例如：

class foo {
    private _name: any;
    constructor(name: string | number) {
        this._name = name;
    }
}
var f1 = new foo("bar");
var f2 = new foo(1);

Answer 6

更新（2017年6月8日）： guyarad和snolflake在下面的评论中将有效积分作为我的回答。我建议读者通过Benson，Joe和snolflake查看答案，他们的答案比我的答案要好。

原始答案（2014年1月27日）

如何实现构造函数重载的另一个例子：

class DateHour {

  private date: Date;
  private relativeHour: number;

  constructor(year: number, month: number, day: number, relativeHour: number);
  constructor(date: Date, relativeHour: number);
  constructor(dateOrYear: any, monthOrRelativeHour: number, day?: number, relativeHour?: number) {
    if (typeof dateOrYear === "number") {
      this.date = new Date(dateOrYear, monthOrRelativeHour, day);
      this.relativeHour = relativeHour;
    } else {
      var date = <Date> dateOrYear;
      this.date = new Date(date.getFullYear(), date.getMonth(), date.getDate());
      this.relativeHour = monthOrRelativeHour;
    }
  }
}

来源：http://mimosite.com/blog/post/2013/04/08/Overloading-in-TypeScript

Answer 7

您的Box类正试图定义多个构造函数实现。

只有最后一个构造函数重载签名用作类构造函数实现。

在下面的示例中，请注意，定义了构造函数实现，使得它不与前面的重载签名中的任何一个冲突。 >

interface IBox = {
    x: number;
    y: number;
    width: number;
    height: number;
}

class Box {
    public x: number;
    public y: number;
    public width: number;
    public height: number;

    constructor() /* Overload Signature */
    constructor(obj: IBox) /* Overload Signature */
    constructor(obj?: IBox) /* Implementation Constructor */ {
        if (obj) {
            this.x = obj.x;
            this.y = obj.y;
            this.width = obj.width;
            this.height = obj.height;
        } else {
            this.x = 0;
            this.y = 0;
            this.width = 0;
            this.height = 0
        }
    }

    get frame(): string {
        console.log(this.x, this.y, this.width, this.height);
    }
}

new Box().frame; // 0 0 0 0
new Box({ x:10, y:10, width: 70, height: 120 }).frame; // 10 10 70 120



// You could also write the Box class like so;
class Box {
    public x: number = 0;
    public y: number = 0;
    public width: number = 0;
    public height: number = 0;

    constructor() /* Overload Signature */
    constructor(obj: IBox) /* Overload Signature */
    constructor(obj?: IBox) /* Implementation Constructor */ {
        if (obj) {
            this.x = obj.x;
            this.y = obj.y;
            this.width = obj.width;
            this.height = obj.height;
        }
    }

    get frame(): string { ... }
}

Answer 8

如果可选的类型化参数足够好，请考虑以下代码来完成相同的操作而不重复属性或定义接口：

export class Track {
   public title: string;
   public artist: string;
   public lyrics: string;

   constructor(track?: Track) {
     Object.assign(this, track);
   }
}

请注意，如果track未定义所有属性，则会分配Track中传递的所有属性。

Answer 9

您可以通过以下方式处理此问题：

import { assign } from 'lodash'; // if you don't have lodash use Object.assign
class Box {
    x: number;
    y: number;
    height: number;
    width: number;
    constructor(obj: Partial<Box> = {}) {    
         assign(this, obj);
    }
}

Partial将使您的字段（x，y，高度，宽度）成为可选字段，从而允许多个构造函数

例如：您可以在没有高度和宽度的情况下进行new Box({x,y})。

= {}将处理虚假值，例如undefined，null等，然后您可以执行new Box()

Answer 10

另一个版本喜欢@ ShinNoNoir的代码，使用默认值和扩展语法：

class Box {
    public x: number;
    public y: number;
    public height: number;
    public width: number;

    constructor({x, y, height, width}: IBox = { x: 0, y: 0, height: 0, width: 0 }) {
        this.x = x;
        this.y = y;
        this.height = height;
        this.width = width;
    }
}

Answer 11

这是一个可行的示例，您必须考虑到，每个具有更多字段的构造函数都应将额外的字段标记为optional。

class LocalError {
  message?: string;
  status?: string;
  details?: Map<string, string>;

  constructor(message: string);
  constructor(message?: string, status?: string);
  constructor(message?: string, status?: string, details?: Map<string, string>) {
    this.message = message;
    this.status = status;
    this.details = details;
  }
}

Answer 12

一般来说，对于 N 个重载，最好使用：

constructor(obj?: {fromType1: IType1} | {fromType2: IType2}) {    
    if(obj){
      if(obj.fromType1){
        //must be of form IType1
      } else if(obj.fromType2){
        //must have used a IType2
      } else {
        throw "Invalid argument 1"
      }
    } else {
      //obj not given
    }
}   

至少现在我们可以检查走哪条路线并采取相应的行动

Answer 13

正如@Benson答案中所评论的那样，我在代码中使用了此示例，并且发现它非常有用。但是，当我尝试使用类变量类型进行计算时，发现了Object is possibly 'undefined'.ts(2532)错误，因为问号导致它们的类型为AssignedType | undefined。即使未定义的大小写在以后的执行中处理或使用编译器类型强制<AssignedType>处理，我也无法摆脱错误，因此无法使args成为可选。我解决了为带问号的参数创建单独类型的问题参数和没有问号的类变量。详细，但有效。

这是原始代码，给出class method（）中的错误，请参见下文：

/** @class */

class Box {
  public x?: number;
  public y?: number;
  public height?: number;
  public width?: number;

  // The Box class can work double-duty as the interface here since they are identical
  // If you choose to add methods or modify this class, you will need to
  // define and reference a new interface for the incoming parameters object 
  // e.g.:  `constructor(params: BoxObjI = {} as BoxObjI)` 
  constructor(params: Box = {} as Box) {
    // Define the properties of the incoming `params` object here. 
    // Setting a default value with the `= 0` syntax is optional for each parameter
    const {
      x = 0,
      y = 0,
      height = 1,
      width = 1,
    } = params;

    //  If needed, make the parameters publicly accessible
    //  on the class ex.: 'this.var = var'.
    /**  Use jsdoc comments here for inline ide auto-documentation */
    this.x = x;
    this.y = y;
    this.height = height;
    this.width = width;
  }

  method(): void {
    const total = this.x + 1; // ERROR. Object is possibly 'undefined'.ts(2532)
  }
}

const box1 = new Box();
const box2 = new Box({});
const box3 = new Box({ x: 0 });
const box4 = new Box({ x: 0, height: 10 });
const box5 = new Box({ x: 0, y: 87, width: 4, height: 0 });

因此变量不能在类方法中使用。 如果这样纠正，例如：

method(): void {
    const total = <number> this.x + 1;
}

现在出现此错误：

Argument of type '{ x: number; y: number; width: number; height: number; }' is not 
assignable to parameter of type 'Box'.
Property 'method' is missing in type '{ x: number; y: number; width: number; height: 
number; }' but required in type 'Box'.ts(2345)

好像整个参数束不再是可选的。

因此，如果创建了带有可选args的类型，并且从可选对象中删除了类变量，我将实现我想要的参数，这些参数是可选的，并能够在类方法中使用它们。在解决方案代码下方：

type BoxParams = {
  x?: number;
  y?: number;
  height?: number;
  width?: number;
}

/** @class */
class Box {
  public x: number;
  public y: number;
  public height: number;
  public width: number;

  // The Box class can work double-duty as the interface here since they are identical
  // If you choose to add methods or modify this class, you will need to
  // define and reference a new interface for the incoming parameters object 
  // e.g.:  `constructor(params: BoxObjI = {} as BoxObjI)` 
  constructor(params: BoxParams = {} as BoxParams) {
    // Define the properties of the incoming `params` object here. 
    // Setting a default value with the `= 0` syntax is optional for each parameter
    const {
      x = 0,
      y = 0,
      height = 1,
      width = 1,
    } = params;

    //  If needed, make the parameters publicly accessible
    //  on the class ex.: 'this.var = var'.
    /**  Use jsdoc comments here for inline ide auto-documentation */
    this.x = x;
    this.y = y;
    this.height = height;
    this.width = width;
  }

  method(): void {
    const total = this.x + 1;
  }
}

const box1 = new Box();
const box2 = new Box({});
const box3 = new Box({ x: 0 });
const box4 = new Box({ x: 0, height: 10 });
const box5 = new Box({ x: 0, y: 87, width: 4, height: 0 });

任何花时间阅读并尝试理解我要​​提出的观点的人都表示赞赏。

谢谢。

Answer 14

我使用以下替代方法来获取默认/可选参数和具有可变数量参数的“超载”构造函数：

private x?: number;
private y?: number;

constructor({x = 10, y}: {x?: number, y?: number}) {
 this.x = x;
 this.y = y;
}

我知道这不是有史以来最漂亮的代码，但是人们已经习惯了。不需要其他接口，它允许私有成员，这在使用接口时是不可能的。

Answer 15

实际上，这个答案可能为时已晚，但是您现在可以执行以下操作：

class Box {
    public x: number;
    public y: number;
    public height: number;
    public width: number;

    constructor();
    constructor(obj: IBox);
    constructor(obj?: IBox) {    
        this.x = !obj ? 0 : obj.x;
        this.y = !obj ? 0 : obj.y;
        this.height = !obj ? 0 : obj.height;
        this.width = !obj ? 0 : obj.width;
    }
}

因此可以代替上面的静态方法。希望对您有帮助！

Answer 16

我们可以使用guards

模拟构造函数重载

interface IUser {
  name: string;
  lastName: string;
}

interface IUserRaw {
  UserName: string;
  UserLastName: string;
}

function isUserRaw(user): user is IUserRaw {
  return !!(user.UserName && user.UserLastName);
}

class User {
  name: string;
  lastName: string;

  constructor(data: IUser | IUserRaw) {
    if (isUserRaw(data)) {
      this.name = data.UserName;
      this.lastName = data.UserLastName;
    } else {
      this.name = data.name;
      this.lastName = data.lastName;
    }
  }
}

const user  = new User({ name: "Jhon", lastName: "Doe" })
const user2 = new User({ UserName: "Jhon", UserLastName: "Doe" })

Answer 17

你应该记住......

contructor()

constructor(a:any, b:any, c:any)

与new()或new("a","b","c")

相同

因此

constructor(a?:any, b?:any, c?:any)

与上述相同，更灵活......

new()或new("a")或new("a","b")或new("a","b","c")