web-dev-qa-db-ja.com

TypeScriptでのパラメータプロパティの省略形とDestructuringの組み合わせ

編集

ログに記録しました TypeScriptのGithubリポジトリの問題 そして彼らはそれを実装するためのPRを受け入れています。

TypeScriptでは、コンストラクター定義からクラスにプロパティを自動的に作成する場合、パラメータープロパティの省略形を利用できます。例：

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

    }
}

そして、トランスパイルされたJavascriptは次のようになります。

var Person = (function () {
    function Person(firstName, lastName, age) {
        this.firstName = firstName;
        this.lastName = lastName;
        this.age = age;
    }
    return Person;
})();

ただし、コンストラクターでオブジェクトを受け取りたい場合は、次のようになります。

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;
    }
}

TypeScript 1.5以降、次のように非構造化を利用できます。

class Person {
    constructor({firstName, lastName, age} : {firstName: string, lastName: string, age: number}) {
        this.firstName = firstName;
        this.lastName = lastName;
        this.age = age;
    }
}

質問：TypeScriptでパラメータプロパティの省略形とデストラクチャリングを組み合わせる方法は？

オブジェクト定義の前にpublicを定義しようとしました。例：

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

    }
}

各変数の前にそれを定義しようとしました、例：

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

    }
}

しかし、私は成功しませんでした。何かご意見は？

typescriptdestructuring
22
Buzinas

現在、これを短縮する方法はありません。そのため、最も近い方法は、プロパティをロングハンドで宣言し、破壊代入から変数を割り当てることです。

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;
    }
}

あなたがそれをしているなら...あなたはおそらくコンストラクターでデストラクチャリングをまったく使用せずにIPersonを受け入れてそのメンバーを割り当てることに決めるでしょう。

3
Fenton

Object.assignにアクセスできる場合、これは機能します。

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

class Person extends PersonData{}

ただし、新しいインスタンスには、引数にanythingが入力されることに注意してください。使用するキーだけを削除することはできません。

3
elm

別の戦略は、別の名前の変数に割り当てる機能を使用することです。これにより、コンストラクターでの1回の繰り返しが削減されます。

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

    constructor(args: { firstName: string, lastName: string, age: number, }) {
        ({
            firstName: this.firstName,
            lastName: this.lastName,
            age: this.age,
        } = args);
    }
}

コンストラクターの定義の1つをインターフェースに移動することもできます。

interface PersonConstructorArgs {
    firstName: string;
    lastName: string;
    age: number;
}
class Person {
    firstName: string;
    lastName: string;
    age: number;

    constructor(args: PersonConstructorArgs) {
        ({
            firstName: this.firstName,
            lastName: this.lastName,
            age: this.age,
        } = args);
    }
}

これは、階層がある場合に役立ちます。

interface PersonConstructorArgs {
    firstName: string;
    lastName: string;
    age: number;
}
class Person {
    firstName: string;
    lastName: string;
    age: number;

    constructor(args: PersonConstructorArgs) {
        ({
            firstName: this.firstName,
            lastName: this.lastName,
            age: this.age,
        } = args);
    }
}
interface EmployeeConstructorArgs extends PersonConstructorArgs {
    manager: Person;
}
class Employee extends Person {
    manager: Person;

    constructor(args: EmployeeConstructorArgs) {
        super(args);
        ({
            manager: this.manager,
        } = args);
    }
}
1
Schmalls