TypeScriptとは?基礎の基礎から使い方までわかりやすく解説

TypeScriptとは現在徐々に人気が上昇しているプログラミング言語です。しかし「TypeScriptって何?」「TypeScriptの実装方法がいまいちわからない」などの疑問を持たれている方もいるのではないでしょうか?

ここではTypeScriptに興味がある方、これから学んでみたい方に向けて、TypeScriptの概要や特徴、実際にインストールしてTypeScriptを実行する方法についてわかりやすく解説していきます。

TypeScriptとは

TypeScriptは2012年にマイクロソフトによって開発されたオープンソースのプログラミング言語でJavaScriptのスーパーセット(上位互換)な位置づけの言語です。

変数やサブルーチンを安全に扱える静的型付き言語であることやクラスを使用できるなどJavaScriptの欠点を補完することを目的として開発されました。

TypeScriptはクライアントサイド・サーバーサイド両方の開発で利用することが可能で、大規模なアプリケーション開発を行うことが可能です。

TypeScriptの特徴

クラスベースな言語

JavaScriptではクラスという概念が存在しませんが、TypeScriptはクラスベースな言語のため、Javaなどのオブジェクト指向言語同様クラスを扱うことができます。
そのため、オブジェクト指向言語を使用したことがある人なら使い慣れているコンストラクタ、メソッド、プロパティなどのメンバを扱うことももちろん可能です。

JavaScriptとの互換

前述のとおりJavaScriptのスーパーセットな言語であるためJavaScriptのプログラムはTypeScriptでも有効なプログラムとなります。また、JavaScriptのライブラリを使用できたり、JavaScriptからTypeScriptのコードの呼び出しやその逆も可能です。
TypeScriptで記述されたコードはコンパイルすることによってJavaScriptのコードに変換することができます。

静的型付き言語

静的型付き言語とはプログラムに記述された変数や引数などの型をコンパイル時に決められます。プログラム実行前に予めエラーを検出することが可能なため、プログラムをより安全に扱うことができます。

TypeScriptのインストール

ここでは実際にTypeScriptをインストールする方法について解説します。

まずは前提としてNode.jsをインストールしておきましょう。以下の公式サイトからOS別にインストーラーをダウンロードできます。

https://nodejs.org/ja/download/

Node.jsをインストールしたら、コマンドプロンプトまたはターミナルでNode.jsとnpmがインストールされているか確認します。

次に以下のコマンドでTypeScriptをインストールします。

インストールしたらバージョンを確認しておきます。

バージョン(2019/02時点で Version 3.3.3333)が表示されたら成功です。

TypeScriptを動かしてみよう

ここではTypeScriptでブラウザに「Hello World」を出力するプログラムを作成してみましょう。

まずはターミナル上で「Hello World」を出力させるためのファイル「Hello.ts」を作成します。

TypeScriptでブログラムを作成するためのファイルの拡張子は「.ts」になります。

Hello.tsに以下のプログラムを記述します。

プログラムを作成して保存したらコンパイルを実行します。

コンパイルが成功するとJavaScriptに変換されたファイル「Hello.js」が作成されます。

「Hello.js」のプログラムは以下のように記述されています。

同じディレクトリにブラウザに出力するためのHTMLファイルを作成します。

HTMLファイルには、上記のように<script>タグに実行するJavaScriptファイル名を記載しておきます。
HTMLファイルを作成したら実行してみましょう。

ブラウザ上に「Hello World」が出力されたら成功です。

まとめ

ここではTypeScriptの概要や特徴、インストールから実際のプログラムの実行手順まで解説しました。

サンプルプログラムで紹介したようにTypeScriptではクラスを記述でき、かつJavaScriptに実行可能なファイルに変換することが可能ですので非常に便利であることがわかりました。

もし、この記事を読んでTypeScritpに興味が持てたらぜひスキルアップに学んでみることをおすすめします。

よく読まれている記事

「技術について(開発言語/ツール情報)」でよく読まれている記事