TypeScript 型をつけることによるメリットを実例で紹介

2020年9月6日

引き続きTypeScriptについてご紹介です。

今回はTypeScriptによって型がつくことでのメリットを一つ、実例ベースで書きます。

以下のようなオブジェクトから、codeの値を取得する処理を書きたいとします。

{code: '0001', name: 'AAA'}

オブジェクトには、codeとnameという二つのプロパティがあり、どちらもstringです。

codeを取得するための処理を書く前に、すでにそのような関数が用意されているかをチェックしたところ、以下のような関数を発見しました。

const getCode = (data) => {
	if(data.codes === undefined) return ''
  return data.codes[0]
}

名前もgetCodeなので、特に中の実装もみることもなく使ってみたところ、想定しない動きになってしまいました。

よくよく実装をみると、このgetCodeでは以下のようなオブジェクトを引数にとることを想定していたようです。

{codes: ['001', '002']}

このように、一見再利用できそうな関数でも、引数のdataが具体的にどのような構造のオブジェクトを想定しているのかは、実装を読まないと判断できません。

しかし、TypeScriptを使うと、この問題を解消できます。

const getCode = (data: {codes: string[]}) => {
	if(data.codes === undefined) return ''
  return data.codes[0]
}

const data = {code: '0001', name: 'AAA'}
const result = getCode(data) //getCodeの引数の型が異なるのでコンパイルエラー
console.log(result)

getCodeの引数dataに型をつけています。

{code: string[]} の部分です。

これは、「dataという引数はcodeというプロパティを持っており、その値はstringの配列です」、ということを示しています。

このようにすることで、getCode関数を使う人も、引数の構造が明確にわかるので、間違って使用することや間違って修正することもなくります。

さらに、上の例では、getCode(data)と間違った構造のオブジェクトを引数に渡して実行していますが、dataの構造が想定しているものと違うため、コンパイル時にエラーになります。

実行前にエラーになって間違っていることを教えてくれるので、バグも減ります。