対象読者

プログラミングの基本的な知識がある方
JavaScriptの基本的な知識がある方
TypeScriptがどんなものなのか、雰囲気を知りたい方

TypeScriptとは

TypeScriptはMicrosoft社が開発したオープンソースのプログラミング言語です。TypeScriptの大きな特徴は

JavaScriptに厳格な型の概念を用いることができる。
クラスの概念を基本とした本格的なオブジェクト指向プログラミングができる。
JavaScriptの文法がそのまま使える
という点です。

それでは実際に試してみましょう。

TypeScriptの環境構築

環境構築については本記事では割愛させていただきます。公式サイトの下記をご覧ください。

型注釈

それでは、実際にTypeScriptの機能を見てみましょう。ここで説明する型注釈は、型を明示する方法を提供します。JavaScriptとTypeScriptの２つの例で見てみましょう。

(javascript)

function hello(name) {
    console.log("こんにちは、" + name + "さん");
}

こちらはJavaScriptで関数を作成し、それを呼び出したものです。

同様のプログラムをTypeScriptで型注釈をつけて作成したプログラムは、このようになります。

function hello(name:string) {
    console.log("こんにちは、" + name  +　"さん");
}

関数helloの引数nameと、変数meに:stringが付記されています。これにより、helloに渡すべき型は厳密にstringとなります。

たとえば、次のようにhello関数を呼び出すプログラムを続けて記述します。

function hello(name:string) {
    console.log("こんにちは、" + name  +　"さん");
}
let me = 5;
hello(me);

コンパイルを実行すると、次のようにエラーとなります。

error TS2345: Argument of type 'number' is not assignable to parameter of type 'string'.

これは、型が一致しないことを表すエラーです。引数meがnumber型になっているため、起こっています。

インタフェース

次はインタフェースを使ったプログラムを見てみましょう。

//インタフェースの作成
interface Score{
    kokugo: number;
    sansu: number;
}
//関数
function displayScore( value: Score ) {
    console.log("国語:" + value.kokugo);
    console.log("算数:" + value.sansu);
    let total = value.kokugo + value.sansu;
    console.log("合計:" + total);
}

インタフェースの役割は、JavaScriptオブジェクトのプロパティを保証することです。

関数displayScoreが引数として受け取るオブジェクトは、Scoreインタフェースが示すように、数値型のプロパティであるkokugoとsansuを持っていなければなりません。

この関数を呼び出すいくつかの例を見てみましょう。
(例１)

let taro = { kokugo: 80, sansu: 90 };
displayScore(taro);

こちらは、正しくコンパイル・実行できます。taroのオブジェクトを作成は、JavaScriptの文法でそのまま記述ができています。

(例２)

let taro = { koku: 80, su: 90 };
displayScore(taro);

こちらをコンパイルすると次のようなエラーとなりました。

error TS2345: Argument of type '{ koku: number; su: number; }' is not assignable to parameter of type 'Score'.
  Type '{ koku: number; su: number; }' is missing the following properties from type 'Score': kokugo, sansu

このエラーでは、プロパティ名がScore型と一致しないことを表しています。型のみならずプロパティ名も厳密にチェックされる点はinterfaceのすごいところだと感じます。

それでは、もう少し見てみましょう。

(例３)

let taro = { kokugo: 80, sansu: 90, rika:75, syakai:80 };
displayScore(taro);

こちらは正しくコンパイルすることができます。このように、interfaceで定義するプロパティ以外のものが含まれている点は問題になりません。つまりinterfaceの役割は、オブジェクトに特定のプロパティが含まれることを保証することにあります。

クラスの作成

それでは最後にクラスを作成したオブジェクト指向プログラミング的なサンプルを見てみましょう。

class Seiseki{
    //フィールド
    name: string;
    kokugo: number;
    sansu: number;
    //コンストラクタ
    constructor(name: string, kokugo: number, sansu: number) {
        this.name = name;
        this.kokugo = kokugo;
        this.sansu = sansu;
    }
}
function displayScore( value: Seiseki ) {
    console.log("国語:" + value.kokugo);
    console.log("算数:" + value.sansu);
    let total = value.kokugo + value.sansu;
    console.log("合計:" + total);
}
//利用例
let taro = new Seiseki("タロウ", 80, 70);
displayScore(taro);

Javaなどのオブジェクト指向言語の経験者はイメージしやすいかもしれません。Seisekiというクラスを作成し、new演算子を用いて、オブジェクトを作成しています。