はじめに
関数の引数の扱いについて、整理しました。
位置引数
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が勉強になりました。
基礎だけを学習していても、実践的なスキルは身に付かないと考えていましたが、実践を通して疎かになっていた基礎の土台を埋めていくことの重要性を感じました。
参考