TypeScriptとは? JavaScriptとの違いは? 学習サイト、環境構築とサンプルをまとめてみた。

TypeScriptとは? JavaScriptとの違いは? 学習サイト、環境構築とサンプルをまとめてみた。今の会社でTypeScriptを使うことになったので勉強しておいてね

と言われたので、勉強することになりました。ただ、そもそもTypeScriptって何?というところだったらの学習したことをメモ。サンプルまで作ってみました。

TypeScriptとは

ざっとまとめると、

  • JavaScriptに近い感覚のプログラミング言語
  • トランススクリプトすると、JavaScriptのソースコードになる
  • マイクロソフトのC#の作者が今のJavaScriptに不満を抱いて開発

です。

全部知りたい人は下の動画を見るのが良いでしょう。

JavaScriptとの違いは?

基本的に文法は似ています。JavaScriptにない機能も追加されています。

こちらの動画でも紹介されています。

TypeScriptのメリットは?

そもそも、JavaScriptで良いよね?と思っている人も多いと思いますが、JavaScriptでは大規模開発をする際にクラス定義などの記述方法が分かりづらくなります。

ですが、TypeScriptを使うとJavaやC#などの言語のようにクラスを分けて書けるようです。

ただ、基本的に大規模開発でのメリットがある言語ですので、小規模な開発や既存のJavaScriptのソースコードがほとんどないような開発では逆に融通が利かないでしょう。

TypeScriptの学習サイト、サンプル

TypeScriptの学習サイト

ドットインストールで文法を中心にした入門講座があります。

https://dotinstall.com/lessons/basic_typescript

ブラウザで動かせるサイト

此方のサイトではTypeScriptが動かせます。また、JavaScriptの比較も出来ます。

上のドットインストールで動画を聞きながら、実際に試してみると良いでしょう。

http://www.typescriptlang.org/play/

TypeScriptの環境構築

元々マイクロソフト発の言語ですので、マイクロソフトのIDE

Visual Studio Codeと相性が良いです。

ざっとまとめると以下の通りです。

  1. Visual Studio Code のインストール
  2. Node.js と npm のとインストール
    • Node.js のサイトでダウンロード。npmも一緒にインストールされるはず。
    • node -v でインストールできたことを確認
    • npm -v で同じく確認。
  3. TypeScript のダウンロードとインストール
    • npm install g typescript
  4. Web サーバーのインストール
    • npm install g httpserver
  5. ブラウザのデバッガー拡張機能
    • Google Chromeの拡張機能をインストール

TypeScriptのサンプル

マイクロソフトのサンプルがオススメ

マイクロソフトのgithubのレポジトリでサンプルが公開されています。

https://github.com/Microsoft/TypeScriptSamples/

また、基本的にはJavaScriptと文法が共通なので既存のJavaScriptのサンプルを探して、TypeScriptで書き直してみるのも良いでしょう。

TypeScriptのテストユニット

大規模開発する以上はテストも書く必要があります。

以下のツールを使うことが多いようです。

mocha : JavaScriptのテストフレームワーク
istanbul : JavaScriptのカバレッジ測定ツール
remap-istanbul : TypeScriptをコンパイルした際に生成されるSourceMapをもとに、JavaScriptのカバレッジのレポートをオリジナルのTypeScriptのファイルにリンクさせるツール

シェアする

  • このエントリーをはてなブックマークに追加

フォローする