TypeScriptを使って静的型付けの良さが分かってきた

最近、Node.js(Typescript) での開発に慣れてきて、静的型付けにハマっているh.iidaです。
普段は主にPHPで開発をしています。

Typescript は「静的型付け」の言語です。
例えば、以下のようにコードを書くと怒られます。

<strong>const</strong> foobar = 12345;

JSON.parse(foobar);

JSON.parse() というメソッドの第一引数は、string型と決められているからです。
実際に、私のVSCodeでは書いた時点で以下のように表示されます。

このように定義されている型と違う変数を渡してしまったときに、
すぐに間違いに気づけるというのは大変効率が良いです。

自分でメソッドを作る際にも、上記を利用して誤りを防ぐことができます。
その際、インターフェースを作成すると便利です。

例えば、私がユーザー情報の取得に関するプログラムの作成を命じられたとします。
ユーザー情報のインターフェースは以下のように定義されていました。

interface UserInfoInterface {
    id: string;         // ユーザーＩＤ
    firstName: string;  // 苗字
    lastName: string;   // 名前
}

私はまず、名前を取得するメソッドを作成しました。

const getUserName = (user: UserInfoInterface): string => {<br>    return user.name;<br>};

もうお気づきだと思いますが、上のコードにはおかしいところがあります。そう、ユーザー情報には “name” というプロパティがありません。。実際、以下のように怒られてしまいました。

また、実際にユーザー名を取得する際は以下のように呼び出すことになると思いますが、

/**<br> * ユーザー名を取得する（正しいバージョン）<br> */<br>const getUserName = (user: UserInfoInterface): string => {<br>    return user.firstName + user.lastName;<br>};<br><br>// クラウド太郎さんのユーザー情報<br>const user: UserInfoInterface = {<br>    id: '12345',<br>    firstName: '太郎',<br>    lastName: 'クラウド',<br>}<br><br>const userName = getUserName(user);<br>console.log(userName); // クラウド太郎

このとき、getUserNameに渡す引数がおかしかったりしたら、
すぐに気付くことができます。

めちゃくちゃに怒られていますね…。

上記で紹介したのは簡単な例でしたが、実際の業務ではユーザー情報が複雑だったり、
また変換処理を行わなければならなかったりする場合が多いと思います。

その際、どこかで型がおかしくなってしまったり、または null が混じっている場合に
処理の途中でエラーが発生してしまうことがよくあります。

バグというのは自分の力だけだと、どんなに気を付けても生まれてしまうものだと思うので、
便利なツールなども上手く使って少しでも減らしていきたいですね。