TypeScriptでオブジェクト配列を作成する方法

Question

実現したいこと

任意のオブジェクトが20個入った配列を作りたいのですが、どう書けば良いのかわかりません。
オブジェクト配列自体は作成できても、fillを使用するとそのオブジェクトへの参照がコピーされてしまうため、配列内の一つのオブジェクトを書き換えると他のオブジェクトも全て書き換わってしまいます。
オブジェクトが書き換わらないオブジェクト配列の作成方法を教えていただきたいです。

試したこと

// { node: [], edge: [] }オブジェクトが20個入った配列を作りたい
type Data = {
  node: []
  edge: []
}

// 試したこと①
const initData_a = Array<Data>(20).fill({ node: [], edge: [] }) // オブジェクトへの参照がコピーされる
initData_a[0].node.push({ id: '0', label: 'something' })

// 試したこと②
const initData_b = Array<Data>(20).fill().map(() => ({ node: [], edge: [] })) // オブジェクトへの参照がコピーされる
initData_b[0].node.push({ id: '0', label: 'something' })

// 結果：一つ目のオブジェクト以外も書き換わる
// initData_a,initData_b = [
//  { node: [{ id: '0', label: 'something' }], edge: [] },
//  { node: [{ id: '0', label: 'something' }], edge: [] },
//  ...]

補足

Array.fillの仕様

Comments

[miyabi_pudding]

> そのオブジェクトへの参照がコピーされてしまうため

それをやっている構文を記載してください。
そこに答えがあるかと。
また、本件は、TypeScriptのみの話なので、
質問タイトルを直すのと、
質問タグはJavaScriptはとるべきかと。

[teis]

コメントありがとうございます。

> それをやっている構文を記載してください。
fill関数使用時のことを示しています。
補足を追記し、タグとタイトルを修正しました。

Answer 1

原始的なやり方がいちばん確実です。

const initData: Data[] = [];

for(let i = 0; i < 20; ++i) initData[i] = { node: [], edge: [] };

Comments

[maisumakun]

なお、constは「initDataを別なオブジェクトに付け替えられない」という意味で、initDataの配列を破壊的に変更する分には無関係です。

[teis]

ありがとうございます。
原始的な方法を避けて書いてきたのですが、その方法が確実と聞いてすっきりしました。