web-dev-qa-db-ja.com

タイプスクリプト：タイプエラーに割り当てられません

angular 2.でTypeScriptを使用するのは初めてです。angular 2-cli。のバージョン1を使用しています。コンパイル時に、 Assignment [] "型に割り当て可能です。これまでデータ型を調べましたが、問題ないように見えますが、エラーの正確な内容はわかりません。ご協力ありがとうございます。

コンソールからのエラーの写真です。enter image description here

data.tsファイル-これらは、配列に表示される2つのアイテムです

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;
  }
javascriptangulartypescriptangular2-cli
12
LadyT

オブジェクトリテラルの構造がAssignment構造と一致しないためです。

TypeScriptは構造的に型付けされています。つまり、型を使用する場合は、構造体が型と一致する必要があります。これは、オブジェクトリテラルを作成してAssignmentsを作成する場合、そのリテラルには型のすべてのプロパティが必要であることを意味します。

私が間違っていると思ういくつかのこと

  1. nameとinformationが欠落しているのは、typeAにネストされているためです。 Assignmentで定義されているように、メイン構造内にある必要があるため、これは機能しません。

  2. 最初のオブジェクトにtaskBが必要です

  3. オブジェクトのメイン構造からselectAとselectBが欠落しています。

おそらく他にもありますが、うまくいけば、あなたはポイントを得る

オプションにする場合は、?演算子

interface Assignment {
  name?: string;
}

ネストが必要な場合は、それもできます

interface Assignment {
  taskA?: { name: string },
  taskB?: { name: string }
}
18
Paul Samsotha

エラーは非常に明確です：

プロパティ '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オブジェクトを受け取り、それ自体を初期化するコンストラクターを作成できます。

3
Nitzan Tomer