interfaceで指定した型を使った配列

Question

VS2015で、Angular2を使ったWebアプリを作成しております。

interfaceに下記の様に定義したのを利用して配列を定義したいのですが、
初期化方法が分からず苦戦しております。

interface shopping {
Name?: string;
Distance?: string;
}

上記のinterfaceを、配列型にして変数定義する際の記述方法ですが、
var _shoppings: Models.shopping[] = [];

これですと、ループ処理内で値セットしようとすると、
_shoppings[i].Name = "○○○○";
（iは、ループ処理内で1ずつインクリメントされる添字カウンター）
Nameは未参照でとエラーになってしまいます。

ご教示、宜しくお願いいたします。

Comments

[cither]

その状況を再現する最小限のコードと実際のエラーメッセージを提示できますか？
「Nameは未参照でとエラー」とはJavaScriptのundefinedエラーのことでしょうか？

Answer 1

Angular2 に依存した話ではなさそうという前提で回答します（Angular2 特有のなにかであればこの回答はまとはずれな可能性があります）。

配列に値を追加していく、というだけであれば、ループ内で

_shoppings.push({Name:"Tokyo", Distance:"hoge"})

上記のように push() すればよろしいと思いますが、いかがでしょうか。

発生しているエラーとしては、 配列 _shoppings の i番目 には Name プロパティが存在しないということかと思います。

こうした用途の場合、Interface を定義して得られる効果は Name, Distance 以外のプロパティ名を利用した場合エラーになるとか、Name や Distance の値の型の不一致時にエラーになるとかいったことなので、初期化云々については通常の JavaScript の配列と同等に考えてよいと思います。