Ugo

Webエンジニアのためのプログラミング情報サイト

TypeScriptとは何か？TSの使い方とJavaScriptとの違い。

TypeScriptとは何か？TSの使い方とJavaScriptとの違い。

この記事では、人気上昇中のプログラミング言語「TypeScript」について、その使い方とJavaScriptとの違いを中心に説明する。

著者はJavaやC++といったオブジェクト指向の言語を3年ほど経験した後に、Angularを中心としたWebフロントエンドの世界に移行してきた。

TypeScriptはJavaやC++とJavaScriptの間の溝を埋めてくれる言語でもあり、著者のような経歴を持つ開発者は特にTypeScriptのメリットを感じられるだろう。

目次

TypeScriptとは？

TypeScriptはJavaScriptを拡張して作られたプログラミング言語であり、2014年にMicrosoftによってリリースされた。

ReactやAngularといった人気のJavaScriptフレームワークのオフィシャルな開発言語である。

JavaScriptにおける大規模開発での弱点を補う目的でTypeScriptは開発された。

名前の”Type”からも連想できるように、TypeScriptは厳密にデータ型を指定できる言語である。

なお、JavaScriptの拡張子は「.js」であり、TypeScriptの拡張子は「.ts」だ。

TypeScriptの特徴

TypeScriptのおもな特徴は以下の通りだ。

  • TypeScriptはJavaScriptのスーパーセット
  • 大規模開発に向いている
  • JavaやC++開発者にとっては馴染みやすい

それぞれについて説明していこう。

TypeScriptはJavaScriptのスーパーセット

TypeScriptはJavaScriptのスーパーセットである。

つまり、TypeScriptのファイルに記述されたJavaScriptのコードはすべて有効。

なお、TypeScriptは実行する前に純粋なJavaScriptのコードへと変換される。

大規模開発に向いている

TypeScriptはJavaScriptを大規模開発にも対応できるように作られた言語。

もちろん小規模のプロジェクトでもメリットを享受することはできるが、よりその恩地に授かることができるのは大規模開発においてだろう。

大規模なプロジェクトにおいては複数の開発者が共同で開発をおこなう。そのため、一般的にはデータ型が常に明示されている静的型付け言語のほうがコードを理解するのが容易だと考えられている。

JavaやC++開発者には馴染みやすい

著者が強調したいTypeScriptのもうひとつのメリットは、JavaやC++といったオブジェクト指向言語に慣れた開発者にとって馴染みやすいという点だ。

JavaとJavaScriptは誕生した背景も違えばコンセプトもまったく違う。

特に静的型指定言語に慣れ親しんだ人間にとっては、動的な型指定をおこなうJavaScriptは非常に危なっかしい印象を受けるだろう。

その点、静的型指定言語であるTypeScriptはその部分で違和感を感じることなく、使用できるのでハードルは低いといえるだろう。

また、クラスの扱いという点においてもTypeScriptのクラスはJavaScriptのそれよりもJavaやC++に近い。

JavaScriptとTypeScriptとの違い

では、JavaScriptとTypeScriptの違いを見ていこう。

以下の表はJavaScriptとTypeScriptのおもな違いをまとめたものだ。

JavaScriptTypeScript
データ型動的型付け言語静的型付け言語
型のチェック実行時コンパイル時
オブジェクト指向プロトタイプベースクラスベース
JavaScriptとTypeScriptの比較

それぞれについて詳しく見ていこう。

動的型付け言語 vs 静的型付け言語

JavaScriptといえば動的型付けの代表格である。動的型付け言語とはコード内ではデータ型を明記せずに実行する際に型を自動で決定する言語である。

TypeScriptはその名前からも分かるようにコードにおいてデータ型を明示する言語である。そういった言語は静的型付け言語と呼ばれる。

この点において、JavaScriptとTypeScriptは対照的である。

型チェックのタイミング

JavaScriptとTypeScriptでは型がチェックされるタイミングも異なる。

JavaScriptではエラーはコードを実行する際に検出されるが、TypeScriptではエラーはコンパイル時に発見することができる。

ほとんどのIDEではコードを記述している時点でエラーを検出する機能が備わっているので実際はもっと早いタイミングでデータ型にまつわるエラーは回避することができる。

これによってTypeScriptでは、リリース後に発見されるバグも想定的に少なくすることができる。

プロトタイプベース vs クラスベース

JavaScriptとTypeScriptのもうひとつの大きな違いはオブジェクトの生成方法にある。

JavaScriptはインスタンスを持たないプロトタイプベースのオブジェクト指向言語である一方、TypeScriptはJavaやC++のような一般的なクラスベースのオブジェクトを持つ。

この記事ではこの点についてはあまり深く言及しないが、近年ではJavaScriptもClassが追加されるなど一般的なオブジェクト指向に近い方向性に進んでいる。

TypeScriptの使い方

次にTypeScriptの使い方の例を紹介しよう。

ここではコマンドプロンプトやターミナルといったコマンドラインを使ったTypeScriptの実行方法を説明する。

  1. TypeScriptをインストールする。
  2. TypeScriptのファイルを用意する。
  3. TypeScriptファイルをコンパイルする。
  4. JavaScriptファイルを実行する。

npm（node package manager）をインストールしていない場合は、こちらの記事を参考にしてあらかじめインストールしてほしい。

TypeScriptをインストールする

TypeScriptのインストールは簡単だ。

コマンドラインに以下を入力して実行する。

npm install -g typescript

TypeScriptのファイルを用意する

PCの適当な場所に新しいフォルダを作成しよう。

作成したらそのフォルダの中に「hello.ts」というファイルを作成する。

テキストエディタを使用して以下のコードを記述してセーブする。

constmessage: string = 'Hello World!!';
console.log(message);

TypeScriptファイルをコンパイルする

コマンドラインにて作成したフォルダの中に移動して以下のコードを実行する。

tsc hello.ts

実行するとフォルダの中に「hello.js」というファイルが作成される。

JavaScriptファイルを実行する。

最後に以下のコマンドを使ってJavaScriptファイルを実行すると結果がコンソールに出力される。

node hello.js

TypeScriptのコード例

最後にTypeScriptのコードの例を確認しよう。

TypeScriptのHello World!!

TypeScriptでのHello Worldの出力を見てみよう。

書き方には様々なバリエーションが考えられるが、以下の例はもっともTypeScriptらしいだろう。

constmessage: string = 'Hello World!!';
console.log(message);

以下がJavaScriptのHello Worldの出力例だ。

const message = 'Hello World!!';
console.log(message);

コードはほとんど同じであるが、TypeScriptでは変数messageを代入する際に型指定を行っている。

TypeScriptの関数

次にTypeScriptの関数の例を見てみよう。

public addNumbers(first: number, second: number): number {

return first + second;
}

JavaScriptの場合は単に型指定をしないだけなのでそれほど違いはない。

public addNumbers(first, second) {

return first + second;
}
MENU