将参数属性简写与TypeScript中的Destructuring结合使用

Buz*_*nas 21 destructuring typescript

编辑

在TypeScript的Github repo上记录了一个问题,他们正在接受PR来实现它.


在TypeScript中,当我们想要从构造函数定义中自动在类中创建属性时,我们可以利用参数属性的简写,例如:

class Person {
    constructor(public firstName : string, public lastName : number, public age : number) {

    }
}
Run Code Online (Sandbox Code Playgroud)

然后,转换后的Javascript将是:

var Person = (function () {
    function Person(firstName, lastName, age) {
        this.firstName = firstName;
        this.lastName = lastName;
        this.age = age;
    }
    return Person;
})();
Run Code Online (Sandbox Code Playgroud)

但是如果我们想在构造函数中接收一个对象,它将是这样的:

interface IPerson {
    firstName : string,
    lastName : string,
    age: number
}

class Person {
    constructor(person : IPerson) {
        this.firstName = person.firstName;
        this.lastName = person.lastName;
        this.age = person.age;
    }
}
Run Code Online (Sandbox Code Playgroud)

从TypeScript 1.5开始,我们可以利用解构,例如:

class Person {
    constructor({firstName, lastName, age} : {firstName: string, lastName: string, age: number}) {
        this.firstName = firstName;
        this.lastName = lastName;
        this.age = age;
    }
}
Run Code Online (Sandbox Code Playgroud)

问题:如何在TypeScript中组合参数属性简写和解构?

我试图public在对象定义之前定义,例如:

class Person {
    constructor(public {firstName, lastName, age} : {firstName: string, lastName: string, age: number}) {

    }
}
Run Code Online (Sandbox Code Playgroud)

试图在每个变量之前定义它,例如:

class Person {
    constructor({public firstName, public lastName, public age} : {firstName: string, lastName: string, age: number}) {

    }
}
Run Code Online (Sandbox Code Playgroud)

但我没有成功.有什么想法吗?

elm*_*elm 6

如果您有权访问Object.assign,则此方法有效:

class PersonData {
  firstName: string
  constructor(args : PersonData) {
    Object.assign(this, args)
  }
}

class Person extends PersonData{}
Run Code Online (Sandbox Code Playgroud)

但请注意,新实例将由args 中的任何内容填充——您不能只删除您想要使用的键。


Fen*_*ton 3

目前还没有一种方法可以简写,因此您可以得到的最接近的方法是直接声明属性并从解构赋值中分配变量:

class Person {
    firstName: string;
    lastName: string;
    age: number;

    constructor({firstName, lastName, age} : {firstName: string, lastName: string, age: number}) {
        this.firstName = firstName;
        this.lastName = lastName;
        this.age = age;
    }
}
Run Code Online (Sandbox Code Playgroud)

如果您这样做...您可能会决定接受 anIPerson并分配其成员,而不在构造函数中使用解构。