TypeScriptとは？その特徴は？

2021年7月24日 2021年7月25日

こんにちは！CODE CLUB965のKです！

今回は、TypeScriptの基本についてまとめてみようと思います。

今回の記事は、TypeScriptがどんなものなのか、雰囲気を知りたい方で、ある程度プログラミングの基本的な知識がある方を対象にしています。（JavaScriptの基本的な知識があれば大丈夫です。）

TypeScriptとは？

まず、TypeScriptって何？という方もいると思うので簡単に説明します。

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

・JavaScriptに型の概念を用いることが可能
・クラスの概念を基本とした本格的なオブジェクト指向のプログラミング言語
・JavaScriptの文法をそのまま使える

といった点が挙げられます。

TypeScriptの機能

TypeScriptの環境構築については、調べれば他にもたくさんあるのでここでは割愛します。
もしかしたら別の記事で書くかもしれませんが、必要な方は調べてみて下さい。

型の明示(型注釈)

まず、JavaScriptの場合ですが、関数を作成し、それを呼び出したものが以下のようになります。

// JavaScript
function msg(name) {
    console.log( "Hello!! " + name );
}

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

// TypeScript
function msg(name:string) {
    console.log( "Hello!!" + name );
}

TypeScriptの例を見たら分かると思いますが、JavaScriptと違い、変数nameに「:string」が記述されています。
これにより、msg関数の引数に渡すべき型は厳密に string となるのです。

そのため、次のようにmsg関数を呼び出すプログラムを追加で記述した場合、

function msg(name:string) {
    console.log( "Hello!!" + name );
}

let name = 5;
msg(name);

上記の処理を実行すると、エラーになります。

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

これは、型が一致しないために起こるエラーです。
引数であるnameがnumber型になっているためエラーとなったことが分かると思います。

これが最初にも書いた特徴の一つである、

「JavaScriptに型の概念を用いることが可能」

ということです。

インタフェース

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

以下にインタフェースを使ったプログラムを記述します。

//インタフェース
interface Point{
    gold: number;
    silver: number;
}

//関数
function rankPoint( value: Point ) {
    console.log("ゴールド:" + value.gold);
    console.log("シルバー:" + value.silver);
    let total = value.gold + value.silver;
    console.log("合計ポイント:" + total);
}

関数rankPointが引数として受け取るオブジェクトは、Pointインタフェースで示す、数値型のプロパティのgoldとsilverを持っていなければいけません。

分かりづらいかもしれないので、上記の関数を呼び出す例を見ていきます。

// 例１
let taro = { gold: 75, silver: 80 };
rankPoint(taro);

これは問題なく実行できます。
JavaScriptの文法でそのまま記述ができていますね。

// 例２
let taro = { gold: 75, bronze: 80 };
rankPoint(taro);

上記の例ではエラーになります。
プロパティ名がPoint型と一致しないためにエラーになっています。
型だけではなく、プロパティ名も厳密にチェックされる点がインターフェイスの特徴です。

ついでに補足しておきますが、

// 例３
let taro = { gold: 75, silver: 80, bronze: 90 };
rankPoint(taro);

この例の場合は問題なく実行できます。

インターフェイスで定義しているプロパティ以外のものが含まれている場合は特に問題ありません。
要するにインターフェイスは、オブジェクトに特定のプロパティが含まれていることを保証するという役割がある訳です。

クラス作成

Javaなどのオブジェクト指向言語を経験している方であればイメージしやすいと思いますが、以下にクラスを作成した例を書いておきます。

// クラス
class Rank{
    //フィールド
    name: string;
    gold: number;
    silver: number;

    //コンストラクタ
    constructor(name: string, gold: number, silver: number) {
        this.name = name;
        this.gold = gold;
        this.silver = silver;
    }
}

// 関数
function rankPoint( value: Point ) {
    console.log("ゴールド:" + value.gold);
    console.log("シルバー:" + value.silver);
    let total = value.gold + value.silver;
    console.log("合計ポイント:" + total);
}

// 呼び出し
let taro = new Rank("Taro", 75, 80);
rankPoint(taro);

上記の例のように、Scoreというクラスを作成し、new演算子を用いて、オブジェクトを作成しています。

これも特徴の一つですね。