活字体は、（アウレリアビューモデルの一部である）私の活字体ファイル<em></em>では、インタフェース名

Question

を見つけることができない、私は構造を次ています

import {Chart} from './chart'; 

interface IMargin { 
    top: number, right: number, bottom: number, left: number 
} 

export class App{ 

    chartOptions: any; 

    constructor(margin: IMargin) { // No error here 

     this.chartOptions = { 
      element: "#chart", 
      margin: IMargin // Error: Cannot find name "IMargin" 
     }; 
    } 

    attached() { 
     var chart = new Chart(this.chartOptions); 
     chart.addChart(); 
    } 
} 

Typescriptコンパイラは、コンストラクタでインタフェースを使用しても問題がありませんコンストラクタ内にmarginを定義するために使用すると、エラーCannot find name "IMargin"が返されます。何故ですか？

また、正しい方法でない場合は、インターフェイスを宣言するのに最適な場所はどこですか？ありがとうございました。この

export class App{ 

    chartOptions: any; 

    constructor(margin: IMargin) { // No error here 

     // instead of this 
     //this.chartOptions = { 
     // element: "#chart", 
     // margin: IMargin // Error: Cannot find name "IMargin" 
     //}; 

     // use this 
     this.chartOptions = { 
      element: "#chart", 
      margin: margin 
     } as { element: string, margin: IMargin }; 

よう

Answer 1

変更それは、私たちはタイプについてのTSを確保することができる方法を示すためにasを使用..しかし、それは必要ありません。ポイントは、問題はあなたが有効な値ではありませんインタフェース、の値にグラフオブジェクトのmarginプロパティを割り当てるしようとしているということですマージン

Answer 2

のparamater渡されたプロパティmarginに割り当てています。私はしばらく前にこれで壁に頭を叩いてたし、それが問題だった実現しなかった

あなたはなど、string、number、objectのように、有効な値にプロパティを設定する必要があります。だから、あなたはRadim Kohlerが言ったことをしたいことを達成するために。

constructor(margin: IMargin) { 
    this.chartOptions = { 
      element: "#chart", 
      margin: margin 
    }; 
} 

またはあなたがそうのような変数にプロパティをIMargin型の変数を作成して設定することができます：どちらか一方のparamに渡されたので、同様にマージンの値を設定し、私が使用し

constructor(margin: IMargin) { 
    var myMarginInterfaceObject: IMargin = margin; 
    // then you can do some editing on the obj if you want here; 

    this.chartOptions = { 
      element: "#chart", 
      margin: myMarginInterfaceObject 
    }; 
} 

interaces（私は一般的に今はクラスを使用しています）、私はすべての私のすべてのインターフェイスファイルを保持するフォルダを持っていました。それはそれをきれいに保ち、私はいつそれらを探すべきかを知っていました。また、すべての（インターフェイス）インポートステートメントは、すべて同じ場所から来ているため、非常に構造化されています。

私はあなたには、いくつかのものを視覚化するのに役立つGistRunを作成しました： https://gist.run/?id=df782959b005308b3b095c8df569574a

Answer 3

Radimケーラーの答えに加えて、あなたはまた、次のように行うことができます。

interface IMargin { 
    top: number, right: number, bottom: number, left: number 
} 

interface IMarginWrapper{ 
    element:string, margin:IMargin 
} 

export class App{ 

    //instead of any specify your type properly here 
    chartOptions: {element:string, margin:IMargin}; //alternative#1 
    chartOptions1: IMarginWrapper;     //alternative#2 

    constructor(margin: IMargin) { 

     //usage does not change much 

     this.chartOptions = { 
      element: "#chart", 
      margin: margin 
     }; 

     this.chartOptions1 = { 
      element: "#chart", 
      margin: margin 
     }; 
    } 
}