Typescriptを始めたいけどどこから初めて良いかわからないという方のために、TypescriptのWebサイトに掲載されていた同名のページを少しだけアレンジして紹介してみようと思います。

環境の準備

まず、node.jsがPCにインストールされている必要がある。インストールされていない場合、下記のページからLTSの最新版をダウンロードしてインストールします。
https://nodejs.org/en/

Typescriptのインストール

下記のコマンドを実行して、typescriptのライブラリをダウンロードしてきます。会社の環境などで、プロキシサーバが間にある方は、プロキシありの方のコマンドを実行してください。

プロキシなし

npm install -g typescript

プロキシあり

npm install -g typescript

最初のTypescriptファイルの作成

まずテキストエディタを開いて、下記のJavascriptコードをgreeter.tsというファイルに保存してください。

greeter.ts

function greeter(person) {
    return "Hello, " + person;
}

let user = "Jane User";

document.body.innerHTML = greeter(user);

Typescriptコードのコンパイル

次にコマンドプロンプトを開き、さっき作ったgreeter.tsが保存されているパスに移動してから下記のコマンドを実行します。

コマンド

tsc greeter.ts

実行すると、同じコードが書かれたgreeter.jsというファイルが作成されます。

次に、Typescriptが提供している機能を使ってコードを改良します。

greeterの引数にstringの型定義を追加しましょう。

function greeter(person: string) {
    return "Hello, " + person;
}

let user = "Jane User";

document.body.innerHTML = greeter(user);
Type annotations

上記のコードによって、javascriptにはない型定義の機能を追加することができました。試しに、変数userに数値を入れて、greeterメソッドを呼んでみます。

function greeter(person: string) {
    return "Hello, " + person;
}

let user = 12345;

document.body.innerHTML = greeter(user);

結果はこの通り。エラーが出力されました。

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

この場合でもgreeter.jsは作成され、使うこともできますが期待通りに動作しない可能性があることをTypescriptが警告を出します。

typeアノテーション

インタフェース

今度は、firstNameとlastNameを持っているオブジェクトを表現するインターフェースを作成します。Typescriptでは、

interface Person {
    firstName: string;
    lastName: string;
}

function greeter(person: Person) {
    return "Hello, " + person.firstName + " " + person.lastName;
}

let user = { firstName: "Jane", lastName: "User" };

document.body.innerHTML = greeter(user);
Classes

クラス

class Student {
    fullName: string;
    constructor(public firstName: string, public middleInitial: string, public lastName: string) {
        this.fullName = firstName + " " + middleInitial + " " + lastName;
    }
}

interface Person {
    firstName: string;
    lastName: string;
}

function greeter(person : Person) {
    return "Hello, " + person.firstName + " " + person.lastName;
}

let user = new Student("Jane", "M.", "User");

document.body.innerHTML = greeter(user);

TypescriptWebAppの起動

<!DOCTYPE html>
<html>
    <head><title>TypeScript Greeter</title></head>
    <body>
        <script src="greeter.js"></script>
    </body>
</html>

デバッグ

クロームで実行したJavascriptを実行し、デバッグをしてみましょう。
コードを止めると、javascriptのコードではなく、typescriptが表示されます。

まとめ

これにより、typescriptの開発環境ができました。
typescriptはjavascriptと異なりコンパイルというプロセスが入るため、実行しなくても記述ミスや型の間違いを見つけてくれます。
記述量は多少増えますが、規模が大きくなればなるほど、開発を助けてくれるはずです。

Typescriptチュートリアル