Question

TypeScript v2.7.2

我有以下代码段：

import { Component, OnInit } from '@angular/core';
import { Ingredient } from "../shared/ingredient.model";

@Component({
  selector: 'app-shopping-list',
  templateUrl: './shopping-list.component.html',
  styleUrls: ['./shopping-list.component.css']
})
export class ShoppingListComponent implements OnInit {
  ingredients : Ingredient[] = [
    new Ingredient('Apples', 5),
    new Ingredient('Tomatoes', 10)
  ];
}

“共享”文件夹位于“ App”文件夹中，位于上方一步（在导入中为../）。我的 Ingredient 模型中具有以下内容：

export class Ingredient {
  constructor(public name: string, public amount: number) {}
}

代码在编译为JavaScript时肯定可以运行，但是TypeScript卡在了我无法解决的错误上：

Error:(10, 3) TS2322:Type 'Ingredient[]' is not assignable to type 'Ingredient'. 
Property 'name' is missing in type 'Ingredient[]'.

据我所知，我声明我想要成分类型的数组类型。我根据两个元素的相应类型启动了该数组。我确实知道Custom-Type-Array中没有'Name'属性，但是为什么它期望该数组是一个元素，而不是数组？

为什么在构造函数参数中给出名称时会出现名称丢失的错误？

不幸的是，我不能分享我从中编写的Udemy课程资源。我猜这门课程的课程继续进行，没有提及任何内容，因为在此阶段代码可以“按预期”编译并运行。

编辑：添加了角度标签。

Answer 1

我已经将您的代码放入了我用角度创建的新项目中。我已经将所有内容都放在一个文件中，就像这样：

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})
export class AppComponent {
    private ing: Ingredient[] = [
        new Ingredient('test', 10),
        new Ingredient('test', 10)
    ];
    constructor() {
        this.ing.forEach(el => {
            console.log(el);
        });
    }
}

export class Ingredient {
    constructor(public name: string, public amount: number) { }
}

这很好。我可以在控制台中看到打印出的两个数组元素。您可以尝试复制粘贴此代码并尝试吗？我知道，它应该可以正常工作。实际上，您可以尝试按“ Ingredient []”名称上的f12键，以查看您使用的空闲类是否正确。也很抱歉没有将其发布为评论，但我没有足够的声誉来做到这一点。

Answer 2

我发现您的代码存在一个小问题，您能否尝试更新以下行以添加'var或let'

`let ingredients : Ingredient[] = [
        new Ingredient('Apples', 5),
        new Ingredient('Tomatoes', 10)
    ];`

我认为这可能会有所帮助。

CustomModel []

2 个答案: