現在仕事でnode.jsを使用しており、「勉強も兼ねてTypeScriptを導入しよう！」と思い導入したので、その際のメモ。1
前提
- 開発環境はVisual Studio Code。(visual Studioでも出来ますが)
- node.jsとnpmを事前にインストールしておく。(どちらもnode.jsのインストーラからインストール可能)
参考ページ
packege.jsonの作成
> 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。
- とりあえず設定すべきは、下記項目くらい？
- 項目数が膨大なので、詳細は下記ページなどを参照。
| 定義 | 説明 |
|---|---|
| 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ファイルが、コンパイル対象になる) |
とりあえず、今回はこの辺で。
-
仕事ではjavascriptを直で書いてます。 ↩
