2. 環境構築

Tweet

前ページでは、node.jsをインストールして、javascriptをnodeコマンドで実行できることを確認しました。

次は、コンパイラをインストールします。

本書では、typescirptを使います。

typescriptとは？

typescriptとは、javascirptの高級言語、というポジションになります。
ブラウザ上で動作するのは相変わらずjavascriptですが、従来のjavascriptの記法でプログラムを作成すると、以下のような問題がありました。

• 型の定義がないので、どんな値が入るのかわからず読みにくい
• 意図しないnullがあり得るのかどうか、ソースから判断しにくい
• オブジェクト指向に対応しているけど、記法が独特だったり、インターフェースがなかったりする

typescirptは上記の問題を解決した、基本的に別の言語だと思ってください。

基本的にとしているのは、書こうと思えば旧式の書き方もできるということです。

C++のコードをがっつりC言語で書くこともできる、あの感覚です。

typescriptのインストール

コンパイラに相当するtscコマンドをインストールします。

テストするディレクトリをC:\Users\konishi\typescriptSampleとします。
ご自身で試す場合は、ディレクトリを適宜読み替えてください。
以下のコマンドを実行してください。

cd C:\Users\konishi\typescriptSample
npm install typescript

実行が完了すると、カレントディレクトリに以下のファイルが作成されたと思います。

2020/09/20  18:00    <DIR>          node_modules
2020/09/20  18:00               323 package-lock.json

node_modulesというディレクトリの中に、typescriptを実行するのに必要なモジュールがインストールされています。
コンパイルコマンドのバージョンを確認してみましょう。
コンパイルコマンドはtscです。
次のコマンドを実行してください。

node_modules\.bin\tsc -v

すると、バージョン情報が表示されます。

次に、コンパイルしてみましょう。
カレントディレクトリにtest01.tsファイルを作成し、コード1を書いて保存してください。

コード1

class Sample {
    constructor() {
        console.log("コンストラクタが呼ばれました");
    }

    public helloTypeScirpt() {
        console.log("hello typescript!");
    }
};


//実行
var sample = new Sample();
sample.helloTypeScirpt();

注意点として、ファイルの拡張子はjsではなく、tsです。

そして、次のコマンドを実行してください。

node_modules\.bin\tsc test01.ts

コンパイルが終わると、カレントディレクトリにtest01.jsが作成されていると思います。
次のコマンドでtest01.jsを実行してみましょう。

C:\Users\konishi\typescriptSample>node test01.js

次の出力が得られたと思います。

コンストラクタが呼ばれました
hello typescript!

次に、test01.jsの中身を見てみましょう。

var Sample = /** @class */ (function () {
    function Sample() {
        console.log("コンストラクタが呼ばれました");
    }
    Sample.prototype.helloTypeScirpt = function () {
        console.log("hello typescript!");
    };
    return Sample;
}());
;
//実行
var sample = new Sample();
sample.helloTypeScirpt();

typescirptで書かれたプログラムが、javascirptに変換されていることが確認できます。
これがaltJSと呼ばれる所以です。

さて、ここで問題が一つあります。
コンパイルするたびに以下の長いパスを打ち込むのが面倒です。

node_modules\.bin\tsc

これは、typescirptをインストールしたときに、カレントディレクトリ、つまりプロジェクト単位にtscコマンドをインストールしたことが原因です。
共有でマシンを使用する場合、AさんとBさんで使用するtypescriptのバージョンを変えたい場合は、上記のようにカレントディレクトリにインストールします。
しかし、自分しか使わない環境なのに、プロジェクトごとにtypescirptをインストールするのは面倒だ、という人は共有することができます。

先ほどのtypescirptをアンインストールして、共有のパスにインストールしてみましょう。
まずは、アンインストールです。

cd C:\Users\konishi\typescriptSample
npm uninstall typescript
npm uninstall tsc

アンインストール後、次のコマンドを実行してエラーになれば、アンインストールできています。

node_modules\.bin\tsc

次に、グローバル環境にtypescriptをインストールしてみましょう。
次のように-gオプションを指定してコマンドを実行してください。

npm -g install typescript

すると、グローバル環境にtypescriptがインストールされます。

試しに、別のコマンドプロンプトを起動して、次のコマンドを実行してみてください。

cd c:\temp
tsc -v

次のようにバージョン情報が表示されると思います。

Version 4.0.3

カレントにnode_modulesがなくても実行できています。
これは、PC上のどこからでもtscコマンドが実行できるということを表しています。

以降では、tscコマンドはグローバルにインストールされている前提で進めます。