ダイナミックマップと角4

Question

は、私は別のソースからの情報を動的にそれを埋めるためにマップの構造を作成しようとしています：

export class VideoDataMap { 
    [videoId: string]: { 
     url: string, 
     name: string 
    }; 
} 

の問題は、私は、オブジェクトの属性にデータを割り当てるときオブジェクトは未定義であると言います。オブジェクトではなく文字列を割り当てると、機能します。 私はここに何が欠けているか誰でも知っていますか？

public videoDataMap = new VideoDataMap(); 

this.videoDataMap[videoId] = url;  

これは

this.videoDataMap[videoId].url = url; 

    error: TypeError: Cannot set property 'url' of undefined 

は非常に 敬具

ありがとうエラーがスローされます。これは、エラーをスローしません（しかし、我々は、オブジェクトの属性を使用していません）

Answer 1

実際のフィールドではなく構造体でTypescriptクラスを定義しているので、混乱が生じると思います。つまり、後で構築すると、Javascriptの空のオブジェクトが生成されます。これは、最初はキーが設定されていないマップなので完全な意味を持ちます。

それは（http://www.typescriptlang.org/play/を使用して、たとえば）transpiledコードに探して見るのは簡単だ

活字体：

export class VideoDataMap { 
    [videoId: string]: { 
     url: string, 
     name: string 
    }; 
} 

生成されるJavaScript：

意味

var VideoDataMap = (function() { 
    function VideoDataMap() { 
    } 
    return VideoDataMap; 
}()); 
exports.VideoDataMap = VideoDataMap; 

、あなたが実行します。

let videoDataMap = new VideoDataMap();

あなたに似た何かを得るでしょう：

var videoDataMap = {}

そして、あなたはvideoDataMap["myVideoId1"].anyPropを行うときに、したがって、あなたはTypeErrorvideoDataMap["myVideoId1"]ためには初期化されていません取得します。

class VideoDataItem{ 
    public url: string; 
    public name: string; 
    constructor(u: string, n: string){ 
     this.url = u; 
     this.name = n; 
    } 
} 

class VideoDataMap { 
    [videoId: string]: VideoDataItem; 
} 

そして、次の実行している例のように、それを使用して：：https://glot.io/snippets/ervh3vtbg9

私はそれが役に立てば幸い

代替はそれが好きで定義されるだろう。

Answer 2

どうすればいいですか

if (this.videoDataMap[videoId]) // check if there's an object 
    this.videoDataMap[videoId]["url"] = url; // only assign this field 
else // is unassigned 
    this.videoDataMap[videoId] = {url : url}; // initialize new object