TypeScriptのはじめ方

どうも、ささおです。

今回はTypeScriptのはじめ方をハンズオン形式で書いていきます。

TypeScriptをインストール

まずは作業用ディレクトリを作成して、
作業用ディレクトリに移動してください。

$ mkdir StartTypeScript
$ cd StartTypeScript

次にインストールするTypeScriptのバージョンを確認します。

$ npm info typescript

すると、最新のバージョンが確認できます。

次に、TypeScriptをインストールしていきます。
先ほど確認した最新バージョンを指定します。

$ npm install --save-dev typescript@3.8.3

–save-devをつけるとローカルインストールかつpackage.json の devDependencies に追記されるようです。下記の記事がとてもわかりやすいです
勉強メモ/npmの使い方(node.js=v0.11.16, npm=2.3.0, 2015-03時点)

これでTypeScriptのインストールが完了しました。

TypeScriptを使う

次に実際にTypeScriptを使っていきます。

TypeScriptファイルを実行するには以下の流れを踏みます
<div class=”concept-box1″><p>

1. TypeScriptファイルを作成する
2. TypeScriptファイルをJavaScriptファイルへコンパイル（トランスパイル）する
3. JavaScriptファイルを実行する

</p></div>

TypeScriptファイルを作成する

hello.tsというファイルを作成し、以下のコードを書いてください。

let message: string = 'Hello World'; 
console.log({ message });

TypeScriptファイルをコンパイル（トランスパイル）する

次に作成したファイルをコンパイルします。
tscコマンドを使うことでコンパイルできます。
tscコマンドは node_modules/.bin内にあるので、./node_modules/.bin/tscで実行します。

$ ./node_modules/.bin/tsc hello.ts

または、 npxを使っても大丈夫です。 

$ npx tsc hello.ts

コンパイルが完了すると、hello.jsというファイルが作成されているはずです。
中を確認しましょう。

var message = 'Hello World';
console.log({ message: message });

このように見慣れたJavaScriptのコードが確認できるはずです。

JavaScriptファイルを実行する

nodeコマンドでJavaScriptファイルを実行します。

$ node hello.js

するとこのように出力されるはずです。

{ message: 'Hello World' }

 

まとめ