TypeScript

【TypeScript基本のキ】TypeScriptってなに？超わかりやすく解説！

  /

Hello World🌍

今回はフロントエンド開発にはかかせないTypeScriptについて解説していきます。
TypeScriptの概要やメリット、JavaScriptとのコード比較を行ないます。

最後にTypeScriptで「Hello World!」を出力してみましょう✊

JavaScript習得済みであることを前提に話を進めていきます。

Contents
  1. TypeScriptはJavaScriptに型を付けられる言語
  2. JavaScriptとTypeScriptのコードを比較
  3. TypeScriptを体験してみよう
  4. おわりに

TypeScriptはJavaScriptに型を付けられる言語

TypeScript（タイプスクリプト）はMicroSoft社が開発した、JavaScriptにデータ型を付けられる言語です。

TypeScriptのコード、それ自体では実行ができないので、TypeScriptコンパイラーが実行可能なJavaScriptに変換します。

データ型とはデータの種類のこと

データ型とはデータの種類のことです。

代表的なものに「文字列型（string）」「数値型（number）」「真偽値型（boolean）」といったプリミティブ型があります。

TypeScriptはコードを書いていく上で、変数や関数の引数・戻り値等に対し、上記のようなデータの種類を明示的に指定していきます。

例えば 、変数greetingに文字列値 ‘Hello World!’ を格納する場合はこのように記述します。

let greeting: string = 'Hello World!';


「この変数の値は文字列（string）型です！文字列型の値しか受け付けないよ！」と定義しているのです。

JavaScriptは動的型付け言語

JavaScriptは実行したタイミングでデータ型が自動的に決まる動的型付け言語です。

文字列を格納した変数に対して数値を入れることができる上、型付けをしなくて良い分コード量が少なくて済む、といったメリットがあります。

いっけん柔軟で便利に思えますが、以下のようなデメリットがあります。

JavaScriptのデメリット❌
  • 意図しないデータ型に変換される・してしまう危険性がある
  • 実行するまでエラーに気づかない
  • エラー解決に莫大な時間を費やす可能性がある

TypeScriptは静的型付け言語

TypeScriptはコンパイルしたタイミングでデータ型が決まる静的型付け言語です。

コンパイルとはソースコードをコンピューターが実行できる機械語に変換することを指します。

厳密にはTypeScriptコンパイラーによって、TypeScriptは実行可能なJavaScriptに変換されるため、トランスパイルという処理が施されます。

トランスパイルとは、あるソースコードを実行可能なソースコードに変換することです。
言い方を変えると、ソースコードからソースコードへのコンパイルとなります。

静的型付け言語は型付けする分、コードが長くなってしまうというデメリットはありますが、以下のような素晴らしいメリットがあります。

TypeScriptのメリット⭕️
  • コードを書いている時点でエラーを吐き出してくれ、開発効率を上げてくれる
  • 型を定義するため、JavaScriptのゆるい仕様を堅牢にしてくれる
  • 何にどんなデータが入っているのか理解しやすくなるのでコードの可読性に優れる

良さげ🙄

JavaScriptとTypeScriptのコードを比較

ここではJavaScriptとTypeScriptそれぞれの挙動やコードを比較していきます。

JavaScriptのコード

JavaScriptでは以下のような記述が可能です。

let greeting = 'Hello World!';
console.log(greeting); // Hello World!

greeting = 70000;
console.log(greeting); // 70000

上記のコードはJavaScriptの仕様上問題なく実行できます。

JavaScriptは文字列を格納した変数に数値などを再代入することができますね。

柔軟な仕様ですが、バグやエラーの温床になり、開発効率も悪くなってしまいます。
エラー解決に莫大な時間を費やすことにもなるでしょう。

JavaScriptはエラーがあっても実行するまでそれに気づけません。

TypeScriptのコード

先程のJavaScriptのコードをTypeScriptで書いてみます。

let greeting: string = 'Hello World!';
console.log(greeting); // Hello World!

greeting = 70000; // エラー
console.log(greeting); // エラー

TypeScriptでは上記のように、あらかじめ「変数greetingの値には文字列型（string）が入ります！それ以外受け付けません！」と型を定義します。

続いて、変数greetingに数値を再代入してみましょう。

let greeting: string = 'Hello World!';
console.log(greeting); // Hello World!

greeting = 70000; // エラー
console.log(greeting); // エラー

赤線部分がエラーです。
この赤線にカーソルを持っていくと上記のようなウィンドウが表示されます。

今回の場合、「数値型の値は文字列型の変数に割り当てはできないよ！」と怒ってくれています。

注意点として、このようにエラーを吐いてはくれますが、実行可能なJavaScriptに変換されてしまうので、普通に実行はできてしまいます。
上記例の場合、再代入した値(70000)は出力されます。

ただ、環境構築次第で実行できないようにすることは可能です。

TypeScirptはReactやVueといったJSフレームワークを用いた開発と相性が良く、環境構築時にTypeScriptを導入することができます。
そういった環境であれば、自動的にコード記述エラーの際は実行を止めてくれます。

環境構築は次回以降記事にしていきます。

TypeScriptを体験してみよう

実際にTypeScriptを書いてみましょう！

以下のボタンからブラウザ上でTypeScriptを体験できるページへ飛ぶことができます。

TypeScript Playgroundのページへ

試しに以下のサンプルコードを書いてみましょう。「文字列型（string）」「数値型（number）」「真偽値型（boolean）」の例です。

// string型
let greeting: string = 'Hello World!';
console.log(greeting);
// number型
let sum: number = 1 + 1;
console.log(sum);
// boolean型
let flag: boolean = true;
console.log(flag);

以下はTypeScript Playgroundのキャプチャです。
左側がTypeScript、右側がコンパイル後のJavaScriptです。

「Log」タブで「Hello World!」が出力されていることを確認できます。

定義した型に対して別の型を入れ、エラー（赤線）が出ることも確認してみると良いでしょう。

おわりに

例文のTypeScriptに触れただけではあまりメリットは感じられないかもしれません。学習コストも少しかかります。

しかし、ReactやVueといったJSフレームワークでの開発になると可読性や保守性に優れ、大変有用です。

次回以降、環境構築方法や型の種類・書き方について記事にしていきます。

ではまた✋

関連記事