打字稿：不可分配给键入错误

Question

我是使用带有 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属性，我们会得到一个编译错误，因为结构与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 文档
• 接口中的 TypeScript 文档

Answer 2

错误很明显：

缺少属性“左”...

您的Assignment类声明了一个名为left的成员，但您的两个 json 对象都没有它。
您还有一些尚未在 json 对象中设置的属性， 这是 playground 中的一个工作版本。

如果需要，您可以声明属性是可选的：

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

但即使没有错误，你也有问题。
您不是在创建类Assignment实例，而只是创建与类属性匹配的对象。
之所以有效，是因为打字稿使用的是鸭子类型，但是如果您在Assignment有方法，那么您的对象将没有这些方法。
你可以这样做：

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

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

或者您可以在Assignment有一个构造函数，它接收这个 json 对象并初始化自己。