TypeScriptの入門① ~TypeScriptの特徴と静的型付け~

TypeScriptは、JavaScriptを拡張して開発された新しいプログラミング言語です。

TypeScriptの特徴は、TypeScriptで書いたコードをコンパイルするとJavaScriptのコードへと変換されることとあらかじめ変数の型を定義する静的型付けを採用していることにあります。

TypeScript は npm Package Manager (npm) でインストールできます。

詳しくは、こちらのサイトをご確認ください。

以下のコマンドを入力すれば使えるようになります。

$ npm install -g typescript

TypeScriptはJavaScriptにコンパイルされるとは

さて、TypeScriptの説明に戻りますが、下記の図のようにTypeScriptで記載したコードはJavaScriptに変換されます。

まず、任意のディレクトリ(ここではtypeScript-practice)を作成し、そのディレクトリ配下にindex.tsを作成します。

ここでは、TypeScriptで記載したコードはJavaScriptに変換するという流れを理解することが目的なので、コードの意味は深く考えなくても大丈夫です。
index.tsを以下のように記載しましょう。

index.ts

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

TypeScriptでコードを書き、「.ts」という拡張子をつけてファイルを保存したら、「tsc」のコマンドを入力します。

そうすると、tsファイルをjsファイルにコンパイルされ、同じディレクトリ内に同名の.jsファイルが作られます。

$ ls
index.ts
$ tsc index.ts
$ ls
index.js        index.ts

上記のコマンドを入力すると、index.jsが作成され、TypeScriptで記載したコードがJavaScriptのコードに変換されました。

index.js

var hello = 'hello';
console.log(hello);

そして、nodeコマンド(JSファイルを実行するコマンド)で、ファイルを実行すると、きちんと「Hello World!!」と表示されることを確認しましょう。

$ node index.js
Hello World!!

この一連の流れがTypeScriptからJavaSriptにコンパイルされることを表します。

静的型付け

JavaScriptにコンパイルされる静的型システムが付いたJavaScriptの上位集合と言われます。 静的型付けを使用することで、コードが実行される前に型のエラーを検出できるため、バグを早期に発見しやすくなるということが特徴です。

typeScript

//a: number：aはnumber型であることを示しています。
//b: number：bもnumber型であることを示しています。
//sum( ... ): number：関数sumの戻り値がnumber型であることを示しています。
function sum(a: number, b: number): number {
  return a + b;
}

このように型を明示的に指定することで、間違った型の引数を渡すとコンパイルエラーになるため、ランタイムエラーのリスクを減少させることができます。

TypeScriptの静的型付けは、コードのバグを早期に発見し、コードの可読性と保守性を向上させるための強力なツールです。コンパイル時に型の安全性をチェックすることで、ランタイムエラーのリスクを大幅に減少させることができます。