TypeScript

【TypeScript】 型定義入門

マナビト
マナビト
こんにちはマナビトです。
普段はフロントエンドエンジニアとしてJavaScript/TypeScript/Aangular/GraphQLを
メインに開発業務を行なっています。

本日はTypeScriptの型定義について取り上げていきたいと思います。

1. TypeScriptとは?

TypeScriptとはMicrosoft社によって開発され、JavaScriptを拡張して作られたプログラミング言語(JavaScriptの代替言語)です。

TypeScriptで記載すると、コンパウルされJavaScriptのスクリプトが生成されます。こうして出来たJavaScriptのスクリプトをWebブラウザで使用するという流れになります。TypeScriptで記載されたものは全てブラウザ上ではJavaScriptになります。

TypeScriptはJavaScriptの仕様を拡張したものになっているので、JavaScriptで記載したものはTypeScriptとしても有効です。JavaScriptを使用したことがあれば、TypeScriptの学習コストは低いと言えます。

2. TypeScriptはなぜ必要なのか?

TypeScriptのメリットの一つに型のチェックが厳格であるという事が言えます。

JavaScriptの場合、格納したデータの型が曖昧でも開発作業を進めることができる為、エラーに気づいた時にはかなり作業が進んでしまっていて、エラー原因の特定に時間を要するなんてことがあります。

その点、TypeScriptは型定義が厳格な為、コンパウル時にすぐにエラーとして知らせてくれます。最初はエラーの多さに戸惑いましたが、慣れてくると、ソースコードをたどっていけば各データに何を格納しているのかが分かり、かなり便利であることに気がつきました。

3. TypeScriptの型定義の種類

TypeScriptで指定できる型は以下のようなものがあります。

  • string : 文字列型
  • number : 数値型
  • boolean : 真偽型
  • any : 任意の型

■ string型

string型はシングルクォート('')で囲まれた、文字列を代入することができます。

let date: string = 'hoge';
date = '130' //TypeScriptのエラーが表示されます。

■ number型

number型は、数値を代入することができます。

let date: number = 130;
date = 'hoge'; //TypeScriptエラーが表示されます。

■ boolean型

boolean型はtrueもしくはfalseのどちらかを代入することができます。

let date: boolean = true;
date = 'hoge' //TypeScriptエラーが表示されます。

■ any型

any型は文字通りどんな値でも代入することができる型です。どの様な値でも代入することが出来るため、便利である反面TypeScriptのエラーチェックが機能しません。型チェックはアプリの意図しない挙動に対して早期に発見できることを目的としたため、その目的から反するany型は特別な理由がない限り、使わない方が良いかと思います。

let date: any = 130;
date = 'hoge' //別の値を代入してもエラーにはなりません。

以上です。お読み頂きありがとうございました。

【 参考サイト 】