初めてのTypeScript入門編、チュートリアル的にとりあえず動かしてみる。

この記事はTypeScriptに興味があるけど、何から始めていいのかわからない。

そんな時に、「とりあえず動かす」ことを目的とした入門編です。

私自身初めてTypeScriptを触った時の記事です、備忘録みたいな。

実験環境
事前に必要なこと
TypeScript導入(インストール)
Hello world
ちょっと実践編
自動コンパイル
自動コンパイル実行
まとめ

実験環境

下記の環境で実験しました。

Windows 10
npm 6.6.0
TypeScript 3.2.4

事前に必要なこと

npmが必要です、事前にインストールしてください。

TypeScript用のエディタがあれば便利かもしれません、簡単な動作確認なので私はメモ帳で書きました。

TypeScript導入(インストール)

TypeScriptコンパイラ

コマンドプロンプトを起動して下記のコマンドを実行。

>npm install -g typescript

インストール確認

インストールされているか確認します、Versionが表示されればOK。

>tsc -v
Version 3.2.4

Hello world

実際に簡単なTypeScriptを書いてコンパイルして実行してみましょう。

作業ディレクトリ作成

TypsScript(.ts)プログラムを置くディレクトリを作成します。

>mkdir tsc_test

プログラム作成

作成したディレクトリ(tsc_test)の中に下記のTypeScriptプログラムを配置します。

hello.ts

const message:string = "Hello! World!";
console.log(message);

コンパイル

hello.tsプログラムがあるディレクトリで下記のコマンドを実行します。

>tsc hello.ts

コンパイルがエラー無く終わると、hello.jsというJavaScriptファイルができています。

TypeScriptのhello.tsからJavaScriptのhello.jsが作成されました。

実行

コンパイルして出来上がったhello.jsを実行します。

今回はnodeで実行します。

>node hello.js
Hello! World!

「Hello! World!」が表示されたでしょうか？

ここまでがTypeScriptの導入・作成・コンパイル・実行のとりあえずの流れです。

まぁ、これくらいならJavaScript直接書いたほうが楽でしょうけど。

ただ、基本的な流れは押さえられたと思います。

TypeScriptでコードを書いて、コンパイルでJavaScriptにして実行です。

ちょっと実践編

初めてのTypeScript入門編としてチュートリアル的な簡単な流れを説明しました。

しかし、このままではTypeScriptコンパイル必要なのか、めんどくせー。

「JavaScript直接書いたほうが早くない？」「動かせたけど実践で使えるの？」なんて声が聞こえてきそうです。

私もまだ始めたばかりの初心者なので詳しいことは難しいですが、もうちょっと実践で使えそうなことを書きます。

自動コンパイル

やっぱり気になるのが、わざわざ毎回コンパイルしないといけないことです。

めんどくさいので、tsファイルを編集したら自動でjsファイルにコンパイルする設定をします。

package.jsonの作成

TypeScriptのプロジェクトフォルダに移動して下記のコマンドを実行します。

-yオプションを付けるとめんどくさい問い合わせをなしにできます。

>npm init -y

実行するとpackage.jsonファイルが作成されます。

{
  "name": "tsc_test",
  "version": "1.0.0",
  "description": "",
  "main": "hello.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

これを下記のように変更します。

{
  "name": "tsc_test",
  "version": "1.0.0",
  "description": "",
  "main": "hello.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "tsc",
    "watch": "tsc -w"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

tsconfig.jsonの作成

TypeScriptのプロジェクトフォルダで下記のコマンドを実行します。

>tsc --init
message TS6071: Successfully created a tsconfig.json file.

ごちゃごちゃ書かれたtsconfig.jsonができますが、ほとんどコメントなので必要なものだけ残します。

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir": "./dist/js",
    "rootDir": "./src/ts",
    "strict": true,
    "esModuleInterop": true
  }
}

outDirはJavaScriptを出力するディレクトリ、rootDirはTypeScriptを配置するディレクトリです。

ディレクトリ構成を整える

プロジェクトディレクトリの下にTypeScriptやらJavaScriptなどを、ずらずらと並べてはエレガントではありません。

ディレクトリ構成を整えます。

tsc_test
├dist/
│└js/
├src/
│└ts/
│ └hello.ts
├package.json
└tsconfig.json

src/tsの下にTypeScriptの.tsファイルを作成します。

コンパイル後はdist/jsの下に.jsファイルができます。

自動コンパイル実行

プロジェクトフォルダ(package.json)がある場所で下記のコマンドを実行します。

>npm run watch

tsc -wが実行されます。

これでsrc/tsのhello.tsがコンパイルされ、dist/jsにhello.jsが作成されます。

tsc -wが実行されている間はTypeScriptのhello.tsが変更されると自動的にhello.jsが更新されます。

終了する時は「Ctrl + c」を押すと止まります。

まとめ

初めてのTypeScript入門編でチュートリアル的に初歩的な内容をまとめました。

しかし、旅は始まったばかりです、やっとTypeScriptの世界に1歩踏み入れた段階です。

いや、「ナイフとランプ鞄に詰め込んだ」だけかもしれません。

共に頑張っていきましょう！