JavaScriptに変換できる「TypeScript」とは？

JavaScriptコードに変換できる言語はさまざまなものがありますが、近年利用者が増えてきている言語が「TypeScript」です。

マイクロソフトが開発を行い「JavaScriptのスーパーセット」として使うことができますが、「TypeScriptの特徴」や、「どのように使うことができるのか」を見ていきましょう。

「TypeScriptの特徴」を知っておこう！

TypeScriptは、「データ型を明示」して利用できる言語です。

例えば、変数を定義する場合に、

var name : String = 'taro'

と書くと、文字列型の変数を定義することができます。

データ型は他にも、

  • Boolean
  • Number
  • String
  • Array
  • Tuple
  • Enum

などさまざまなタイプが用意されています。

タイプ（Type)は、「データタイプ（データ型）」を表しているため、タイプ（Type)を重視した言語が「タイプスクリプト」です。

さまざまなエディタ・IDEでもサポートされているため、入力支援機能などを活用することで、快適な開発作業を行うことができるのではないでしょうか。

ちなみに、定数を使いたい場合は、

const 定数名: データ型 = 定数値

と書くと、定数を定義することができます。

関数を定義する場合は、

function 関数名(引数）:戻り値の型 {
    //処理
}

と書くことで関数を定義することができます。

例えば、２つの値を加算し、合計値が戻り値の関数を作るのであれば、

function addVal(num1: number, num2: number）:number {
    return num1 + num2;
}
※「引数・戻り値の型」は定義可能。

のような書き方になります。

他にも「アロー関数」という方法があり、

var addNum = function(num1: number, num2: number): number {
	return num1 + num2;
};
console.log(addNum(1, 2));  // 3

という記述も可能です。

「クラス」を作ることができるのが「TypeScript」の大きな特徴ですが、クラスを作るには「class」キーワードを利用していきます。

class Employee {
    private id: number;
    private name: string;
    private dept: string;

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

    public showEmployee(): string {
        return "id=" + this.id + " name=" + this.name + " dept=" + this.dept;
    }
}

var emp: Employee = new Employee(1, 'tanaka', 'marketing');
console.log(emp.showEmployee());

このように、クラスベースのオブジェクト指向言語に慣れている方には、大変理解しやすいプログラムとなっています。

しかし、Javascriptの基礎を理解していることがTypeScriptを利用する前提知識となりますので、未経験の方はまず、「Javascript」の基礎から学んでいくようにしましょう。

TypeScriptはJavaScriptコードに変換して実行するため、Javascriptが理解できることで、バグの原因を見つけやすくなります。

現在利用されている多くのブラウザは「Javascript」しか解釈・実行できないため、このような仕組みとなっているのですね。

「C++・Java・PHP」など多くの言語がクラスを採用しているため、これらの言語をメインで利用している方もJavaScriptが使いやすくなるのではないでしょうか。

HOMEへ