はじめに

こんにちは！フロントエンド大好きといっておきながらまだTypescriptをあまりいじったことがないヨシキです。今回はTypescriptの環境構築を行うとともに少し触っていけたらと思います。

環境

Ubuntu 20.04　(Windows Sub System for Linux)
node v14.15.1
npm 6.14.8
Typescript Version 3.8.3

インストールの軌跡

nodeとnpmに関しては、もともと入っていたのですが、念のため重ねてインストールしておきました。

sudo apt install nodejs npm

次にn packageを使い安定板のnodeとnpmを取得します。

sudo npm install n -g
sudo n stable

以下のような文言をはいてくれれば成功です。

installing : node-v14.15.1
       mkdir : /usr/local/n/versions/node/14.15.1
       fetch : https://nodejs.org/dist/v14.15.1/node-v14.15.1-linux-x64.tar.xz
   installed : v14.15.1 (with npm 6.14.8)

おや？様子が、、、

よーし！これで残すはメインのTypescriptのインストールのみだ！と心を躍らせていたら何故か躓きました、、、
参考記事のTypescriptインストール方法を試してみてもエラーが吐かれるばかりで全然インストールしてくれませんでした。以下が私の環境では無理だったインストール方法です。

sudo npm install -g typescript ts-node
npm install -g typescript
sudo npm install -g typescript

何かしらヒントを求め、ターミナルで以下のようなTypescript関連のコードを打ち込むと・・・

tsc --version

以下のような出力がありました！

Command 'tsc' not found, but can be installed with:

sudo apt install node-typescript

これはと思い上記のコードを打ち込んでみると・・・
すんなり入りました笑
なぜ上記の参考文献のインストール方法を受け付けてくれなかったのかはわかりませんが入ってよかった！
同じようなエラーが発生してしまった方は是非お試しください。

実際に動かしてみよう！

ターミナルでディレクトリを作成し、実際にコードを書いてみます！
最初なので、おなじみのやつ行っときます

hello.ts


const message:string = 'Hello! TypeScript!';
console.log(message);

ここでTypescriptは静的型付け言語なので、書いて、さあ！実行！とはいきません。
コンパイルという作業が必要なのです。
私はc++をはじめに触ったので、コンパイルがあるほうが自然なのですが、多くの人は動的型付け言語（PythonやJavaScript）を最初のプログラミング言語に選んでいる傾向があると思うので、最初は少しばかり慣れないかもしれませんね。

次はチュートリアルに載っていたコードを少し改変して,クラスと構造体に関してのコードを書いてみました。

sample.ts


interface Point {
    x: number;
    y: number;
}

function printPoint(p: Point) {
    console.log(`${p.x},${p.y}`);
}

class  VirtualPoint {
    x: number;
    y: number;

    constructor (x: number, y: number) {
        this.x = x;
        this.y = y;
    }
}

const newVPoint = new VirtualPoint(1, 6);
printPoint(newVPoint);

interfaceを使うことによってjavascriptではなかった（たぶん笑）構造体を宣言できるようになるんですね。これも静的型付け言語の特徴の1つなのかもしれませんね。

おわりに

今回はTypescriptの環境構築を主にやってきました。
もう少し高位に扱うのなら、webpackを通してトランスパイルようにBabelをインストールして、Typescriptを扱うのが望ましいのかもしれません。webpackには結構親しみがあるので、今度はそちらのほうで試していきたいと思います。
それではお疲れ様でした！
この記事が参考になった方はぜひgoodしてってくだされ～笑

参考文献

TypeScriptをWSL+Ubuntuで環境構築する
 TypeScriptチュートリアル① -環境構築編-
公式チュートリアル

【環境構築＋α】Typescriptをいじってみたいお年頃