TypeScriptとは？
TypeScriptって何？という方のためにざっくり解説します。
TypeScriptはMicrosoftが開発している言語で、ざっくり言うとJavaScriptで型を使えるようにした言語と言う感じです。
TypeScriptを実行するには、基本はTypeScriptで書いたコードをトランスパイルという変換をかけて、JavaScriptに変換してから実行します。
一見無駄なことをしているようにも見えますが、TypeScriptで書くことで型による多くの恩恵を受けられます！
TypeScriptを使う利点などはこちらが参考になります。
TypeScriptを使おう
実際にJavaScriptを勉強している方や現場でJavaScriptを使っている方はたくさんいると思いますが、まだまだ移行できている方は少ないと思います。
TypeScriptを使うことによって得られる型の恩恵は非常に大きなものがあり、業務でJavaScriptを使用している人は特に導入する価値はあると思います！
React, Vue, Next, Nuxtなどのフロントエンドのフレームワークとも相性が良いですし、既にネットに多くの知見があるため試して見ると良さそうです！
また年収の高いプログラミング言語にもランクインされていました！
最近のWebプログラミングはフロントエンドとバックエンドは切り離して、フロントエンドはNuxt(Vue)×TypeScriptやNext(React)×TypeScriptなどの構成も多いので、エンジニアならやっておきたい言語の一つだと思いますね！
作ってみました。年収の高い言語が丸裸になりました。エンジニアの方もこれから始める方も参考までに。
— TomoyaShirai@コード塾?禁酒72日目 (@shiraponsu) October 21, 2019
ガチ調査版::2019年プログラミング言語 求人人気ランキング https://t.co/wIxwgELNFt #Qiita
TypeScriptの実行環境を構築する
それではまずTypeScriptの実行環境を構築していきたいと思います。
Node.jsをインストールする
まずNode.jsをインストールしていきます！
手順は環境ごとに異なるので別記事に纏めてあります。
Macでのnodebrewを使用したインストール手順はこちら。
Macでnvmを使用したインストール手順はこちら。
Windowsの方はこちらです。
Ubuntuでのインストール手順はこちら
TypeScriptとts-nodeをインストールする
今度はTypeScriptとts-nodeをインストールしていきます！
tscコマンドでトランスパイルをしてnodeで実行することも可能ですが、ts-nodeを使えばそのまま直接TypeScriptが実行できるので便利です。
またts-nodeを使えば型がしっかりと考慮されて実行できるのでオススメです！
今回は両方のやり方を試してみたいと思いますので、typescriptとts-nodeを両方インストールしましょう！
npm install -g typescript ts-nodeサンプルコードを実行してみよう！
それではまずサンプルコード実行用のディレクトリを作成して、その場所でVSCodeを開いておきましょう！
$ mkdir typescript_tutorial
$ cd typescript_tutorial
$ code .VSCodeをまだインストールしていない人は、こちらの公式サイトからインストールしておきましょう！
TypeScriptもMicrosoftが開発していますが、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-nodeでTypeScriptを実行してみます！
先程と同じ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を使い始めたばかりなのでチュートリアルを通して理解を深めていきたいと思います。
コメント