TypeScriptは、オープンソースのプログラミング言語です。大規模開発ができるように設計されていて、Googleの開発で採用されるなど、世界的な注目を集めています。

この記事では、TypeScriptの特徴や基本的な使い方、おすすめの勉強法について解説しました。

TypeScriptを活用したい入門者はぜひ参考にしてください。

【入門者向け】TypeScriptとは？

TypeScriptは、JavaScriptを拡張して作られたプログラミング言語です。2014年頃にMicrosoftによって開発・発表されました。

TypeScriptで書かれたコードをコンパイルするとJavaScriptのコードに変換されます。そのため、JavaScriptファイルが実行できる環境ならすぐに使えて、JavaScriptライブラリもTypeScriptから使用できるなど、互換性の高さが特徴です。

TypeScriptは、大人数のプログラマーが開発に携わる場合でもエラーを防ぎやすいように設計されています。ほかにも、変数のデータ型をあらかじめ決められることや、1つの関数定義で異なるデータ型の引数を処理できることなどの特徴があります。

なお、TypeScriptのより具体的な機能については、この記事の後半で解説します。

これらの大規模開発に耐えられる仕様のため、2017年にGoogleが社内の標準開発言語としてTypeScriptを採用し、需要が拡大してきました。TypeScriptは日本国内でも今後の普及が見込まれる、将来性の高い言語と言えるでしょう。

TypeScriptとJavaScriptの違い

TypeScriptは、JavaScriptが進化したような特徴を持つイメージのプログラミング言語です。TypeScriptとJavaScriptの具体的な違いとして、以下の要素があります。

• JavaScriptは動的型付け、TypeScriptは静的型付け
• TypeScriptではJavaScriptと同様の構文が使える

1つ目の違いは、変数のデータ型に関するものです。

データ型とは、プログラムで扱われるデータの種類を示す用語で、JavaScriptコードでは実行時にデータ型が自動で決まります。この仕組みは動的型付けと呼ばれ、ソースコードを手軽に書ける反面、実行しないとエラーが分からないという短所があります。ほかの言語ではRubyやPythonなどで動的型付けが採用されています。

一方、TypeScriptは変数のデータ型をあらかじめ決めることのできる言語です。この仕組みは静的型付けと呼ばれ、コンパイルする時点でエラーが分かることや、コードの読みやすさ、大人数が開発に携わる環境で便利なことが特徴です。ほかの言語ではC#で静的型付けが採用されています。

2つ目は、TypeScriptにおいて、JavaScriptと同様の構文が使えることです。

TypeScriptはJavaScriptの機能を拡張して作られているため、JavaScriptの構文が使えます。なお、JavaScriptの特徴や基本的な使い方については「JavaScriptとは？初心者向けプログラミング体験もできる！」の記事を参照してください。

TypeScriptのメリット・デメリット

TypeScriptのメリット・デメリットについて解説します。まず、TypeScriptの主なメリットは以下の通りです。

メリット

• JavaScriptとの互換性がある
• 型を宣言するためエラーを未然に防げる

TypeScriptとJavaScriptは互換性があるため、すでにJavaScriptの開発環境がある場合は簡単に導入できます。JavaScriptファイルをTypeScriptから呼び出して使うことも可能です。

さらに、TypeScriptは変数の型をプログラムコード内で宣言できるため、エラーを未然に防げます。

一方、TypeScriptには以下のようなデメリットもあります。

デメリット

• 学習コストがかかる
• 日本語の情報が少ない

TypeScriptでプログラムを書く場合、クラスの作り方やデータ型の設定方法など、新たな知識を習得するための学習コストが必要です。ただし、JavaScriptの知識がある開発者にとっては、TypeScriptの学習はそれほど難しくありません。

また、TypeScriptは比較的新しい言語のため、日本語で書かれた情報が少ないこともデメリットと言えるでしょう。

TypeScript入門者も知っておきたいJavaScriptフレームワークとの関係性

TypeScriptでアプリケーションを作成するなら、JavaScriptフレームワークとの関係性を知ることが大切です。

フレームワークを使えば、アプリケーションを効率よく開発できます。フレームワークによって決められた設定ファイルの書き換えにより、アプリケーションを簡単に作ることが可能です。

JavaScriptフレームワークには複数の種類があります。主なフレームワークの特徴とTypeScriptとの関係性は以下の通りです。

AngularJS

AngularJSはGoogleによって開発されました。AngularJSの特徴は、様々な動作端末で動くことです。ページ数の少ないWebアプリケーションや、管理画面系のアプリケーションの作成に向いています。

AngularJSは、TypeScriptでの開発が推奨されているJavaScriptフレームワークです。なお、AngularJSについてさらに詳しく知りたい方はAngularJS入門の記事を参照してください。

React

ReactはFacebookによって開発されました。Reactの特徴は改良の早さと、動作が高速であることです。UIやシングルページアプリケーションの開発に向いています。

Reactは、JavaScriptでの開発が想定されたJavaScriptフレームワークです。拡張機能を使えばTypeScriptでも使えますが、推奨はされていません。

Vue.js

Vue.jsはEvan Youによって開発されました。Vue.jsの特徴は、ほかのライブラリと組み合わせやすいことです。簡単で小規模なアプリケーションから本格的な開発まで、柔軟に対応できます。

Vue.jsも、Reactと同様にJavaScriptでの開発が想定されたJavaScriptフレームワークです。なお、詳しく知りたい方はVue.js入門の記事を参照してください。

TypeScript入門！インストールからコンパイルまで

TypeScriptの動作環境を整え、簡単なコードを実行するまでの手順を具体的に解説します。

TypeScriptをインストールするためにnpmを用意する

TypeScriptファイルはJavaScriptに変換された上で実行されるため、まずはJavaScriptが実行できる環境を整えましょう。今回は、JavaScriptをデスクトップで使用できるNode.jsというプラットフォームを使用します。なお、Node.jsのインストール方法についての記事も併せてご覧ください。

Node.jsをインストールすると、パッケージ管理ツールのnpm（Node Package Manager）も自動的にインストールされます。

TypeScriptをインストール

コマンドプロンプトで次のコードを実行し、npmからTypeScriptをインストールしましょう。

$ npm install -g typescript

実行後、以下の赤枠内のような文字列が表示されればインストールは成功です。

なお、正しくインストールできているかは、次のコードでも確認できます。

$ tsc -v

実行後にVersion 3.6.4やVersion 3.8.3などと表示されたら、TypeScriptのインストールは成功です。

TypeScriptで「Hello World!」を表示する

TypeScriptで「Hello World!」を表示するために、以下の手順で作業を進めます。

1. 1. TypeScriptファイルや設定ファイルを保存するためのディレクトリを作成し、移動

$ mkdir sample-project

$ cd sample-project/

上記のコードをコマンドプロンプトで実行すると、sample-projectというディレクトリが作成され、その直下へと移動できます。

1. 1. コンパイルのための設定ファイルを作成

$ tsc –-init

上記のコードを実行すると、sample-project内にtsconfig.jsonという設定ファイルが作成されます。このファイルは、TypeScriptファイルをJavaScriptファイルに変換する際の設定が書かれたものです。

1. 1. 「Hello World!」を表示するためのTypeScriptファイルを作成

sample-project内に拡張子をtsとしたファイルを作成し、次のサンプルコードを記述してください。ファイル名は任意で構いませんが、今回はsample.tsとして解説を進めます。

ｌet message: string = “Hello World!”

console.log(message)

sample-project内にsample.tsファイルを作成した様子

1. 1. コンパイルを実行し、TypeScriptファイルからJavaScriptファイルに変換

コマンドプロンプトで次のコードを実行してください。

$ tsc

成功すると、sample-project内にsample.jsというファイルが作成されます。

sample-project内にsample.jsファイルが作成された様子

1. 出力されたJavaScriptファイルをコマンドプロンプトで実行

コマンドプロンプトで次のコードを入力すると、先ほど作成されたsample.jsファイルが実行できます。

$ node sample.js

実行後、「Hello World!」の文字列が表示されれば成功です。

TypeScriptのコードをhtmlで表示する

最後に、TypeScriptのコードをhtmlで表示する方法を解説します。

ただし、TypeScriptのコードはブラウザで直接実行できないため、手順③と同様にJavaScriptファイルに変換してからhtmlに組み込みましょう。具体的な方法は次の通りです。

1. 1. 手順③で作成したディレクトリに新たなTypeScriptファイルを作成

手順③で作成したsample-projectディレクトリ内に新たなTypeScriptファイル（sample2.ts）を作成します。そして、次のサンプルコードを記述してください。

ｌet message: string = “Hello World!”

document.body.innerHTML(message)

1. 1. コンパイルを実行し、TypeScriptファイルからJavaScriptファイルに変換

コマンドプロンプトで次のコードを実行してください。

$ tsc sample2.ts

成功すると、sample-project内にsample2.jsというファイルが出力されます。

1. 出力されたJavaScriptファイルをhtmlファイルに組み込み、ブラウザで開く

出力されたsample2.jsと同じディレクトリにhtmlファイルを作成し、次のサンプルコードを記述してください。

<!DOCTYPE html>
<html>
<head><title>htmlで表示する例</title></head>
             <body>
<script src=”sample2.js”></script>
</body>
</html>

作成したhtmlファイルを任意のブラウザで開き、「Hello! World!」の文字列が表示されていれば成功です。

ブラウザがhtmlからsample2.jsを読み込み、Hello World!と表示された様子

TypeScriptファイルからJavaScriptファイルへトランスクリプトすれば、Webページに組み込むことができます。

TypeScript入門者におすすめの学習法

TypeScript入門者におすすめの学習法は、参考書や本による独学や、スクール・勉強会への参加、オンライン学習などです。

TypeScriptの参考書や本を使えば、まとまった情報が自分のペースで学べます。そのため、好きな時間に独学で学習したい人におすすめです。

スクールや勉強会は、分からない点を講師に質問できるメリットがあります。ただし、スケジュールや開催場所の都合によっては、学習しづらい点がデメリットです。

オンライン学習なら、自分のペースで学びながら、必要に応じて講師への質問ができます。独学を基本として、分からないことを随時質問したい人におすすめです。

なお、プログラミング学習では実際にコードを書くことがポイントとなります。いずれの学習法においても、TypeScriptの実行環境に触れながら学んでください。

この記事では、TypeScriptの特徴や基本的な使い方について解説しました。TypeScriptは、JavaScriptの機能を拡張して作られたプログラミング言語です。大規模開発に耐えられる仕様のため、世界的に需要が高まっています。

TypeScriptの使い方を習得して、開発者としてのスキルアップに役立てましょう。