どうも、ささおです。
今回はTypeScriptのはじめ方をハンズオン形式で書いていきます。
Contents
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>
- TypeScriptファイルを作成する
- TypeScriptファイルをJavaScriptファイルへコンパイル(トランスパイル)する
- 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' }
まとめ
TypeScript
- npm info typescriptで最新版を確認
- npm install –save-dev typescript@最新版 でインストール
- tscコマンドでコンパイル
ABOUT ME