【TS】分割代入引数についてざっくりまとめてみた

目次

背景

分割代入と分割代入引数がごっちゃになっていたので、まとめます。

分割代入引数とは

まず、おさらいとして分割代入とは、配列の要素やオブジェクトのプロパティの値を別の変数として定義できる構文のことです。 分割代入引数とは、関数の1つの仮引数を分割代入で表現したものです。 実引数として渡すオブジェクトのプロパティ名と、分割代入引数の引数名は一致させる必要があります(分割代入なので、別名をつけることもできる)。 関数の仮引数に分割代入引数を使うことで、オブジェクトのあるプロパティのみや、配列のある要素のみを取得できます。やっていることはシンプルで、1つの仮引数を分割代入で書いているだけです。関数の実引数にはオブジェクトや配列を指定します。

■分割代入引数を使わない場合

type User = {
  first_name: string;
  last_name: string;
};

const getFullName = (user: User) => `${user.last_name} ${user.first_name}`; 

const loginUser = {
  first_name: "yuki",
  last_name: "hoge",
};

console.log(getFullName(loginUser)); // => "hoge yuki"

■分割代入引数を使う場合

type User = {
  first_name: string;
  last_name: string;
};

const getFullName = ({ first_name, last_name }: User) => `${last_name} ${first_name}`;

const loginUser = {
  first_name: "yuki",
  last_name: "hoge"
};

console.log(getFullName(loginUser)); // => "hoge yuki"

分割代入引数をオプショナルにする

分割代入引数をオプショナルにするには、オブジェクト型の型定義をオプショナルにすれば良いだけです。

type User = {
  first_name: string;
  last_name?: string;
};

const getFullName = ({ first_name, last_name }: User) => `${last_name} ${first_name}`;

const loginUser = {
  first_name: "yuki",
};

console.log(getFullName(loginUser)); // => "undefined yuki"

しかし、対応するプロパティがないとundefinedが渡ってしまうので、オプショナルなプロパティにデフォルト値を、事前に設定しておきます。

type User = {
  first_name: string;
  last_name?: string;
};

const getFullName = ({ first_name, last_name = "sample" }: User) => `${last_name} ${first_name}`;

const loginUser = {
  first_name: "yuki",
};

console.log(getFullName(loginUser)); // => "sample yuki"

分割代入引数の全体の既定値

分割代入引数の全体の既定値を指定する場合、分割代入構文の後に=と既定値を書きます。引数全体がない場合に、採用されます。

type User = {
  first_name: string;
  last_name: string;
};

const getFullName = ({
  first_name, 
  last_name,
}: Partial<User> = { first_name: "hoge", last_name: "huga"}) => `${last_name} ${first_name}`;

console.log(getFullName()); // => "huga hoge" 

参考記事

【TS】分割代入の代入先でスプレッド構文を使ってみた - Yuki's Tech Blog

分割代入引数 (destructuring assignment parameter) | TypeScript入門『サバイバルTypeScript』

オブジェクト型のオプションプロパティ (optional property) | TypeScript入門『サバイバルTypeScript』