Question

我有一个类，然后定义了一个类数组，每当我想向该数组添加节点时，我都必须提及我不喜欢的类名称：

export class ItemModel {
  constructor(
    ID,
    Name
  ) {
    this.ID = ID;
    this.Name = Name; 
  }
}

export var ItemsArray = [];

ItemsArray.push(new ItemModel(0, "BreakFast"));
ItemsArray.push(new ItemModel(1, "Lunch"));
ItemsArray.push(new ItemModel(2, "Dinner"));

阅读这篇文章后：

https://answers.unity.com/questions/637902/how-to-use-javascript-array-with-classes.html

在定义数组时，我试图声明该类：

var ItemsArray : ItemModel[];

但出现错误：“类型只能在.ts文件中使用。

我在google上搜索了此内容，但没有一个对您有帮助。

任何建议将不胜感激。

Answer 1

您链接到的帖子正在使用TypeScript，这是与JavaScript不同的语言：这是JavaScript的超集（编译为JavaScript），添加了静态类型（和其他一些功能，例如构造函数中的自动属性初始化。

此TypeScript行：

var ItemsArray : ItemModel[];

等效于以下JavaScript：

var ItemsArray;

只是TypeScript版本声明ItemsArray变量具有静态类型 ItemModel[]。

如果您使用的是JavaScript本身，则无需定义变量的类型。您的export var ItemsArray = [];很好（除了我将使用let或const而不是var之外）。

侧面注意：您可以使用 array初始化程序在JavaScript中更简洁地编写该数组：

export const ItemsArray = [
    new ItemModel(0, "BreakFast"),
    new ItemModel(1, "Lunch"),
    new ItemModel(2, "Dinner")
];

即使没有类型声明，这也是有效的TypeScript：TypeScript会推断出您希望ItemsArray的类型为ItemModel[]（因为TypeScript进行了type inference，并且可以看到您正在用ItemsArray个对象填充ItemModel。

如果您想从一个空数组开始但仍给它一个静态类型，则可以这样做：

//                                   /------ Telling TypeScript to use ItemModel[]
//                      vvvvvvvvvvvvv        as the type
export const ItemsArray : ItemModel[] = [];
//                                   ^^^^^-- Initializing ItemsArray with an
//                                           empty array

然后将对您的push调用进行类型检查，这样可以正常工作：

ItemsArray.push(new ItemModel(0, "BreakFast"));

但这会导致错误（在TypeScript-> JavaScript编译期间）

ItemsArray.push("BreakFast");

因为"Breakfast"与ItemModel不兼容。

侧面注2：JavaScript（和TypeScript）中的绝大多数约定是变量以小写字母开头，而不是大写字母。因此，itemsArray而不是ItemsArray。

Answer 2

另一种替代方法是创建一个用于保存您的商品的类，并提供一种添加/删除商品的方法。这样，您不必每次都更新阵列项目。 ...好吧，你会的。您，代码不必做。

class ItemModel {
  constructor(id, name) {
    this.id = id;
    this.name = name;
  }
}

class ItemModelCollection {
  constructor() {
    this.items = [];
  }
  addItem(id, name) {
    if (Array.isArray(this.items)) {
      this.items.push(new ItemModel(id, name));
    }
  }
  removeItem(id) {
    if (Array.isArray(this.items)) {
      this.items = this.items.filter( i => i.id !== id);
    }
  }
}

const itemCollection = new ItemModelCollection();
document.getElementById('addItem').onclick = (e) => {
  const id = itemCollection.items.length; // obviously figure out a better id generator
  itemCollection.addItem(id, `Item Number ${id}`);
  console.log(itemCollection);
};

<button id="addItem">Add Item</button>

我还应该注意，不要使用new ItemModel(id, name)并使用提到的打字稿方式（<ItemModel>{ id: id, name: name})很好，但是如果类中有方法，则它们将无法工作，因为您不是在“更新”它）如果只设置属性而不初始化类，那么实质上就失去了拥有该类的意义。

与样式/问题有关的样式/问题的相关/植入（并非像文章所说的那样具体地针对角度）：Angular : Class and Interface

使用类数组的更简单方法

2 个答案: