0

Angularにて画面を作っています。ある画面のコンポーネントにて、

class Sub {
    constructor(
        aaa: string,
        bbb: string,
        ccc: string
    ) {}
}

上記のクラスをimportし、この型でAPIからレスポンスが帰ってくるのでそれをTableの行選択で利用できるように

type ExtendSub = Sub & {
    isSelected: boolean;
}


// 返ってきたレスポンス
const response: Sub[] = [
    { aaa: "a", bbb: "b", ccc: "c" },
    { aaa: "a", bbb: "b", ccc: "c" },
    { aaa: "a", bbb: "b", ccc: "c" },
]

これを下記のように追加がしたいのですが

const ex: ExtendSub[] = [
    { aaa: "a", bbb: "b", ccc: "c", isSelected: false },
    { aaa: "a", bbb: "b", ccc: "c", isSelected: false },
    { aaa: "a", bbb: "b", ccc: "c", isSelected: false },
]

どのように変換したら良いかがわかりません。これ以外に解決方法があればご教授いただけると幸いです。

1 件の回答 1

1

map関数を使うと次のように書けます。

type Sub = {
    aaa: string;
    bbb: string;
    ccc: string;
}

type ExtendSub = Sub & {
    isSelected: boolean;
}

const response: Sub[] = [
    { aaa: "a", bbb: "b", ccc: "c" },
    { aaa: "a", bbb: "b", ccc: "c" },
    { aaa: "a", bbb: "b", ccc: "c" },
]

const ex = response.map<ExtendSub>(item => {
    return { ...item, isSelected: false }
});

console.log(ex); // 期待値

Playground

1
  • すみません。自分で試した物を記載するのを忘れていました。map関数で新たに生成するところまでは考えていたんですがどう記述したらすっきりかけるかもたついていたところでした。 ありがとうございます!期待通りの出力を得ることができました!
    – noob
    Commented 2022年11月12日 3:02

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。