打字稿：不可分配给类型错误

Question

我刚开始使用带有 angular 2 的打字稿。我使用的是 angular 2-cli 的版本 1。编译时，出现 "is not assignable to type 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' 类型和属性由其结构定义。如果结构匹配，对象文字可以被认为是 class 的一种类型。例如，假设我们有这个 class

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

与使用 new 关键字实例化 class 的正常方法不同，

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

我们可以使用以下内容：

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

如果我们不包含 lastName 属性，我们会得到一个编译错误，因为结构与 Person class 我们尝试将其输入为 Person.

就您的代码而言，我发现的一些错误是：

您缺少 name 和 information，因为它们嵌套在 typeA 中。这不起作用，因为它们需要位于主结构中，因为这是 Assignment
中定义的
第一个对象需要taskB
对象的主要结构缺少 selectA 和 selectB。

可能还有更多错误，但希望您能理解重点

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

interface Assignment {
  name?: string;
}

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

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

另请参阅：

Answer 2

错误很明显：

Property 'left' is missing ...

您的 Assignment class 声明了一个名为 left 的成员，但是您的两个 json 对象都没有。
您还没有在 json 对象中设置一些属性，here's a working version in playground。

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

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

但即使没有错误，您也有问题。
您不是在创建 class Assignment 的实例，您只创建与 class 属性匹配的对象。
它之所以有效，是因为打字稿正在使用 duck typing，但是如果您在 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 对象并初始化它自己。

打字稿：不可分配给类型错误

Typescript: is not assignable to type error

javascript

typescript

angular2-cli

angular