【TypeScript入門】特徴と機能の一部をまとめました

ゆーた

2015.12.09

Web制作

実際にTypeScriptに触ってみる

TypeScriptの公式ページには「Playground」というDemoを試せるフィールドが用意されています。

「とりあえず触ってみないとわからない」ということで、Playgroundにクラスを書いて実装してみましょう！
今回はUserクラスに苗字、名前を渡して、フルネームを取得するというものを作りたいと思います。

1. Userクラスを定義します

class User {
}

2.constructorを作成します

constructorはインスタンスを作成したタイミングで実行されます。

class User {
    constructor(){}
}

3. constructorの引数に名前を渡します

プロパティは外から変更されたくないので、privateにします。
引数がない場合はデフォルトで「foo」と「bar」が入るようにします。

class User {
    constructor(
        private firstName:string = 'foo',
        private lastName:string = 'bar'
    ){}
}

4. getFullNameメソッドを定義します

getFullNameはreturnで何も返しません。
この場合、getFullNameの型はvoidになります。

class User {
    constructor(
        private firstName:string = 'foo',
        private lastName:string = 'bar'
    ){}

    public getFullName():void {
    }
}

5. getFullNameを実装します

constructorで受け取った引数はプロパティとしてセットされるので、this.プロパティ名でアクセスできます。
getFullNameでは苗字と名前の間にスペースを入れてalertで名前を表示します。

class User {
    constructor(
        private firstName:string = 'foo',
        private lastName:string = 'bar'
    ){}

    public getFullName():void {
        alert(this.firstName + ' ' + this.lastName);
    }
}

6. Userを実行します

UserをnewしてgetFullNameを実行します。
右上のJavaScriptと書かれた隣に[Run]があるのでクリックしましょう！

class User {
    constructor(
        private firstName:string = 'foo',
        private lastName:string = 'bar'
    ){}

    public getFullName():void {
        alert(this.firstName + ' ' + this.lastName);
    }
}

let user = new User('Futa','Baba');
user.getFullName();

7. 生成されたコードを見てみましょう

戻って生成されたコードを見てみましょう。
キレイにコンパイル（トランスパイル）されています。

var User = (function () {
    function User(firstName, lastName) {
        if (firstName === void 0) { firstName = 'foo'; }
        if (lastName === void 0) { lastName = 'bar'; }
        this.firstName = firstName;
        this.lastName = lastName;
    }
    User.prototype.getFullName = function () {
        alert(this.firstName + ' ' + this.lastName);
    };
    return User;
})();
var user = new User('Futa', 'Baba');
user.getFullName();