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

【问题标题】：How to use an interface to ensure proper format of component input in Angular 2?如何使用接口来确保 Angular 2 中组件输入的正确格式？
【发布时间】：2016-07-15 02:48:59
【问题描述】：

我有一个界面（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;
  }
}

现在我想使用这个接口来确保从另一个组件传递给我的选择组件的[options] 格式正确并具有正确的类型。 [options] 必须是一个如下所示的数组：

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

每个索引对象在哪里都会使用Option 接口，但是我该怎么做呢？我记得在您的组件类中使用Option[] 的内容，但我不确定如何将[options] 与接口一起使用，然后将其传递给视图（或者您应该这样做）。

我怎样才能做到这一点？

【问题讨论】：

你可以做@Input() options:Option[]。但它不会在运行时产生任何影响，因为 javascript 上的接口没有运行时检查。而且因为您将其用作input，所以您只会在运行时将值分配给options。如果您手动将值分配给options，您将从Option[] 中受益。
尝试将您的选择/选项值转换为界面，然后使用任何虚拟方法将其传递到视图中。
@Abdulrahman 所以你的意思是这样做真的没有意义吗？

标签： angular

【解决方案1】：

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

所以，如果你只是这样输入：

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

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

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

this.options = someOptions;

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

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

我实际上认为这是一个很好的做法。至少，您使您的代码更具可读性。但是，只要确保在options中输入正确的接口，使用接口是没有意义的。

【讨论】：