WSLのUbuntu18.04に最新のNode.jsとTypescript環境を構築する【備忘録】

今回はWSL上でTypescriptの開発環境を構築する手順の備忘録です。

Typescriptとは、AltJSと呼ばれる、Javascriptを代替するために作られた言語の一つで、コンパイルすることでJavascriptのコードが生成されます。

OSSで開発されているプログラミング言語ではありますが、生みの親はMicrosoftであり、Googleでも社内標準言語に設定されるなど、人気を博しています。

WSL上にTypescriptの環境を構築するのは非常に簡単です。

1．WSL上に最新安定版のNode.js環境を構築する（必須ではない）
2．npmでTypescriptをインストールする

以上です！
最新安定板のNode.js環境を構築する必要は必ずしもありませんが、aptでインストールされるバージョンがかなり古いので、最新安定版にするのが無難だと思います。

最新安定版のNode.jsをインストールする

まずはWSLに最新のnpmとNode.jsをインストールしていきます。

最新版のNode.jsをインストールするために、まずはaptで古いバージョンのNode.jsとnpmをインストールします。

sudo apt install -y nodejs npm

次に、インストールしたnpmを利用してn packageをインストールします。
このn packageを使って、最新版のnpmとNode.jsをインストールすることができます。

sudo npm install n -g
sudo n stable

そんなわけで、さきほどaptでインストールしたNode.jsとnpmはもういらないので、以下のコマンドで削除してあげましょう。

sudo apt purge nodejs npm -y
sudo apt autoremove -y

無事に削除が完了したら、バージョンを確認します。
僕の環境では現時点での最新安定板であるv12.18.1がインストールされていることが確認できました。

node -v
> v12.18.1

Typescriptをインストールする

Node.jsさえあれば、Typescriptは以下のコマンドのみでインストールが可能です。

npm install -g typescript

Typescriptを使ってみる

それでは早速Typescriptを使ってみます。

公式のチュートリアルにあるサンプルをそのままもらってきました。
TypeScript in 5 minutes · TypeScript

Typescriptは上方互換性の言語であり、Javascriptの文法はすべてサポートしています。
つまり、.tsファイルに、完全にJavascriptのみを書いても問題なくコンパイルできるというわけです。

また、Typescriptはオブジェクト指向プログラミングや型宣言などをサポートしています。
生のJavascriptを書いたことがある方であればわかると思いますが、これはある程度大きなプログラムを書く際には非常にありがたいです。

では、以下のサンプルコードをsample.tsファイルとして保存しましょう。

class Student {
    fullName: string;
    constructor(public firstName: string, public middleInitial: string, public lastName: string) {
        this.fullName = firstName + " " + middleInitial + " " + lastName;
    }
}

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

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

let user = new Student("Jane", "M.", "User");

document.body.textContent = greeter(user);

そして、以下のコマンドを実行すると、コンパイルされてJavascriptファイルが生成されます。