web-dev-qa-db-ja.com

タイプチェックインAngular 2つのテンプレート

Angular 2とTypeScriptでアプリケーションを構築しています。可能な場合は型を静的にチェックします。テンプレートの型をチェックする方法はありますか？次のフラグメントを検討してください。

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

dataコンポーネントのFooには、何らかのタイプTDataがあると仮定します。ただし、デフォルトでは、dataObjに準拠していないTDataを渡すことを妨げるものはありません。このような場合に型を検証するAngularテンプレート用のTypeScript拡張はありますか？

angulartypescriptangular2-template
43
jfu

残念ながら、現在のAngularバージョンはコンポーネントの入力とイベントのタイプをチェックしません。 [〜＃〜] aot [〜＃〜] コンパイルを使用できます fullTemplateTypeCheck angular=コンパイラオプション。テンプレートの種類のチェックを実行します。

src/tsconfig.app.jsonでfullTemplateTypeCheckオプションを有効にします

{
    "compilerOptions": { ... },
    "angularCompilerOptions": {
        "fullTemplateTypeCheck": true
        ...
    }
}

--aotオプションを使用してプロジェクトをビルド（または提供）します

ng build --aot

入力とイベントタイプのチェックについては、angularバグトラッカー（ issue1 および issue2 ）で2つの問題が見つかりました。この問題の解決方法はレンダラーの実装に依存しており、次のバージョンのangularレンダラー、 Ivy と呼ばれます。 ここにあります ivyレンダラーの入力タイプチェックの機能要求。

9
Valeriy Katkov

IDEまたはlinterがこれをキャッチするかもしれませんが、誰かが本当にこれを必要とする場合、1つのオプションは、実行時に型チェックを行うパイプを作成することです。

@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>

私が見つけた唯一の落とし穴は、コンポーネントのインスタンスとして以外にテンプレートにクラス関数をどのように注入するかわからないということです。

@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があります（ゾーン経由でスローされます）。 https://plnkr.co/edit/WhoKSdoKUFvNbU3zWJy6?p=preview

1
kevinrstone

WebStorm Jetbrainsからはそれができます。

私の元の答え：

ReactがJSXまたはTSXの言語拡張機能で行うように、何らかの考えをせずにそれを行う信頼できる方法はないと思います。

TypeScriptコンパイラはHTMLファイルを認識せず、単に無視します。また、テンプレートとコントローラーコードの間に強い結合はありません...複数のコントローラーで同じテンプレートを再利用することを妨げるものは何もありません。

0
Victor Högemann