如何使用接口确保Angular 2中组件输入的正确格式？

Question

我有一个接口（option.ts）：

export interface Option {
  label: string;
  model: any;
}

然后导入到我的组件（form-select.component.ts）：

import {Component, Input, Output, EventEmitter} from 'angular2/core';
import {Option} from './option';

@Component({
  selector: 'form-select',
  templateUrl: './app/assets/scripts/modules/form-controls/form-select/form-select.component.html',
  styleUrls: ['./app/assets/scripts/modules/form-controls/form-select/form-select.component.css'],
  inputs: [
    'options',
    'callback',
    'model',
    'label'
  ]
})

export class FormSelectComponent {
  @Input() model: any;
  @Output() modelChange: EventEmitter = new EventEmitter();

  isOpen: boolean = false;

  toggle() {
    this.isOpen = !this.isOpen;
  }

  close() {
    this.isOpen = false;
  }

  select(option, callback) {
    this.model = option.model;
    this.modelChange.next(this.model);

    callback ? callback() : false;
  }
}

现在我想使用这个接口来确保从另一个组件传递到我的select组件的[options]格式正确，类型正确<代码>[选项]必须是如下所示的数组：

options = [
  {label: 'Hello world', model: 1},
  {label: 'Hello universe', model: 2},
  {label: 'Hello honey boo boo', model: 3}
]

其中每个索引对象将使用Option接口，但如何做到这一点？我记得在组件类中使用了Option[]，但我不确定如何将[选项]与接口一起使用，然后将其传递给视图（或者您应该如何操作）。

我怎样才能做到这一点？

Answer 1

您可以执行@Input（）选项：选项[]。但是它在运行时不会有任何影响，因为javascript中没有运行时检查接口。
检查这个问题和这个问题，还有许多其他问题。

因此，如果您只是这样输入：

<form-select [options]="options"></form-select>

您无法确保输入选项正在实现选项接口，因为该值实际上是在运行时传递的。

但是，如果您像这样为选项赋值：

this.options = someOptions;

然后，IDE将显示一个错误，说明someOptions不是Option[]类型。但这只是在编译/开发时。

那么，用接口键入变量没有意义吗？

实际上我认为这是一个很好的练习。至少，您可以使代码更具可读性。但是，只要确保将正确的界面输入到选项中，就没有必要使用界面。