javascript - typescript :不可分配给类型错误

Question

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

这是控制台错误的照片。

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;
  }

Answer 1

这是因为对象字面量的结构与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 属性，我们会得到一个编译错误，因为 structure 与 Person 的结构不匹配类，我们尝试将其键入为 Person。

就您的代码而言，我看到的一些错误是:

1. 您缺少 name 和 information，因为它们嵌套在 typeA 中。这不起作用，因为它们需要位于主结构中，因为这是在 Assignment

   中定义的

2. 第一个对象需要taskB

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

可能还有更多的错误，但希望你明白了

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

interface Assignment {
  name?: string;
}

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

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

另请参阅:

• TypeScript docs on Type Compatibility
• TypeScript docs in Interfaces