typescript 型エラー解消できない

Question

開発環境
Typescript + vue.jsを使っています。

**解決できないこと **
jsonの値を読み込んで変数に値を入れてあげたいのですが型エラーが出てうまくいきません。
①のとこで下記のエラーになってしまいます。
わかる方がいましたらご教授お願いしたいです。

// エラー内容
型 '{ id: number; name: string; }[]' の引数を型 'Selection[]' のパラメーターに割り当てることはできません。
  Property 'selected' is missing in type '{ id: number; name: string; }' but required in type 'Selection'.ts(2345)

 import test from '@/statuse.json'

export class StatuseEntity {
  selections: Selection[]
  
  constructor(selections: Selection[]) {
    //　②　forEachで回してあげたものをselectionsに入れる 
    this.selections = this.addSelections(selections)
  }

　// ③　配列の一個一個をforEachで回してあげている
  private addSelections(selections: Selection[]) {
    let select: any = []
    selections.forEach((selection) => {
      select = [...select, selection]
    })
    return select
  }
}

   ①// jsonの値を読み込んでいる
  this.statuseEntities = new StatuseEntity(test.statuses)

// jsonの型定義
export class Statuse {
  selection: Selection[]
}

export class Selection {
  id: number = 0
  selected: boolean = false
}

//statuse.json
{
    "statuses": [
      {
        "id": 1,
        "selected": false
      },
      {
        "id": 2,
        "selected": false
      },
      {
        "id": 3,
        "selected": true
      },
    ]
  }

Answer 1

private addSelectionsメソッドのlet select: anyがany型なのがいけないのでは？
また、class Selectionは、型だけの存在なのであれば、
interfaceもしくは、typeの方が柔軟に実装できると思います。
JSONの受け取りもしやすいですし、
わざわざany型で受け取らずに、真っ直ぐSelection型で受け取れるようになると思いますよ。
any型って、便利なように見えて、静的型付け言語においては、けっこう不便な存在だったりします。

Comments

[satodesu]

any型をselectionに修正しましたがたくさんエラーが出てしまいました

[miyabi_pudding]

なんとエラーがでましたか？

[cuku]

.

[satodesu]

上記と同じ
// エラー内容
型 '{ id: number; name: string; }[]' の引数を型 'Selection[]' のパラメーターに割り当てることはできません。
Property 'selected' is missing in type '{ id: number; name: string; }' but required in type 'Selection'.ts(2345)
というエラーが出ました！

[miyabi_pudding]

cukuさん >
maaiさんの回答にもコメントされてますが、どうしたんですか？
編集して.に直すって、怪しすぎですが。

少し、私の方でももう少し探ってみますね。
（TypeScript環境では確認してなかったので）

[satodesu]

すいません。
ありがとうございます

[kyoya0819]

編集で全く別の表示にする手口。
見覚えあるけど。。。

[miyabi_pudding]

asuchi0819さん >
ですよねぇ

cukuさん >
怪しいことすると、規約違反とか疑われますし（要はやましいから隠してるとしか思えない）やめましょう。

satodesuさん >
反面教師にして、同じような怪しい行為はやらないようにしときましょう。

Answer 2

エラー文の通り、 Selection 型の変数に { id: number; name: string; } 型の値を入れようとしているので、エラーが起きています

      {
        "id": 1,
        "selected": false
      }

は

class Selection {
  id: number = 0
  selected: boolean = false
}

では無いので、変換する必要があります

動作確認していませんが、例えば以下のようになるかと思います

class Selection {
  id: number = 0;
  selected: boolean = false;
  constructor(id: number, selected: boolean) {
    this.id = id;
    this.selected = selected;
  }
}
this.statuseEntities = new StatuseEntity(test.statuses.map((s) => new Selection(s.id, s.selection)));

Comments

[satodesu]

返信ありがとうございます。
{
"id": 1,
"selected": false
}
は
class Selection {
id: number = 0
selected: boolean = false
}
ではないとはどういうことでしょうか？
jsonとSelelctionの型はあっていると思うのですが、、、

[miyabi_pudding]

typeScriptの処理上は、別物です。
あくまで前者は、ただのオブジェクト型です。
後者はクラスの定義を行った型として扱われます。
TypeScriptは、静的型付けのため、型に関しては厳密に処理されますので、
同じプロパティ名があったとしても、型の宣言元が同一でなければ同じ型としては扱われません。
そして、私の回答で書いてますが、
メソッド内で、any型として受け取ってるから上手くいかないんだと思いますよ。