TypeScriptの開発環境構築（1）

TypeScriptの開発環境

TypeScriptとは

Microsoftが開発したプログラミング言語。
JavaScriptに型を付けた言語であり、TSをコンパイルする事でJavaScriptを成形するもの。
SCSSからCSSを生成する様な関係に近いものであり、TSがSCSS、CSSがJSに近い役割。（分かりづらくてすいません。）

結局JavaScriptにするのであれば、TSってどう意味があるのか？という疑問も出てくるが、メリットとしまして、TSで型のエラーチェックが走り、JavaScriptとして堅牢なコーディングが望め正常な動作が期待される。
※ES6（ECMAScript6）の規格に準拠する様、もしくは古い規格としてJSを生成出来る等。

また、型がある事で文字なのか数字なのか明確となり、型の明確化により速い計算速度が望めたりする。

その他、設定ファイルで開発モード、公開モードを切り替えることにより、ソースマップが有効になったり、書き出したJSの圧縮、軽量化（Minify）を行うことも出来る。

「型付き」とは

変数に入れる内容が、数字なのか文字なのかを宣言があるプログラミング言語の事を示す。

主な型は下記の様なものがある。
・Number・・・数字
・Number[]・・・数字、配列（[1,2,3,4]）
・String・・・文字
・Boolean・・・True / False
・Any・・・文字、数字など、なんでも入る型。
（準備されてはいるが、TSを使うのであれば、控えた方が良い。）
・Unknown・・・型が不明という型、パラメータがどういう型で来るか分からない際に使う型。
・Void・・・何も入っていないもの、関数の戻り値で利用することがある。
・Null・・・nullしか入らないもの。
・Undefind・・・Undefindしか入らないもの、エラー処理等で使うこともあり得る？
（関数を準備したけど何も入れていない場合に使う）
・Never・・・関数定義の時に何も返さない時に利用。
・Object・・・オブジェクトを入れる宣言、型。

組み合わせたもので、「Union Types」がある。

let NumberOrString: Number | String = 0;   // OK
let NumberOrString: Number | String = '0';   // OK
let NumberOrString: Number | String = True;   // NG

上記の記述で、文字と数字を扱う型として宣言出来る。

環境準備

コーディングできる環境を整えていきます。
TSのウォッチ、ビルドが簡易的なため、推奨するエディタとして「VScode」とさせていただきます。

TS（TypeScript）環境の準備として、下記コマンドを入力しディレクトリ等の配置、準備を進めます。
（今回は「ts-tutorial」という作業ディレクトリ名で作成とした）

コマンドプロンプト（パワーシェル）、MACはターミナルにて、下記コマンドを実行。

$ mkdire ts-tutorial
$ cd ts-tutorial/
$ code .

※「code .」はVSコードエディタが起動されるコマンド
エラーの場合コマンドが割り当てられていないだけと思われるため、手でVSコードを開けば良しとする。

nodeの有無確認

下記コマンドを実行。

$ node -v

nodeのバージョンが出ない様であれば、nodeのインストールしてください。
（推奨版で良し）
https://nodejs.org/ja/download/
インストールしたらVSCode等、エディタを再起動してください。

nodeパッケージマネージャーの有無確認

$ npm -v

※npm：nodeパッケージマネージャー
npmをインストールして使えないWinPCは、まずシステム環境変数のパスを疑って下さい。
パスに下記がなければ追記、【ユーザ名】は任意で書き換えて下さい。
C:¥Users¥【ユーザ名】¥AppData¥Roaming¥npm

環境変数書き換えたら、エディタ等再起動して下さい。

設定ファイルの生成

下記コマンドで各設定ファイルである、package.jsonの作成が行われる。

$ npm init -y

tscコマンド

下記コマンドを実行し、tscコマンドの利用を可能とさせる。

$ npm install -g typescript
$ npm i --save-dev typescript

作業フォルダに「node_modules」というディレクトリでモジュールがダウンロードされます。

tscコマンドが正常動作するか、確認。

$npx tsc -v

バージョン表示されればOK。

ここまでが、辛うじてTSでコンパイル出来る形で、最小限の環境準備です。
（TSを扱うには十分な環境準備ではありませんが、辛うじてコンパイルは出来ると言える状態）

tscの設定ファイルの生成について

下記のコマンドで「tscript.jsom」の生成も可能。

$ tsc --init

エラーの確認

エラーのテストとして以下、簡単なコンパイルの動作感覚とエラーについて見てみることとする。

試しに、TSファイルを作り、使えるか確認する。
「tutorial.ts」ファイルを手動にて作成。

簡単な動作を見るため、少しTSを書いてみる。
作成したTSファイルに、型の設定例として下記を記述。

const a:Number = 3;
const b:String = a;
console.log(b);

この様にString型にNumber型を入れると、型が違いますとエラーが出ます。（このままコンパイルも可能）
（画像貼り付け予定）
エラーを出してくれることにより、厳格なソースコードの作成に役立つのも、TSの強みである。
試しに、このエラーを抱えながら次のコンパイル操作を行なってみる。

ちなみに、変数や定数の宣言については下記の様に色々あります。
簡単に説明するのであれば、古いJSの形式は「var」を使っていたが、変数、定数をしっかり宣言していこう、という流れがあった。

・const ・・・定数宣言、基本的に内容の上書きをしない固定値。（ES6）
・let ・・・変数宣言、代入されている値は変動あるもの。（ES6）
・var ・・・古いJSでの記述方法、古いブラウザの制約がある場合等に利用するのが望ましい。
※古いブラウザを引きずらなくて良い場合は、上の2つでの記述が望ましい。

余談、文字列連結はカッコ悪いので、フォーマット文字列（ES6）を使って行くべし。
バッククォート・・・「`」
Shift+@(MAC JIS)

コンパイル方法（npx tsc [ts名]）

tsc : TypeScript Compiler
を利用しコンパイルします。

「tutorial.ts」をコンパイルする様にコマンド入力。

$ npx tsc tutorial.ts

「tscript.jsom」の生成を行なっている様であれば下記でのコンパイルも可能。
※VSCodeでのコンパイルは、下記を押すと「ビルドタスク」が表示されるので用途によってはこちらをご利用下さい。

Ctrl＋Shift+B
Command+Shift+B(MAC)

ウォッチかビルドを選べる、一度であればビルド、ウォッチであるとファイルの変更を監視して変更された際に即時コンパイルが走る様になる。
コンパイルが正常に終わると、tutorial.jsが出力されます。

コマンドライン上での確認

jsはHTMLに組み込んで動かすのが主流ですが、node.jsを使うことによりコマンドライン上で動作させることが出来るので今回、出力されたjsの動作確認として下記コマンドを実行。

$ node tutorial.js

コンソールログで、「3」と出るということは、tsとしては型のエラーは出ているが、jsとしては動いているということです。

今回はここまでです。

この記事の続きとして、モジュールバンドラー等の各種ツールのインストール、設定について重点にまとめましたので、
こちらのリンクをご参照下さい。

TypeScriptの開発環境構築（2）

DWAPP

TypeScriptの開発環境構築（1）