typescriptを使用してanglejs 1.5（6）のバインディング値のタイプを指定することは可能ですか？

Question

バインディングアイテムのタイプを指定したいと思います。私は関数のようにコンポーネントを使うことができます。

などです。 （それ以外の場合はエラー入力を文句を言うだろう）私は渡すために期待され、我々はコンポーネント

angular.module('app').component('navBar', new NavBar()); 

class NavBar{ 
    public bindings:{}; 
    constructor(){ 
     this.bindings={ 
      navInfo:'<' 
     } 
    } 
} 

を持っていると予想されるデータは

export interface INavInfo { 
    text: string; 
    icon: string; 
    OnClick: Function; 
} 

ある

{ 
    text: 'Maintenance', 
    icon: 'assessment', 
    OnClick:() => {....} 
} 

は道我々はそこですタイプパスを拘束する可能性がありますnavInfoはINavInfoのタイプですか？

Answer 1

あなたのコードで「どこで」TypeScriptのコンパイルが壊れているのかがはっきりとわかりません。私はこれがあなたと多く関係があると思いますはのnavInfo情報を渡します。

angular.module('heroApp', []).controller('MainCtrl', function MainCtrl() { 
    this.hero = { 
    name: 'Spawn' 
    }; 
}); 

：

はのは コンポーネント https://docs.angularjs.org/guide/component

その例における構成要素にデータでパスがindex.jsファイル内にある、私はあなたを参照してください方法については、角マニュアルに英雄例を取得してみましょう

TypeScriptこの例では、使用する唯一の方法は、y OUは、あなたのTSコントローラタイプINavInfoようthis.hero変数をマーキングされたコンポーネントに正しくすべての詳細を渡している。

private hero: INavInfo; 

誰か忘れ場合は別のコントローラに、この特定のタイプを使用し、同じコンポーネントを使用するために、あなたの活字体のコンパイルまったく壊れません。

プロパティ名を変更したり、それを削除する必要がある場合一方、誰もが素晴らしい仕事をして、明示的にこのコンポーネントを使用して、どこでもINavInfoを宣言だと仮定し...このタイプを使用してすべての場所にはを中断します。

Answer 2

質問が正しい場合は型チェックを
INavInfoに対してであることを navInfoは、コンポーネントのバインディング宣言のメンバーであり、 あなたはやりたい...ビュー
で

<nav-bar navInfo="vm.navInfo"></nav-bar> 

と「vm.navInfo」。

次に答えはいいえです。

あなたがHTMLビュー、 以内にあなたのコンポーネントをインスタンス化し、私の知る限りでは、現在、 はそのシナリオ、HTMLマークアップでチェックtypescriptですを検証する を支援する特別な工具がありませんので。 バインディングにangle型を指定するのではなく、バインドする 'key'とそのバインディング動作を宣言するだけです。 あなたは非常に角度1.xのフレンドリー

あるWebstorm、1つのファイル 内のすべてのコードを保持 インラインHTMLを使用してコンポーネントを宣言しても、言語機能はなく、角度大会

によってサポートされていないため、あなたはランタイムチェックを追加することができます（私はその良いアイデアを思いつきません。）

import * as angular from "angular"; 

export interface INavInfo { 
    text: string; 
    icon: string; 
    OnClick: Function; 
} 

function isNavInfo(x: any): x is INavInfo { 
    return x && typeof x.text === "string" 
     && typeof x.icon === "string" 
     && typeof x.OnClick === "function"; 
} 

class NavBar implements angular.IController { 

    navInfo?: INavInfo; 

    $onInit =() => { 

    }; 

    $onChanges? = (onChangesObj: angular.IOnChangesObject) => { 
     if (this.navInfo && !isNavInfo(this.navInfo)) { 
      throw "Nav Info is Not NavInfo"; 
     } 
    }; 

    clicked =()=> { 
     if(this.navInfo && this.navInfo.OnClick){ 
      this.navInfo.OnClick(); 
     } 
    } 
} 

class OtherController { 
    navInfo: INavInfo ; 
    constructor(){ 
     this.navInfo = { 
      text: "Hello", 
      icon: "home", 
      OnClick:()=>{ 
       console.log("link clicked!") 
      } 
     }; 
    } 
} 

angular.module('NavBarTest', []) 
    .component(
     'navBar', { 
      template: `<!-- there's No Type Checking here --> 
         <ul> 
          <li> 
           <a class="navText" href="" ng-click="$ctrl.clicked"> 
           {{$ctrl.navInfo.text}} 
           <i class="naIvIcon">{{$ctrl.navInfo.icon}}</i> 
           </a>       
          </li> 
         </ul>>`, 
      bindings: { 
       navInfo: '<' 
      }, 
      controller: NavBar, 
      // controllerAs: '$ctrl' 
     } 
    ) 
    .component("navBarUser", { 
     template: ` <!-- there's No Type Checking here --> 
      <nav-bar nav-info="$ctrl.navInfo" ></nav-bar> 
     `, 
     controller: OtherController, 
     // controllerAs: '$ctrl' 
    });