【TypeScript】引数を任意で設定できる関数の作り方

こんにちは。
株式会社HITOSUKEのシステム開発Unitでシステム開発を担当しているTです。
今回はTypeScriptで引数を取るか取らないかを任意で設定できる関数の作り方を紹介します。

この記事で紹介する内容はすでに中長期的にシステムを運用していて、ほかの機能への影響を最小限にすることが最大の利点だと考えています。

実装

さっそくcodepenで実装とその結果をご覧ください。
今回の実装は、動作を分かりやすく理解してもらうためにシンプルな構造で作っています。

検索窓に文字列が入力されたか否かで、「検索」ボタンをクリックした後によばれるisArg()の処理が変わります。
入力があった場合は、showStr()に引数を渡して呼び出し表示しますが、入力が無い場合はshowStr()に引数を渡さずに、固定の文字列を表示する機能になっています。

htmlファイル

<input type="text" id="searchBox">
<input type="button" onclick="isArg()" value="検索">
<div id="arg"></div>

tsファイル

function isArg() {
  let str = document.getElementById("searchBox").value;
  if(str) {
    showStr(str);
  } else {
    showStr();
  }
}
function showStr(arg?: string) {
  let str = document.getElementById("arg");
  if(arg) {
    str.textContent = arg;
  } else {
    str.textContent = "no argument.";
  }
}

今回のポイントは下記の記述です。

function showStr(arg?: string) {

引数の引数名に?を付けることで、引数を渡すことを省くことができます。
この記述をすることによって、4行目と6行目の記述で引数を記述しているものとしていないものがあっても、問題なくコンパイルすることができます。

この記述の方法を活用すれば、関数を呼び出すときに引数が記述されていなくてもコンパイルエラーが起きることはありません。
しかし、引数があることを前提で関数が記述されていたら、関数を呼び出すときに引数がなかったら重大な欠陥になります。

初期の段階では、引数（変数）に?を使用しての実装はできるだけ避けて、TypeScriptの利点を最大限生かせる方法でシステムを実装しましょう。

さいごに

もし、HITOSUKEのシステム開発Unitの知りたいことや興味・関心がありましたらぜひコメントください！

※HITOSUKEでは一緒に事業を盛り立ててくれる仲間を募集しています！

少しでも気になってくれた方は、こちらをご覧ください。

HITOSUKE採用サイト | フランチャイズのプロフェッショナル集団