16

我是使用 angular 2 的打字稿的新手。我使用的是 angular 2-cli 的版本 1。编译时，我收到此错误消息“不可分配给类型分配 []”。我查看了数据类型，到目前为止看起来还不错，但我不确定错误到底是什么。谢谢你的帮助。

这是来自控制台的错误照片。 在此处输入图像描述

data.ts 文件 - 这些是出现在数组中的两项

export const Assignments: Assignment[] = [
  {
    "a_type": "one",
    "a_title": "Assignment 1",
    "symbol": 1,
    "show": false,
    "tooltip": {
        "left": 82
    },
    "buttonPos":{
        "left": 130
    },
    "printTop": 0,
    "instructions": "Instructions here",
    "due_date": "sept-15.png",
    "percentage": "10.png",
    "taskA": {
        "name": "Option A",
        "a_title": "Task A",
        "information": "Instructions for task A",
        "selectA": true
    }
}, {
    "a_type": "two",
    "a_title": "Assignment 2",
    "symbol": 2,
    "show": false,
    "sub_a_title": "Assignment Information",
    "tooltip": {
        "left": 200
    },
    "buttonPos":{
        "left": 250
    },
    "printTop": 250,
    "instructions": "Instructions here",
    "due_date": "29.png",
    "percentage": "10.png",
    "taskA": {
      "a_title": "Assignment 2 info",
        "name": "Option A",
        "information": "Instructions for task A",
        "selectA": false
    },
    "taskB": {
      "a_title": "Assignment 2 info",
        "name": "Option B",
        "information": "Instructions for task B",
        "selectB": false
    }
}
]

assignment.ts - 这是数据类型

export class Assignment {
    a_type: string;
    a_title: string;
    symbol: any;
    show: boolean;
    tooltip: any;
    left: number;
    buttonPos:any;
    printTop: number;
    instructions: string;
    due_date: string;
    percentage: string;
    taskA: any;
    name: string;
    information: string;
    selectA: boolean;
    taskB: any;
    selectB: boolean;
  }
4

2 回答 2

20

这是因为对象文字的结构与结构不匹配Assignment。

Typescript 是一种结构类型语言，这意味着一个类的类型和属性是由它的结构定义的。如果结构匹配，则可以将对象文字视为类的类型。例如，假设我们有这个类

class Person {
  firstName: string;
  lastName: string;
}

new而不是使用关键字实例化类的常规方法，

let person: Person = new Person();
person.firstName = "Stack";
person.lastName = "Overflow";

我们可以使用以下内容：

let person: Person = {
  firstName: "Stack",
  lastName: "Overflow"
}

如果我们不包含该lastName属性，我们会得到一个编译错误，因为结构与类的结构不匹配，Person我们试图将其键入为Person.

就您的代码而言，我认为错误的一些事情是：

  1. 你失踪了name，information因为它们嵌套在typeA. 这不起作用，因为它们需要在主结构中，因为这是在Assignment

  2. 你需要taskB在第一个对象

  3. 您缺少对象selectA的selectB主要结构。

可能还有更多错误，但希望你明白这一点

如果你想让事情变得可选，你可以使用?操作符

interface Assignment {
  name?: string;
}

如果你想嵌套你也可以这样做

interface Assignment {
  taskA?: { name: string },
  taskB?: { name: string }
}

也可以看看：

于 2016-10-16T17:31:53.273 回答
3

The error is pretty clear:

Property 'left' is missing ...

Your Assignment class declares a member named left but both of your json objects don't have it.
You have a few more properties you haven't set in your json objects, here's a working version in playground.

You can declare the properties is optional if you want:

class Assignment {
    a_type?: string;
    ...
}

But even without the errors, you have a problem.
You're not creating instances of the class Assignment, you only create objects that match the class properties.
It works because typescript is using duck typing, but if you'll have methods in the Assignment then your objects won't have those.
You can do this:

export const Assignments: Assignment[] = [new Assignment(), new Assignment()];

Object.assign(Assignments[0], FIRST_JSON_OBJ);
Object.assign(Assignments[1], SECOND_JSON_OBJ);

Or you can have a constructor in Assignment who receives this json object and intialize itself.

于 2016-10-16T17:36:40.983 回答