class 构造中的打字稿解构对象文字，默认属性不起作用

Question

我正在尝试使用默认值解构对象文字，但我没有得到默认值，只是 'undefined'。什么是正确的方法？

import { Component } from '@angular/core';
export class Hero {
  id: number;
  name: string;
 // constructor( {id = 3, name = 'defaulthero'} = {}) {
  constructor( {id  , name }: {id?: number, name?: string } = { id:3, name: 'defaulthero'} ) {
    console.log( id, name);
    this.id = id;
    this.name = name;
  }
}

@Component({
  selector: 'my-app',
  template: `<h1>{{title}}</h1><h2>Hero {{hero3.id}} {{hero3.name}}</h2>`,
})
export class AppComponent    {
  title = 'Tour of Heros';
  public hero3: Hero;


  ngOnInit() {

    //this.hero3  = new Hero (  ) ;  // work
    //this.hero3  = new Hero (  {} ) ; // does not work
    this.hero3  = new Hero ( {id: 0} ) ;  // does not work, default value 'defaulthero' not assign, just i get 'undefined'
  }
}

Answer 1

当您不为 object fields 分配默认值时，typescript 会将其视为普通参数（对象类型），如下所示：

constructor(obj: any = {id:3, name: 'defaulthero'})

当new Hero()创建hero的新实例时，constructor将没有参数，所以默认的{id:3, name: 'defaulthero'}将是使用过。
当new Hero({})创建一个新的hero实例时，会有一个参数是一个没有字段的对象，它会被用作收入参数和代替默认的{id:3, name: 'defaulthero'}.(等同于new Hero ( {id: 0} ))

由于您的代码块中有一行注释，您可以通过以下更改为对象参数的字段分配默认值：

constructor({id=3, name='defaulthero'}: {id?: number, name?: string } = {}) {
  this.id = id;
  this.name = name;
}

Plunker demo

Answer 2

它按预期工作，您正在为对象设置默认值，然后它被破坏。如果您用自己的对象替换该对象，则只有它的值会填充您的参数。但是，这里有一种方法可以归档您想要的行为，而不是为对象设置默认值：

  constructor({id, name }: {id?: number, name?: string } = {id:3, name: 'defaulthero'}) {
    console.log( id, name);
    this.id = id;
    this.name = name;
  }

对每个参数执行此操作：

  constructor({id = 3, name = 'defaulthero'}: {id?: number, name?: string }  = {}) {
    console.log( id, name);
    this.id = id;
    this.name = name;
  }

Answer 3

我发现了两个替代解决方案，灵感来自：

1) 解决方案 class 英雄： https://github.com/Microsoft/TypeScript/wiki/What%27s-new-in-TypeScript#improved-checking-for-destructuring-object-literal

2) 解决方案class Hero2: 部分"Optional Properties" https://www.typescriptlang.org/docs/handbook/interfaces.html

import { Component, OnInit  } from '@angular/core';

interface HeroInterface { 
  // you need add ? for each variable (Optional Properties)
  id?: number;
  name?: string;

}

// Class using solution 1
class Hero {
  id: number;
  name: string;
  //without interface: constructor({id= 3, name= 'defaulthero'}: {id?: number, name?: string } = {}) {
  constructor({id= 4, name= 'Spiderman'}: HeroInterface = {}) {
    this.id = id;
    this.name = name;
  }

}

// Class solution 2 ,using short way of assign property on constructor()
class Hero2 {
  constructor(public config: HeroInterface = {}) { // short way to assign config like this.config = config; 

    if (!config.id) this.config.id =10;
    if (!config.name) this.config.name = 'SuperMan';
  }

}


@Component ( {
  selector: 'my-app',
  template: `hero1: id: {{hero.id}} name: {{hero.name}} 
            <br/>hero2: id: {{hero2.config.id}} name: {{hero2.config.name}}
    `
})
export class AppComponent implements OnInit {
  hero: Hero ;
  hero2: Hero2 ;
  ngOnInit () {

    // SOLUTION 1:  
    // this.hero = new Hero ();
    this.hero = new Hero ( { id:9 });

    // SOLUTION 2:
    this.hero2 = new Hero2 ( ); // Works with default values
    //this.hero2 = new Hero2 ( { id: 20} ); // Works with default name value
    //this.hero2 =  new Hero2 ( { id: 20, name: 'Asterix'}); // send all values, don't need use default values
    //this.hero2 = new Hero2 ( { id:19 , name: 'Asterix', weight:90}); // Error, 'weight' does not exist in type 'HeroInterface'
  }
}

class 构造中的打字稿解构对象文字，默认属性不起作用

typescript destructuring object literal in construct of the class, default properties does not work

typescript

typescript2.0

angular