0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

TypeScriptで関数の引数をひとつに絞る

Last updated at Posted at 2024-09-21

はじめに

関数の引数の扱いについて、整理しました。

位置引数

x, y, z のように複数の引数を並べると、視認性が悪く読みにくいです。

TypeScriptで型も管理するので、引数をもっとシンプルにしたいです。

function baseFunc(x, y, z) {
  console.log(x, y, z)
}

Options Objectパターン

位置引数とは異なり、Options Objectパターンでは、複数の引数を1つのオブジェクトにまとめて渡すことで、可読性が向上します。

例えば、次のようにオブジェクト型を定義し、1つのオブジェクトとして引数を渡すと、順番に依存せずに引数を扱えるので、整理された形でコードが書けます。

type Options = {
  x: number;
  y: number;
  z: number;
}

function func1(options: Options) {
  console.log(options.x, options.y, options.z)
}

func1({
  x: 1,
  y: 2,
  z: 3
})

分割代入引数

さらに、分割代入引数で console.log(options.x) といった書き方をシンプルにできます。以下のように書くことで、直接プロパティを参照できるので、コードの見通しが良くなります。

function func2({ x, y, z }: Options) {
  console.log(x, y, z);
}

func2({
  x: 1,
  y: 2,
  z: 3,
});

おわりに

サバイバルTypeScriptが勉強になりました。

基礎だけを学習していても、実践的なスキルは身に付かないと考えていましたが、実践を通して疎かになっていた基礎の土台を埋めていくことの重要性を感じました。

参考

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?