🍪

TypeScriptで型注釈を使うとき

2023/09/29に公開

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

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

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

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

TypeScriptでは変数宣言するときに、その変数にどんな値が代入可能かを指定できます。その指定のことを型注釈(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}です。`
}

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

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

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

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

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

忘れません🫡

「ワークスタイルの未来を切り拓く」を理念に掲げ、リアルとデジタルの2つの働く場に向けた事業展開に留まらず、自社が率先して新しいワークスタイルに挑戦し、発信を行うことでワークスタイルの未来を切り拓いていきます。