[Typescript] 開発環境構築入門

Typescriptとは

Typescriptとは、マイクロソフト謹製のオープンソースのプログラミング言語です。AltJSと呼ばれる言語の一種で、TypescriptをコンパイルすることでJavascriptのコードに変換できます。Javascriptのスーパーセット(上位互換)であり、既存のJavascriptがそのままTypescriptとして扱えるのはもちろん、静的な型付け機能や、クラス・継承・インターフェースといったオブジェクト指向に由来する機能などが利用可能です。

Typescriptがマイクロソフト製のプログラミング言語なので、Visual Studio (Code)を開発環境に用いるのが便利です。今回は Visual Studio Code で Typescriptのコンパイルから実行までを行える環境を構築していきます。以下の構築手順は Windows, Mac で動作を確認しています。VSCode のおかげでクロスプラットフォームで同じ環境を構築できます。

開発環境の構築

Typescriptの開発環境の構築は以下の手順で進めます。

• • Node.js(npm)のインストール
  • Typescriptコンパイラ(tsc)の入手
  • プロジェクトの作成とtsconfig.json設定

Webpackを合わせて使う場合は、以下の記事を参考にしてください。

Typescript 3.x と Webpack 4.x を合わせて使う方法まとめ │ Web備忘録

Node.js(npm)のインストール

Typescriptの開発を始めるには何よりもまず、コンパイラが必要になるのですが、これは npm (Node.js のパッケージ管理ツール)から入手する必要があります。npm は Node.js をインストールすると同時にインストールされるので、まずは Node.js をインストールしましょう。

クライアントサイドの開発環境構築には様々なモジュールを利用しますが、これらのパッケージ管理はほぼ npm を利用することになるのでインストールしておくとよいでしょう。

Node.js はすべてデフォルト設定のままインストールすればよいです。インストールが完了すれば、PowerShellないしターミナルから下記コマンドを実行してみましょう。バージョン情報が正しく表示されればインストールは完了です。

node -v

npm -v

プロジェクト構成

 app
├── dist
│   └── index.js
├── src
│   └── index.ts
├── node_modules
│   └── 色々 ...
├── index.html
├── package.json
└── tsconfig.json

このようなプロジェクト構成を考えます。

プロジェクトの作成

まずは適当なプロジェクトディレクトリを作成し、package.jsonファイルを生成します。ディレクトリに移動して以下のコマンドを実行すれば、雛形のファイルが生成されます。これを scripts にコンパイル用のスクリプトに追加しておきます。これの解説は後述します。

npm init -y

package.json

(略)..
"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "build": "tsc",
  "watch": "tsc -w"
},
(略)..

Typescriptのインストール

npm install typescript --save-dev

上記コマンドで Typescript をインストールします。 -g コマンドをつけるとグローバルにインストールされますが、ここでは –save-dev コマンドをつけてプロジェクトローカルにインストールします。

インストールが完了すると　./node_modules/.bin/tsc が追加されるので、これを利用してコンパイルすることになります。

tsconfig.jsonの作成

プロジェクトルートに tsconfig.json ファイルを作成し、次のように修正します。

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es6",
        "noImplicitAny": false,
        "sourceMap": false,
        "outDir": "./dist",
        "rootDir": "./src"
    }
}

これでコンパイル実行時に、./src以下のすべての .tsファイルをコンパイルし ./dist以下に .jsファイルを生成します。生成される Javascript は ECMAScript6形式、モジュール形式は CommonJS を使います .. というような意味になります。

プロジェクトルートに移動して tsc コマンドを実行すれば、この tsconfig.json ファイルのコンパイル情報でコンパイルしてくれます。

typescript を書いてみる

srcフォルダの直下に、index.ts ファイルを作成します。作成したらコードを書いてみます。

interface Person {
    firstName: string;
    lastName: string;
}

function greeter(person: Person) {
    return "Hello, " + person.firstName + " " + person.lastName;
}

let user = { firstName: "Jane", lastName: "User" };

document.body.innerHTML = greeter(user);

コードは typescript の公式ページを参考にしています。ひとまずこれをコンパイルしてみましょう。

tsc(コンパイル)の実行

npm run build

上のコマンドを実行すれば、Typescript コンパイルが実行されます。以下その解説です。

実行されるのは以下に追加されたコマンドです。

package.json

(略)..
"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "build": "tsc",
  "watch": "tsc -w"
},
(略)..

package.json に追加したスクリプトを実行するには以下のコマンドで実行できます。

npm run [script名]

ここでは “build” スクリプトを実行します。

npm run build

すると “tsc”コマンドが実行されます。Typescriptはプロジェクトローカルにインストールしていますが、npm run で実行すると、プロジェクトローカルのモジュールが参照されることになります。

コンパイルの実行時には、作成した tsconfig.json の内容に従ってコンパイルされる事になります。

コンパイルされたファイルを見てみる

srcフォルダ以下のすべてのtsファイルがコンパイルされ、その生成物がdistフォルダ以下に出力されます。先ほど作成した src/index.ts ファイルがコンパイルされた結果、dist/index.js ファイルが生成されているはずです。

function greeter(person) {
    return "Hello, " + person.firstName + " " + person.lastName;
}
let user = { firstName: "Jane", lastName: "User" };
document.body.innerHTML = greeter(user);

interface や 型宣言がなくなり Javascript のコードに変換されているのが確認できます。

Typescript ファイルの変更監視

npm run watch

“tsc -w” コマンドを実行すればソースファイルの変更監視し、自動でコンパイルを実行してくれます。なので開発中はこれを実行してほったらかしにしておけば、いちいちビルドコマンドを実行しなくてもよくなります。