【TypeScript】TypeScriptのインストールと各種環境設定

現在仕事でnode.jsを使用しており、「勉強も兼ねてTypeScriptを導入しよう！」と思い導入したので、その際のメモ。¹

前提

• 開発環境はVisual Studio Code。(visual Studioでも出来ますが)
• node.jsとnpmを事前にインストールしておく。(どちらもnode.jsのインストーラからインストール可能)

参考ページ

• 【超入門】TypeScriptをプロジェクト内にインストールして動かしてみる - Qiita
• TypeScript in 5 minutes
• TypeScriptを簡単に動かす環境構築

packege.jsonの作成

1. ターミナルソフト(「コマンドプロンプト」とか)を起動。
2. package.jsonを作成したいフォルダ(アプリケーションのルートフォルダなど)にカレントフォルダを移動。
3. 下記コマンドを実行。

> npm init

• ここでは「npm init」の詳細は割愛。
• 質問事項については、名前以外は「yes」にしておいてOK。(後で変更可能)

TypeScriptのインストール

• ターミナルソフトで、インストール先フォルダをカレントフォルダにする。(package.jsonと同じで良いなら不要)
• 下記コマンドを実行。

> npm install --g typescript

テストソースの作成

カレントフォルダに「test.ts」というファイルを作成し、下記ソースを書く。

class Student {
    fullName: string;
    constructor(public firstName: string, public middleInitial: string, public lastName: string) {
        this.fullName = firstName + " " + middleInitial + " " + lastName;
        console.log(this.fullName);
    }
}
  
let student = new Student('Leon', 'Scott', 'Kenedy');

その後、ターミナルソフトで下記コマンドを入力。

> tsc test.ts

問題なければ、下記の状態になるはず。

• ターミナルにカレントフォルダのみが表示される。
• カレントフォルダに、test.jsファイルが作成される

あとは、test.jsをnode.jsで実行し、下記結果が表示されればOK.

> node test  
Leon Scott Kenedy

その他

ブラウザ(クライアント)側javascript作成時の注意

もちろんTypeScriptでブラウザ側のjavascriptを作成することも可能。
ただしブラウザ側は、「node.jsの「require」(=TypeScriptの「import」)が使用できないため、そのままでは外部ファイルやライブラリをできない、という問題がある。

そこで、この問題を解決する必要があるが、その1つが「browserify」というモジュール。

これは、

• require先のjsファイルの内容も、まとめて1ファイルにまとめてしまう、というモジュール。
• require先jsファイルがさらにrequireしている..などの場合でも、依存関係のあるjsファイルをまとめて1つにしてくれる。
• 結果、requireが不要になるので、ブラウザ側でもrequire先のjsdファイルを使用できる。

手順としては、

• npmコマンドでインストールして、

> npm install -g browserify

• 統合先のjsファイルを「-o」オプションで指定して、

> browserify test.js -o bundle.js

• 最後に、作成された統合先のjsファイルをHTMLなどに埋め込めばOK。

> <script src="bundle.js"></script>

• 大元のjsファイル(色々requireしているファイル)を「test.js」とします。
• 統合先ファイルに命名ルールはないですが、通例として「bundle.js」とするようです。

※もちろん、「browserify」以外にも対応策はいろいろありますので、興味があれば探してみてください。

型定義ファイルの作成

「型定義ファイル」とは、

• 「各種モジュールをTypeScriptで使用可能にする」ためのファイル。
• Javascriptで記載されてるモジュールを、TypeScriptに変換するためのもの。
• 型定義ファイルを用意すると、VSCodeでインテリセンスなどが使用可能になる。
• 型定義ファイルは、下記のコマンドでインストール可能。

> npm install -save @types/(モジュール名) 

※各モジュールの型定義ファイルのインストールコマンドは、下記サイトで検索可能です。

tsconfig.jsonの設定(2019/5/5追記)

tsconfig.jsonとは、

• TypeScriptや、そのコンパイル時の各種設定を定義するためのファイル。
• プロジェクトのルートフォルダ(=package.jsonと同じ場所)に保存することで、設定が有効になる。
• tsconfig.jsonを作成するには、プロジェクトのルートフォルダで下記コマンドを実行すればOK。

> tsc --init 

• tsconfig.jsonを作成すると、設定可能な項目がすべてコメントされて状態で記載されている。
• 設定を有効にするには、コメントアウトを外せばOK。
• とりあえず設定すべきは、下記項目くらい？
  • 項目数が膨大なので、詳細は下記ページなどを参照。
    • TypeScript(マイクロソフト公式サイト)
    • js Studio(日本語訳)

定義	説明
module	モジュール関連のコードをどの方式として扱うか(Common.js, umdなど)
target	JavaScriptのバージョン(ES5, ES2015など)
noImplicitAny	型未定義の変数などをエラーとするか(trueならエラー、falseならany型にする。)
strict	型厳格な方チェックを行うか(trueなら実施する。)
outDir	コンパイル後のjsファイルの保存先フォルダ(未指定ならtsconfig.jsonがあるフォルダ)
rootDir	tsファイルの保存先のルートフォルダ(未指定ならtsconfig.jsonがあるフォルダ)
esModuleInterop	common.jsモジュールとESモジュール互換的に扱えるようにするかどうか
strictNullChecks	nullやundefinedのチェックを厳格にする(number型の初期値にnullを代入不可、など)
sourceMap	souuceMapを作成するかどうか(TypeScriptコード上でブレークポイント設定など、デバッグ可能になる)
exclude	tsファイルの保存先として除外するフォルダ(ここで指定したrootDir以下の全フォルダ内の*.tsファイルが、コンパイル対象になる)

とりあえず、今回はこの辺で。

---

1. 仕事ではjavascriptを直で書いてます。 ↩