【TypeScriptチュートリアル】実行環境を構築しよう

TypeScript

TypeScriptとは?

TypeScriptって何?という方のためにざっくり解説します。

TypeScriptはMicrosoftが開発している言語で、ざっくり言うとJavaScriptで型を使えるようにした言語と言う感じです。

TypeScriptを実行するには、基本はTypeScriptで書いたコードをトランスパイルという変換をかけて、JavaScriptに変換してから実行します。

一見無駄なことをしているようにも見えますが、TypeScriptで書くことで型による多くの恩恵を受けられます!

TypeScriptを使う利点などはこちらが参考になります。

TypeScriptを使おう

実際にJavaScriptを勉強している方や現場でJavaScriptを使っている方はたくさんいると思いますが、まだまだ移行できている方は少ないと思います。

TypeScriptを使うことによって得られる型の恩恵は非常に大きなものがあり、業務でJavaScriptを使用している人は特に導入する価値はあると思います!

React, Vue, Next, Nuxtなどのフロントエンドのフレームワークとも相性が良いですし、既にネットに多くの知見があるため試して見ると良さそうです!

また年収の高いプログラミング言語にもランクインされていました!

最近のWebプログラミングはフロントエンドバックエンドは切り離して、フロントエンドはNuxt(Vue)×TypeScriptNext(React)×TypeScriptなどの構成も多いので、エンジニアならやっておきたい言語の一つだと思いますね!

TypeScriptの実行環境を構築する

それではまずTypeScriptの実行環境を構築していきたいと思います。

Node.jsをインストールする

まずNode.jsをインストールしていきます!

手順は環境ごとに異なるので別記事に纏めてあります。

Macでのnodebrewを使用したインストール手順はこちら。

Macnvmを使用したインストール手順はこちら。

Windowsの方はこちらです。

Ubuntuでのインストール手順はこちら

TypeScriptとts-nodeをインストールする

今度はTypeScriptts-nodeをインストールしていきます!

tscコマンドでトランスパイルをしてnodeで実行することも可能ですが、ts-nodeを使えばそのまま直接TypeScriptが実行できるので便利です。

またts-nodeを使えば型がしっかりと考慮されて実行できるのでオススメです!

今回は両方のやり方を試してみたいと思いますので、typescriptts-nodeを両方インストールしましょう!

npm install -g typescript ts-node

サンプルコードを実行してみよう!

それではまずサンプルコード実行用のディレクトリを作成して、その場所でVSCodeを開いておきましょう!

$ mkdir typescript_tutorial
$ cd typescript_tutorial
$ code .

VSCodeをまだインストールしていない人は、こちらの公式サイトからインストールしておきましょう!

TypeScriptMicrosoftが開発していますが、VSCodeもMicrosoftが開発していますので推奨のエディタです!

TypeScriptをトランスパイルして実行してみる

それではまずtutorial.tsのファイルを作成してサンプルのTypeScriptのコードを書いてみましょう!

tutorial.ts

const hello = (name: string) => {
    console.log(`Hello ${name} !`);
}

hello('kou');

まずは、tscコマンドでトランスパイルをします!

$ tsc tutorial.ts 

トランスパイルが完了すると、tutorial.jsというJavaScriptのファイルがはき出されるのです!

tutorial.js

var hello = function (name) {
    console.log("Hello " + name + " !");
};
hello('kou');

このはき出されたJavaScriptのファイルをnodeコマンドで実行することができます!

$ node tutorial.js 
Hello kou !

ts-nodeで直接実行する

次はts-nodeTypeScriptを実行してみます!

先程と同じTypeScriptのプログラムをts-nodeで実行していきます!

tutorial.ts

const hello = (name: string) => {
    console.log(`Hello ${name} !`);
}

hello('kou');

ts-nodeでTypeScriptのプログラムを実行すると、うまく実行できていることがわかりますね!

今後はこのts-nodeを使用してTypeScriptチュートリアルを進めていこうかと思いますので、この方法を覚えておいてくださいね!

$ ts-node tutorial.ts 
Hello kou !

まとめ

今回はTypeScriptチュートリアルの初回と言うことで実行環境を構築しました!

僕もまだまだTypeScriptを使い始めたばかりなのでチュートリアルを通して理解を深めていきたいと思います。

オススメの関連商品

コメント