TypeScriptを始めよう ~ すぐにできる実行環境構築 ~

TypeScriptとは？

TypeScriptとは、マイクロソフトによって開発された、JavaScripで型定義を可能にできるように拡張した言語(AltJS)です。

AltJS、つまりJavaScriptの代替言語であり、コンパイル時にJavaScriptに変換されます。そして、互換性を持つスーパーセットであるため、JavaScriptと同様の記法が使えます。そのためJavaScriptの知識があればTypeScriptの学習コストはそこまで高くなく、スムーズに理解することができるでしょう。

また、TypeScriptは漸進的型付き言語(gradually typed language)であるので、プログラム内の全ての型を指定する必要はありません。これは既存のJavaScriptコードをTypeScriptに以降する際に非常に役に立ちますが、基本的には全ての型の指定をすることをおすすめします。

開発環境を整えよう

TypeScriptを試すために、まず開発環境を最低限整えましょう。

プラウザで手軽に試したい人は、こちらを使ってみてください。[https://www.typescriptlang.org/play]

VSCodeのインストール

https://code.visualstudio.com/

上記のURLから、それぞれのOSに合わせてDownloadしてください。VSCodeはTypeSciptの拡張機能が豊富なので、エディタに何を使うか迷っていたらおすすめです。

もちろんお好きなエディタを使っていただいて構いません。

Node.jsのインスール

Node.jsをインストールしていなければインストールしましょう。

Macの場合

# Nodebrewのインストール$ brew install nodebrew
# インストールできたか確認$ nodebrew -v# LTSの最新版(https://nodejs.org/ja/)をインストール$ nodebrew install-binary v12.18.3
# バージョンを指定$ nodebrew use v12.18.3

# pathを通す(bashの場合)$ echo'export PATH=$HOME/.nodebrew/current/bin:$PATH'>> ~/.bash_profile
$ source ~/.bash_profile
# Node.jsのバージョン確認$ node -v

Windowsの場合

この記事を参考にしてください。

https://qiita.com/maecho/items/ae71da38c88418b806ff

TypeScriptのインストール

フォルダを作って、その中でnpmプロジェクトを初期化しましょう。その後npmを使ってTSCとTSLintをインストールします。

以下のコマンドを順に実行してください。

# 好きな場所でフォルダを作ってください$ mkdir typescript-start
$ cd typescript-start
# npmプロジェクトを初期化(全てEnterで大丈夫)$ npm init

# TSC, TSLint, Node.js用の型宣言をインストール$ npm install--save-dev typescript tslint @types/node

tsconfig.jsonの作成

ここまで順調にできたら、typescript-startディレクトリ直下にtsconfig.jsonというファイルを作りましょう。

このファイルはどのファイルをコンパイルするかや、どのモジュールシステムにコンパイルするか、コンパイル結果をどのディレクトリに格納するか、などを定義するものになります。

それでは実際に作ってみましょう。以下のコマンドを実行しtsconfig.jsonファイルを生成し、VSCodeで開きましょう。

$ touch tsconfig.json

開けたら、以下の内容をかきこんでください。

{"compilerOptions":{"module":"commonjs","target":"es2015","outDir":"dist","sourceMap":true,"strict":true},"include":["src"],"exclude":["node_modules"]}

今回用いるtsconfig.jsonのオプションについて、以下に簡単に説明します。

tslint.jsonの作成

tsconfig.jsonファイルが作れたと思うので、次はTSLintの設定を行うことのできるtslint.jsonを加えましょう。

TSLintの利用は必須ではありませんが、コードスタイルの統一のために導入しておくことをおすすめします。

導入するには、以下のコマンドを実行します。

$ ./node_modules/.bin/tslint --init

無事実行できたらtslint.jsonファイルが生成されているはずです。

細かいルールなど公式を参考にしてみてください。今回はデフォルトのまま利用します。

tslint: https://palantir.github.io/tslint/usage/configuration/

TypeScriptの実装！

では、TypeScriptの実装に入りましょう。srcフォルダを作成し、中にindex.tsファイルを作ります。TypeScriptファイルは拡張子が.tsになります。

$ mkdir src
$ touch src/index.ts

index.tsファイルは以下のように記述します

constfirstStep:string="Let's start TypeScript!"console.log(firstStep)

次にこのコードをコンパイルして実行しましょう。

# TSCでコンパイル$ ./node_modules/.bin/tsc
# Node.jsで実行$ node ./dist/index.js
# Let's start TypeScript!

無事「Let's start TypeScript!」という文字列が表示されたでしょうか？

また、tsconfig.jsonで設定したように、TSCでsrc以下のファイルがコンパイルされ、dist直下にjsファイルが生成されていることもわかると思います。

今回はここで終わりです。

こちらの記事でも同じ内容を記述しております。
またこちらでTypeScriptなどの情報を発信していく予定です。よろしければご覧ください。

参考 : https://www.typescriptlang.org/