Typescript：不可分配给类型错误

Question

Typescript：不可分配给类型错误

20

我刚开始使用 TypeScript 和 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;
  }

- LadyT

2个回答

3

错误很明显：

属性 'left' 丢失...

您的 Assignment 类声明了一个名为 left 的成员，但是您的两个 JSON 对象都没有它。
您有几个属性在 JSON 对象中没有设置，

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

即使没有错误，您也会遇到问题。
您没有创建Assignment类的实例，而只创建与类属性匹配的对象。
这是有效的，因为TypeScript使用鸭子类型，但是如果在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 对象并初始化自身。

- Nitzan Tomer

1

谢谢提供信息和演示。我看到了更多的错误。 - LadyT

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Paul Samsotha · Accepted Answer

这是因为对象字面量的结构与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。

至于你的代码，我看到有几个问题：

由于它们嵌套在typeA中，所以你缺少了name和information。这样行不通，因为它们需要在主结构中，而主结构是在Assignment中定义的。
第一个对象中需要taskB。
你从对象的主结构中漏掉了selectA和selectB。

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

如果您想使某些内容可选，可以使用?运算符。

interface Assignment {
  name?: string;
}

如果您想要嵌套，您也可以这样做

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

另请参阅：