TypeScriptのはじめ方｜プログラミング初心者のプロへの道

どうも、ささおです。

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

Contents

TypeScriptをインストール

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

$ mkdir StartTypeScript
$ cd StartTypeScript

1 2	$ mkdir StartTypeScript $ cd StartTypeScript

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

$ npm info typescript

1	$ npm info typescript

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

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

$ npm install --save-dev typescript@3.8.3

1	$ 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ファイルを実行するには以下の流れを踏みます
<div class=”concept-box1″><p>

</p></div>

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

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

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

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

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

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

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

$ npx tsc hello.ts

1	$ npx tsc hello.ts

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

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

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

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

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

$ node hello.js

1	$ node hello.js

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

{ message: 'Hello World' }

1	{ message: 'Hello World' }

TypeScript