typescriptのスプレッド構文の使い方

Copy
// 配列を定義
const array1 = [1,2,3]
const array2 = [4,5,6,7]

// arrayを展開して新しい配列を作成
const newArray = [0,...array1,99]
console.log(newArray)

// array1とarray2を展開、マージする
const margeArray = [...array1,...array2]
console.log(margeArray)

// 分割代入とレスト構文で配列を分割する
const [val1,val2,...rest] = margeArray
console.log(val1,val2,rest)

Copy
// 空オブジェクトの型
type EmptyObject = { [key: string]: any };

// オブジェクトを定義
const user:EmptyObject = { id: 1, name: "hogehoge" }
const userDetail:EmptyObject = { address: "xxx", weight:60 }

// 新規プロパティを追加する
const user2 = {...user,age:21}
console.log(user2)
// 結果
//{id: 1, name: "hogehoge", age: 21}

// オブジェクトをマージする
const margeUser = {...user,...userDetail}
console.log(margeUser)
// 結果
// {id: 1, name: "hogehoge", address: "xxx", weight: 60}

// 同じプロパティは上書きされる
let user3 = {...user2,age:99}
console.log(user3)
// 結果
// {id: 1, name: "hogehoge", age: 99}

// 順番を入れ替えてしますと設定した値も後ろに設定した値で
// 上書きされる
user3 = {age:99,...user2}
console.log(user3)
// 結果
// {age: 21, id: 1, name: "hogehoge"}

Copy
// userタイプを定義
type User = {id:number, detail: {name:string, age:number}};

// オブジェクトを定義
const user:User = {id: 1, detail: {name: 'hoge', age: 29}};
// スプレッド構文でコピー（シャローコピー）
const copyUser = {...user}
// コピー元のnameを変更
user.detail.name = 'xxxxxxxxxx'
// コピーを出力
console.log(copyUser);  

// ログ
// id: 1
// detail:{
//   name: "xxxxxxxxxx"
//   age: 29
// }

Copy
// userタイプを定義
type User = {id:number, detail: {name:string, age:number}};

// オブジェクトを定義
const user:User = {id: 1, detail: {name: 'hoge', age: 29}};
// JSONメソッドでコピー（ディープコピー）
const copyUser = JSON.parse(JSON.stringify(user))
// コピー元のnameを変更
user.detail.name = 'xxxxxxxxxx'
// コピーを出力
console.log(copyUser);  

// ログ
// id: 1
// detail: {
//   name: "hoge"
//   age: 29
// }

Copy
// userタイプを定義
type User = {
  id: number;
  detail: { name: string; age?: number; func: (param: string) => string };
};

// 関数を定義
const func = (val: string) => `関数 : ${val}`;

// オブジェクトを定義
// ネストしたオブジェクトにundefinedと関数を設定する
const user: User = {
  id: 1,
  detail: { name: "hoge", age: undefined, func: func }
};
// JSONメソッドでコピー（ディープコピー）
const copyUser = JSON.parse(JSON.stringify(user));
// コピー元のnameを変更
user.detail.name = "xxxxxxxxxx";
// コピーを出力
console.log(copyUser);

// ログ
// id: 1
// detail: {
//   name: "hoge"
// }

Copy
import * as _ from "lodash";

// userタイプを定義
type User = {
  id: number;
  detail: { name: string; age?: number; func: (param: string) => string };
};

// 関数を定義
const func = (val: string) => `関数 : ${val}`;

// オブジェクトを定義
// ネストしたオブジェクトにundefinedと関数を設定する
const user: User = {
  id: 1,
  detail: { name: "hoge", age: undefined, func: func }
};
// lodashメソッドでコピー（ディープコピー）
const copyUser = _.cloneDeep(user);

// コピー元のnameを変更
user.detail.name = "xxxxxxxxxx";
// コピーを出力
console.log(copyUser);

// ログ
// id: 1
// detail: {
//   name: "hoge"
//   age: undefined
//   func: ƒ func() {}
// }