Typescriptの基本設定は？
記事IT・テクノロジー
Typescriptの基本設定は？
先日投稿した記事で、機会があれば Typescript を学習することをお勧めするという事を書きました。今日は実際にどのように Typescript を使うのかもう少し具体的な事を記事にしてみました。
実行は Javascript!
ご存知の方も多いと思いますが、実際に Web ブラウザが実行できるのは、Typescript ではなく、コンパイルして作られた Javascript です。従って、Typescript で書いたからと言って Typescript を実行するわけではありません。
理由は簡単で、互換性の制限もあって、Web ブラウザーが実行できるのはあくまで Javascript だからです。つまり、Typescript で書いたプログラムはコンパイルをして、Javascript に変換しないと実行できません。
Typescript を使うメリットは？
実行されるのが Javascript なら、なぜ Typescript を使うのが良いのかと疑問に思う方がいるかもしれません。実は、この Typescript から Javascript に変換するコンパイルが最大のメリットです。このコンパイルが Javascript では見つけづらいコーディング上の問題をチェックしてくれるのが Typescript が利用される理由です。
型の宣言をきちんと守って書かれた Typescript の場合、宣言と違う型の代入や、要素の一致しない JSON や、関数のインターフェース、変数の初期化などをコンパイルする際にチェックして、知らせてくれます。
従来の Javascript の場合、こうした問題がコード上にあると、動作する場合と不具合を起こす場合があったりして、原因を突き止めるのに時間がかかりました。そうした、コンパイラである程度は、事前チェックができるのは開発上大きなメリットです。
特に複数の人で開発を行う場合、モジュール間のインターフェースをきちんと決めておけば、コンパイル時に不一致を見つけることが可能になるのは大きなメリットです。
Typescript をコンパイルするための設定が必要
実際に実行されるのが Javascript のため、Typescript を使う場合は、Typescript で書いたコードを Javascript に変換（コンパイル）するための設定が必要になります。
Typescript のパッケージをインストールする
Typescript を利用するためのパッケージ（typescript）が公開されているので、それをインストールして利用します。
$ mkdir sample
$ cd sample
$ npm init -y
$ npm install --save-dev typescript
最初にプロジェクトフォルダを作成して、作成したプロジェクトフォルダに移動してインストールをします。インストールの前に、パッケージの初期化を行います。
Typescript を頻繁に使用する場合は、開発用の PC のどのフォルダからも利用できるようにグローバルでインストールすることもできます。 その場合は、
$ npm install -g typescript
のように「-g」オプションをつけてインストールします。 （＊）Mac や Ubuntus などを利用している場合は、「sudo」を前につける必要があります。また、一般的な Linux や Unix のシステムでは管理者（スーパーユーザ）の権限が必要になります。
これで基本的な Typescript の機能は使うことができます。 例えば、シンプルな「Hello World!」を表示するシンプルなコードを「hello.ts」に書いてみます。
console.log("Hello World!");
これをコンパイルするには、
$ npx tsc hello.ts
を実行するとコンパイルして「hello.js」を作ってくれます。 このプログラムの場合は、コンパイルの結果も全く同じファイルになります。 これは、このコードは Typescript 特有の書き方をしていないためです。
そこで、少し変えて
const word: string | undefined = "Hello World!";
if (word) {
console.log(word);
} else {
console.log("Undefined");
}
にしてみるとどうでしょうか？
コンパイルした結果は
"use strict";
var word = "Hello World!";
if (word) {
console.log(word);
} else {
console.log("Undefined");
}
のようになります。違いは変数を宣言する時に明示的に型を宣言しているかの違いです。
例えば、このコードを変更して
const word: string | undefined = "Hello World!";
let num: number;
if (word) {
console.log(word);
} else {
console.log("Undefined");
}
num = word;
console.log(num);
と書くと、「word」と「num」では宣言している型が違うのでエラーになります。
同じ、書き方で型宣言なしの Javascript で書いた場合は以下のようになりますが、このコードは実行時にはエラーにはなりません。 (hello_js.js)
const wordh = "Hello World!";
let num;
if (word) {
console.log(word);
} else {
console.log("Undefined");
}
num = word;
console.log(num);
console.log(typeof num);
このコード自体はエラーではなく、「型は動的に割り当てられる」ためです。
この Javascript を「node」で実行すると実行結果は
$ node hello_js.js
Hello World!
Hello World!
string
となって、実行時に「num」に代入される値が「string(文字列)」なので、自動的に num の型は string になります。
tsconfig.json
Typescript の個別のコンパイル方法はわかりました。 実は、もう少し便利な使い方があります。それが、「tsconfig.json」で Typescript の設定を書いて使う方法です。
$ npx tsc --init
を実行すると標準設定の「tsconfig.json」を作ってくれます。
例えば、全ての Typescript のコードは「src」フォルダに置いて、コンパイルされた Javascript のファイルを「dist」フォルダに置くようにしたい場合このファイルで設定する事ができます。
先程のプロジェクトフォルダに、Typescript をおくフォルダ「src」を作って、先程の「hello.ts」を「src/hello.ts」に移動します。
そして、「tsconfig.json」を変更します
{
"comilerOption": {
"target": "es5",
"module": "commonjs",
"outDir": "dist",
"strict": true,
"rootDirs": ["src"],
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsitentCasingInFileName": true
}
}
標準設定からの変更は、「outDir」と「rootDirs」で、Typescript のソースコードのフォルダと、コンパイル後の Javascript ファイルの出力先を指定しています。
この設定があると、プロジェクトフォルダで
$ npx tsc
と入力すると、全てのファイルをコンパイルして、「dist」にコンパイルされた Javascript ファイルを保存してくれます。便利ですよね？
実用的な使い方は？
実際はこのように最初から設定するケースは余りないかと思います。 殆どの Web 開発では、React や Vue などのフレームワークと併用するので実際は、テンプレートとなるプロジェクトを作成する際に Typescript を使うことを指定すると必要な設定を自動で行ってくれます。
React の場合
React の場合、「create-react-app」を使ってテンプレートのプロジェクトを作るケースが多いかと思いますが、このスクリプトは「Typescript」の使用を指定できます。
$ npx create-react-app sample-app --template typescript
のように指定すれば、Typescript を使用する設定でプロジェクトを作成してくれます。あとは、開発用のサーバーを利用している場合は、コードを変更すればそのまま、コンパイルをして反映させてくれますし、公開用のイメージを作成する場合も、Typescript を自動的にコンパイルして作成してくれるので、コーディング以外の部分で Typescript を利用していることは余り意識しないで済みます。
Vue の場合
Vue の場合は、テンプレートのプロジェクト作成は、Vue UI を利用する方法と、CLI（コマンドライン）を使用する方法があります。
どちらの場合も「Manually select features」を選択して Typescript を選択すれば、自動的に Typescript での環境設定を React と同様に行ってくれます。
Vue UI を利用する場合は、まず Vue UI を起動します。
$ vue ui
その後で、UI の左下の家マークを選択して画面上部の「create」を選択してプロジェクトを選択します。その後で、プロジェクトの詳細設定をする際に「Manual」を選択します。
コマンドラインを利用する場合は、
$ vue create sample-vue
を実行すると、プロジェクトの設定の質問が出てくるので、「Manually select features」を選択して、Typescript を選択します。
まとめ
Typescript を利用した開発環境の設定は、React や Vue を利用する場合は、テンプレートのプロジェクト作成の際に指定すればほぼ自動で設定をしてくれるので、コーディングのスタイル以外の部分では余り意識する必要はありません。
ただ、実際にマニュアルで簡単な設定をして、コンパイルするとどんなコードになるかをみたり、どんな記述がエラーになるかを知ることは Typescript を学習する上で役に立つ情報なので一度ご自分で試してみると面白いと思います！
