MacでTypeScriptをインストールしてコンパイルを試す

  • TypeScriptとは
  • Node.jsのインストール
  • TypeScriptのインストール
  • TypeScriptでコンパイルを試す

TypeScriptとは

TypeScriptを一言で説明すると、独自の構文からJavaScriptにコンパイルするためのツールです。JavaScriptとの大きな違いは型定義が必要な点です。

https://www.typescriptlang.org

JavaScriptは型を定義しないで開発できますが、開発する上で多くの弊害があります。例えば、ソースコードを読む時に何の変数かが一目で分かりませんし、その変数に間違った型を定義するとプログラムが実行されるまで気付くことができません。

TypeScriptでは独自の構文からJavaScriptを生成することで、それらの欠点を補います。JavaScriptの可読性を向上したり、定義を強制したり、型エラーを実行前に検知したりすることで開発生産性を向上します。TypeScriptはJavaScriptのコードを綺麗に保つ上で今後重宝されていくと思います。

Node.jsのインストール

以下のコマンドでNode.jsの推奨バージョンをインストールします。推奨バージョンは、こちらから確認できます。

$ brew install nodebrew
# nodebrew installで"Failed to create the file"のエラーが出た場合は以下のコマンドを実行
$ mkdir -p .nodebrew/src
# 推奨バージョンのインストール
$ nodebrew install-binary v16.13.1
Fetching: https://nodejs.org/dist/v16.13.1/node-v16.13.1-darwin-x64.tar.gz
########################################################################################################################## 100.0%
Installed successfully

インストールが完了したら、以下のコマンドでパスを通します。毎回パスを通すのが面倒な方は~/.bash_profileに登録しておくと便利です。

$ nodebrew use v16.13.1
use v16.13.1
$ export PATH=$HOME/.nodebrew/current/bin:$PATH
$ node -v
v16.13.1

TypeScriptのインストール

TypeScriptをプロジェクトで管理するため、ディレクトリを作成して以下のコマンドでローカルインストールを実行します。

$ mkdir getting-start
$ cd getting-start/
$ npm install --save-dev typescript tslint @types/node

TypeScriptでコンパイルを試す

TypeScriptでコンパイルし、型定義のエラーを出力するところまで実施します。

String型で定義した変数に文字列を代入するだけのindex.tsを作成します。なお、TypeScriptの拡張子はtsです。

let message: string
message = "Hello World"

以下のコマンドでコンパイルします。コンパイルするときには、コンパイルオプションを指定する”tsconfig.json”が必要です。今回は何も指定せずにコンパイルするので、中身を空にしています。

$ touch tsconfig.json
$ ./node_modules/.bin/tsc

index.tsファイルと同じディレクトリにindex.jsファイルが生成されています。中身を確認すると、JavaScriptに変換されていることがわかります。

$ cat index.js
var message;
message = "Hello World";

JavaScriptではmessage変数の型が定義されていませんので、messageに数値を代入してもJavaScriptでは問題ありません。しかしTypeScriptでは型を定義しており、数値を代入することができません。この挙動を確認してみます。

index.tsファイルを以下のように編集します。

let message: string
message = 1

再度コンパイルすると、messageに異なる型を代入しているのでエラーが出力されます。

$ ./node_modules/.bin/tsc
index.ts:2:1 - error TS2322: Type 'number' is not assignable to type 'string'.

2 message = 1
  ~~~~~~~

Found 1 error.

本記事では以上とします。