如何使用 Typescript 定义具有动态键的数组？

Posted 2023-03-13

【中文标题】如何使用 Typescript 定义具有动态键的数组？

【英文标题】：How can I define an array with dynamic keys using Typescript?

【发布时间】：2017-12-31 07:07:57

【问题描述】：

我正在使用 Ionic 2，它位于 Angular 2 之上。我需要创建一个项目数组。我不知道该数组中有多少项。

这是我的 Typescript，简化版：

import  Component  from '@angular/core';

import  VgAPI  from 'videogular2/core';

@Component(
  selector: 'page-class',
  templateUrl: 'class.html'
)
export class ClassPage 
  api: any[];

  constructor(...)

  // Load API when videos are ready
  onPlayerReady(api: VgAPI, i: any) 
    this.api[i] = api;
  

onPlayerReady 在我的视图中的视频播放器初始化时被调用。 i 是该玩家的 ID (0, 1, 2, ...)。

我希望这会构造一个数组：

this.api[0] = VgAPI (of player 1)
this.api[1] = VgAPI (of player 2)
this.api[2] = VgAPI (of player 3)
this.api[3] = VgAPI (of player 4)
this.api[4] = VgAPI (of player 5)

不幸的是，我得到以下信息：

Runtime Error
Cannot set property '1' of undefined

我相信这是因为this.api[0] 没有在任何地方明确定义。但这是个问题，因为我不知道会有多少物品。如何正确定义此数组以允许此行为？

【问题讨论】：

您需要在构造函数中将变量设置为空数组：this.api = [];

数组没有“键”，它们有“索引”。根据定义，所有数组都是动态的。

【参考方案1】：

Arrays in javascript are naturally dynamic in length，因此您无需在初始化期间提供大小。

JavaScript 数组的长度和元素的类型都不是固定的。

你还没有初始化数组，所以你只需要这样做，没有大小。

即

api: any[]; 应该是api: any[] = [];

这是一个有效的JSFiddle，稍作清理。

interface VgAPI 
  name: string;


class ClassPage 
  private api: VgAPI[] = [];

  public onPlayerReady = (api: VgAPI, index: number) => 
    this.api[index] = api;
  ;


let classPage = new ClassPage();
classPage.onPlayerReady( name: "foo" , 1);

【参考方案2】：

因为api是undefined，所以必须设置为空数组：

@Component(
  selector: 'page-class',
  templateUrl: 'class.html'
)
export class ClassPage 
  // initialize as empty array
  public api: VgAPI[] = [];

  constructor(...)

  // Load API when videos are ready
  onPlayerReady(api: VgAPI, i: number) 
    this.api[i] = api;
  

【讨论】：

我想知道为什么有人对这个答案投了反对票。看不出有什么问题。

可能是因为 OP 的问题相当于一个错字。他收到一条错误消息cannot set property '1' of undefined。因此，很明显this.api 是未定义的。 this.api 未定义并不奇怪，因为它从未被初始化。

不是很有建设性的@torazaburo。 api 在构造函数中定义 - 我知道 api[1] 没有定义（我在我的问题中说过），我知道这就是我收到错误的原因，问题是为什么会这样当它在构造函数中设置为any 时。这个答案回答了这个问题。您的评论极其无益、不具建设性和错误；没有错字，我只是不知道我必须初始化为一个数组。

@mikemike 嗯，意识到如果你不初始化某些东西，那么它就不会被初始化似乎并不复杂。 “定义”不是“初始化”。指定类型不会初始化。

错误提示 undefined。我正在定义它。询问后似乎我也需要初始化。我不确定你对这一切的问题是什么......