スポンサーリンク

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

ざっくりTypeScript解説。JavaScriptとの違いは? 学習サイト、環境構築とサンプルをまとめてみた。そもそもTypeScriptって何?というところだったらの学習したことをメモ。

 

スポンサーリンク

TypeScriptとは

ざっとまとめると、

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

です。

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

TypeScriptの基礎から実践・利用事例まで ― 第1回 Build Insider OFFLINE

 

JavaScriptとの違いは?

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

上の動画でも紹介されています。

 

TypeScriptのメリットは?

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

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

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

 

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

TypeScriptの学習サイト

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

TypeScript入門 (全19回)
JavaScriptの構文を拡張し、大規模開発にも使えるようにしたプログラミング言語、TypeScriptについて見ていきます。

 

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

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

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

TypeScript Playground

 

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のレポジトリでサンプルが公開されています。

microsoft/TypeScriptSamples
Community Driven Samples for TypeScript. Contribute to microsoft/TypeScriptSamples development by creating an account on GitHub.

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

 

TypeScriptのテストユニット

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

 

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

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

タイトルとURLをコピーしました