ITフリーランスエンジニアの案件・求人サイト
更新日

【初心者向け】TypeScriptとは？特徴やインストール方法を解説

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

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

TypeScriptとは

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

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

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

プロを目指す人のためのTypeScript入門　安全なコードの書き方から高度な型の使い方まで
created by Rinker

TypeScriptの特徴

クラスベースな言語

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

JavaScriptとの互換

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

静的型付き言語

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

TypeScriptのインストール

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

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

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

$ node -v
v10.15.1
$ npm -v
6.4.1

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

$ npm install -g typescript

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

$ tsc --version

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

TypeScriptを動かしてみよう

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

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

$ vi Hello.ts

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

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

class HelloWorld
{ 
    constructor(public displayText : string) {}

    test()
    {
        return this.displayText;
    }
}

var hello = new HelloWorld("HelloWorld");
document.body.innerHTML = hello.test();

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

$ tsc Hello.ts

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

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

var HelloWorld = /** @class */ (function () {
    function HelloWorld(displayText) {
        this.displayText = displayText;
    }
    HelloWorld.prototype.test = function () {
        return this.displayText;
    };
    return HelloWorld;
}());
var hello = new HelloWorld("HelloWorld");
document.body.innerHTML = hello.test();

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

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>TypeScriptはじめの一歩</title>
</head>
<body>
<script src="Hello.js"></script>
</body>
</html>

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

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

まとめ

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

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

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

＼　ログインしなくても検討機能が使える♪　／
TypeScriptの案件を見てみる