てけもぐ Tech 忘備録

typescript で分割代入しながらデフォルト値も与えたい時の書き方

対象読者

typescript 初心者

解決すること

typescript の関数定義で分割代入をしながら既定値を与えるやり方を書いておく。

内容

React を使っていると、props で引数を使わずに分割代入で直に値を変数に入れたい時ってあると思います。こんなやつ。

const MyComponent = ({ a, b }: { a: number; b: number } ) => {
  return (<p> {a+b} </p>)
};

これに既定値を付けたいと思った時には以下の様に。

const MyComponent = ({ a = 0, b = 1 }: { a?: number; b?: number } = {}) => {
  return (<p> {a+b} </p>)
};

引数の所の最後の={}で呼び出し側で引数の省略が出来る様になる。
又は以下の様に書くのもあり。

const aaa1 = ({ a, b }: { a?: number; b?: number } = { a: 1, b: 2 }) => {
  return (<p> {a+b} </p>)
};

こちらに詳しく。

Tags

#typescript