angular - 如何使用接口(interface)来确保 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;
  }
}

现在我想使用此接口(interface)来确保从另一个组件传递到我的选择组件的 [options] 格式正确且类型正确。 [options] 必须是一个如下所示的数组:

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

其中每个索引对象都将使用 Option 接口(interface)，但我该如何做到这一点？我记得在组件类中使用 Option[] 的一些内容，但我不确定如何将 [options] 与接口(interface)一起使用，然后将其传递给 View (或者您应该执行的操作)。

我怎样才能实现这个目标？

Answer 1

您可以执行@Input() options:Option[]。但它在运行时不会产生任何影响，因为 javascript 中没有对接口(interface)进行运行时检查。
检查this question和 this one还有很多其他的。

所以，如果您只是这样输入:

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

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

但是，如果您像这样向 options 赋值:

this.options = someOptions;

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

那么，通过接口(interface)输入变量没有意义吗？

我实际上认为这是一个很好的做法。至少，你使你的代码更具可读性。但是，只要确保将正确的接口(interface)输入到 options 中，就没有必要使用接口(interface)。