分割代入に型をつける

01 / 05

分割代入を思い出そう

JavaScript コースで、オブジェクトから名前を取り出す書き方を学んだよね。const { namae, toshi } = hito; のあれだ。

TypeScript では、取り出したあとの変数に型が付く。付け方は少し独特で、変数名の後ろではなく、分割パターンの全体の後ろに書くんだ。

const hito = { namae: "ゆい", toshi: 20 };const { namae, toshi }: { namae: string; toshi: number } = hito;console.log(namae, toshi);

実行結果

ゆい 20

02 / 05

関数の引数で使うのが本番

分割代入がいちばん活躍するのは、関数の引数だよ。オブジェクトを受け取って中身をすぐ使いたいとき。

引数で分割するとき、型は { ... }: { ... } の形になる。左が取り出す名前、右がそれぞれの型だよ。

function greet({ namae, toshi }: { namae: string; toshi: number }): string {  return `${namae}さん（${toshi}歳）`;}console.log(greet({ namae: "けい", toshi: 25 }));

実行結果

けいさん（25歳）

03 / 05

type で名前をつければ短くなる

まいかい型を全部書くのは長い。type で名前をつければ、引数は (p: Hito) だけで済むよ。

分割代入と型エイリアスは、セットで使われることが多いんだ。

type Hito = { namae: string; toshi: number };function greet({ namae, toshi }: Hito): string {  return `${namae}さん（${toshi}歳）`;}console.log(greet({ namae: "ゆい", toshi: 20 }));

実行結果

ゆいさん（20歳）

04 / 05

必要なプロパティだけ取り出せる

オブジェクトに5個プロパティがあっても、分割代入では使いたいものだけを書けばいい。型のほうは、書かなかったプロパティも含めて全部書く必要がある。

「型はデータの形をすべて説明する」「分割代入は自分が使うぶんだけ選ぶ」という役割の違いを覚えておこう。

type Hito = { namae: string; toshi: number; machi: string };function onlyName({ namae }: Hito): string {  return namae;}console.log(onlyName({ namae: "りん", toshi: 30, machi: "京都" }));

実行結果

りん

05 / 05

無いときのデフォルト値も書ける

プロパティが省略可能（?）のとき、分割代入ではデフォルト値を用意しておける。= 既定値 を変数名の後ろに書くよ。

値が無ければデフォルトが使われ、あればその値が優先される。

type Hito = { namae: string; toshi?: number };function greet({ namae, toshi = 0 }: Hito): string {  return `${namae}（${toshi}歳）`;}console.log(greet({ namae: "ゆい" }));

実行結果

ゆい（0歳）