🍪

TypeScriptで型注釈を使うとき

2023/09/29に公開

先日投稿された、しょーた氏の記事を読みました。
https://zenn.dev/collabostyle/articles/aba2497a5c3370

TypeScript は型注釈と型推論の2種類があり、
今回の age は型推論で number 型となります。

TypeScriptが明確にJavaScriptと異なる内容の1つに、
「型を指定することができる」が挙げられると思います。

const value:string = 'もうすぐ10月だね!'; // こんなの

上記は型注釈をした場合です。
JavaScriptですと指定ができないため、代入した値から推測する必要があります。

TypeScriptでは変数宣言するときに、その変数にどんな値が代入可能かを指定できます。その指定のことを型注釈(type annotation; 型アノテーション)と言います。

https://typescriptbook.jp/reference/values-types-variables/type-annotation

この型注釈が「なぜ必要なのか」を上手く自分の中で
答えを見つけることができなかったので、今回少し深掘りしてみました。

「なぜ必要なのか?」と「なぜ」思った?

たとえば以下の例です。

const str = '';
const num = 0;
const bool = true;

右側に代入されている値を見れば、
なんの値(なんの型)が入っているかは一目瞭然です。

const str:string = '';
const num:number = 0;
const bool:boolean = true;

このように書くと、冗長じゃない?🤔と感じた自分がいます、、
※実際、このような型注釈をつける場面は少なそう

なので、型注釈の意義を(一旦ぐぐらずに)ちょっと考えてみました。

考えてみる

const result = userObj.func();

こういった関数の戻り値を変数に代入するときに、

const result:User  = userObj.func();

型注釈されていると
一目でその関数が何を返すのか分かるので、便利!

function func (value: string): string {
   return `入力した値は${value}です。`
}

関数の引数や戻り値も明示できるので、
こういったところで型を指定できるのもとても便利!

また、型注釈使用していれば
コンパイルする時に予期しない型の値を
代入してしまったき気付くことができます。
便利ですよね😉

ここらでぐぐってみると、以下の記事を見つけました。

https://typescriptbook.jp/reference/values-types-variables/object/type-annotation-of-objects

オブジェクトの型注釈では、
推奨する書き方もあるのですね🧐

型の定義についてプロジェクトごとに
それぞれ違いがあると思いますが、
「なぜ型が必要なのか」を改めて考えるきっかけになりました。

忘れません🫡

コラボスタイル Developers

Discussion