地图角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空对象，这个对象最初是一个没有设置按键的地图。

可以很容易地看到寻找到transpiled代码（例如使用http://www.typescriptlang.org/play/）

打字稿：

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，你会得到TypeError因为videoDataMap["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