typescript – 在Angular 2模板中进行类型检查

发布时间：2020-12-17 08:08:43 所属栏目：安全来源：网络整理

导读：我们正在Angular 2和TypeScript中构建一个应用程序。我们尝试静态检查可能的类型。有没有办法检查模板中的类型？考虑以下片段： foo [data]="dataObj"/foo 假设Foo组件中的数据有一些类型的TData。然而，默认情况下，没有任何东西阻止我传递不符合TData的dat

我们正在Angular 2和TypeScript中构建一个应用程序。我们尝试静态检查可能的类型。有没有办法检查模板中的类型？考虑以下片段：

<foo [data]="dataObj"></foo>

假设Foo组件中的数据有一些类型的TData。然而，默认情况下，没有任何东西阻止我传递不符合TData的dataObj。有没有一个角色模板的脚本扩展，将验证这种情况下的类型？

我认为一个IDE或者linter可能会为你抓住这个，但是如果有人真的需要这个，一个选择就是在运行时创建一个Pipe来进行类型检查。

@Pipe({ name: 'typeCheck' })
export class TypeCheckPipe implements PipeTransform {

  transform(value: any,classType: object): any[] {
    if (value &&
      !(value instanceof classType)
    ) {
        throw new TypeError("Input is not instanceof " + classType + 
                            " but was " + typeof(value));
    }
    return value;
  }
}

您可以在这样的组件模板中使用它：

<custom-component [coolInput]="coolInput | typeCheck:coolInputClass"></custom-component>

我发现唯一的catch是我不知道如何将类函数注入到模板中，而不是作为组件的一个实例。

@Component({
  selector: 'my-app',template: `
  <div>
    <custom-component [coolInput]="coolInput | typeCheck:coolInputClass"></custom-component>
  </div>
  `,})
export class App {
  coolInput: CoolInput;
  coolInputClass: object = CoolInput;

  constructor() {
    this.coolInput = "This is the wrong type";
  }
}

这是一个Plunker，说明工作错误消息(通过Zone抛出)。
https://plnkr.co/edit/WhoKSdoKUFvNbU3zWJy6?p=preview

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!