【ワンピースで覚えるTypeScript】第８回 分割代入(JavaScript学習者向け)

TypeScriptにおける分割代入についてです。

コードの量が少なくなるので、とても便利ですよね！

ネストした場合も、パターンは決まっているので１つ１つ覚えていきましょう！

const luffy = {
  devil_fruit: "ゴムゴムの実",
  age: 19
};

const { devil_fruit, age } = luffy;
//luffyのdevil_fruitプロパティを変数devil_fruitに代入
//「const devil_fruit = luffy.devil_fruit」と同じ
//luffyのageプロパティを変数ageに代入
console.log(devil_fruit);
console.log(age);

//別の変数名を使いたい時
const chopper = {
  position: "医者",
  bounty: 1000,
}

const {
  position,
  bounty: chopper_bounty,
//プロパティ名: 変数名
} = chopper;
console.log(position);
console.log(chopper_bounty);

//型チェック
const {
  //animal,
} = chopper;

//ネストした場合
const nami = {
  nickname: "泥棒猫",
  body: {
    bust: 98,
    waist: 58,
    hip: 88
  }
}

const { nickname, body: { bust, hip } } = nami;
console.log(nickname);
console.log(bust);
console.log(hip);

//配列
const brother = ["イチジ", "ニジ", "サンジ", "ヨンジ"];

const [one, two, three, four] = brother;
console.log(one);
console.log(three);
//配列も変数に型注釈を与えられない

//オブジェクトの中の配列
const family = {
  parents: "ジャッジ",
  children: ["イチジ", "ニジ", "サンジ", "ヨンジ"],
};

const { parents, children:[first, , third] } = family;
//console.log(parents);
//console.log(first);
//console.log(third);

//配列の中のオブジェクト
const family2 = [
  {
    child1: "イチジ",
    child2: "ニジ",
    child3: "サンジ",
  }
]
const [{child3}] = family2;
console.log(child3);

//デフォルト値
type Obj = { berry?: number };
const chopper1: Obj = {
}

const chopper2: Obj = {
  berry: 1000,
}

const { berry = 0 } = chopper1;
console.log(berry);
const { berry = 0 } = chopper2;
console.log(berry);

//restパターン
const robin = {
  height: 188,
  bust: 100,
  waist: 60,
  hip: 90
}

const { height, ...three_size } = robin
console.log(height);
console.log(three_size);
//heightプロパティを取り除いた新たなオブジェクト