TypeScript の練習その１ #TypeScript

概要

チュートリアルをこなして TypeScript を学ぶ。TypeScript は Delphi、C# の生みの親であるアンダース・ヘルスバーグ氏が開発に関わっているので期待大。

ここで挙げるコードは Tutorial - Welcome to TypeScript にあるものを練習がてら手書きしたものですのであしからず。

ステップ１

tutorial_01.ts

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

var user = "Jane User";

document.body.innerHTML = greeter(user);

コンパイル・実行結果

tsc tutorial_01.tsでコンパイルすると、エラーなしで tutorial_01.js が生成される。

ここから分かったこと

TypeScript は JavaScript のスーパーセットなので JavaScript のままでも書ける
生成された tutorial_01.js は tutorial_01.ts と全く同じ内容になる

ステップ２

user 変数を文字列から配列に変更。

tutorial_02.ts

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

var user = [0, 1, 2];

document.body.innerHTML = greeter(user);

コンパイル・実行結果

tsc tutorial_02.tsでコンパイルすると、エラーなしで tutorial_02.js が生成される。しかし、文字列と配列は足し算できないので実行時エラーになる。

ここから分かったこと

TypeScript でも型を指定しないと不正な型指定をコンパイル時に検出してくれない

ステップ３

greeter 関数の person 引数に型として string を指定。

tutorial_03.ts

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

var user = [0, 1, 2];

document.body.innerHTML = greeter(user);

コンパイル・実行結果

tsc tutorial_03.tsでコンパイルすると、以下のエラーがでるが、tutorial_03.js は生成される。
tutorial_03.ts(7,27): error TS2082: Supplied parameters do not match any signature of call target: Could not apply type 'string' to argument 1 which is of type 'number[]'. tutorial_03.ts(7,27): error TS2087: Could not select overload for 'call' expression.

tutorial_03.js

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

var user = [0, 1, 2];

document.body.innerHTML = greeter(user);

ここから分かったこと

TypeScript では型指定しておけば不正な型指定をコンパイル時に検出してくれる
コンパイルエラーが出ても JavaScript は生成されるので注意が必要
生成された JavaScript からは型情報が取り除かれる

ステップ４

Person という interface を定義し、greeter 関数の person 引数に型として Person を指定。

tutorial_04.ts

interface Person {
    firstname: string;
    lastname: string;
}

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

var user = { firstname: "Jane", lastname: "User" };

document.body.innerHTML = greeter(user);

コンパイル・実行結果

tsc tutorial_04.tsでコンパイルすると、エラーなしで tutorial_04.js が生成される。

tutorial_04.js

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

var user = { firstname: "Jane", lastname: "User" };

document.body.innerHTML = greeter(user);

ここから分かったこと

interface を使うとある形をしたオブジェクトに別名を付けてそれを型として扱うことができるらしい
interface は生成された JavaScipt からは取り除かれる
interface を使うと型情報を元にコード補完が効くようになる

ステップ５

Student クラスを定義して、user 変数にそのインスタンスを指定する。

tutorial_05.js

class Student {
    fullname: string;

    constructor(public firstname, public middleinitial, public lastname) {
        this.fullname = firstname + " " + middleinitial + " " + lastname;
    }
}

interface Person {
    firstname: string;
    lastname: string;
}

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

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

document.body.innerHTML = greeter(user);

コンパイル・実行結果

tsc tutorial_05.tsでコンパイルすると、エラーなしで tutorial_05.js が生成される。

tutorial_05.js

var Student = (function () {
    function Student(firstname, middleinitial, lastname) {
        this.firstname = firstname;
        this.middleinitial = middleinitial;
        this.lastname = lastname;
        this.fullname = firstname + " " + middleinitial + " " + lastname;
    }
    return Student;
})();

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

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

document.body.innerHTML = greeter(user);

ここから分かったこと

TypeScript では class は class として宣言できる
コンストラクタは constructor と書く
コンストラクタの引数に public をつけると自動的に public フィールドとして扱われる
class は JavaScript が解釈できる形に変換される
Student は Person を継承していないが、Person で定義される宣言を Student も満たしているのでコンパイルエラーにならないし実行時エラーにもならない

練習結果

TypeScript ではまともなコード補完が効くので IDE が欲しくなる
1. Eclipse にプラグインを入れて試したがそこそこいい感じ
tscによるコンパイルには思ったより時間がかかる
C/C++、Java などのコンパイル型言語開発になれている場合、JavaScript ではなんとなく不安を感じるが TypeScript ではそれをある程度払拭できる

参考資料

コード置き場

https://github.com/okumura/typescript-tutorial