Typescriptを触ってみて学んだこと

勉強してみて学んだことを自分用にまとめました。

型宣言

var str: string = "hello"
var num :number  = 23;

宣言後に異なる型を代入するとエラーになる

関数のオーバーロード

同じ関数名に対して、引数と返り値の型の組み合わせ（シグネチャ)を予め設定しておくことで、異なる引数に対応できるが、シグネチャ外の組み合わせをエラーにすることができる

function add(a: number, b: number): number; // シグネチャ
function add(a: string, b: string): string;

function add(a: any, b: any): any {
    if (typeof a === "string" && typeof b === "string") {
        return a + " " + b;
    }
    return a + b;
}

console.log(3,"hello");
=> エラー

クラス

class User{
    // コンストラクタによるインスタンス変数の初期化
    constructor(private _name: string){}
    // ゲッター・セッター
    get name(): string{
        return this._name
    }
    set name(newName :string){
        this._name = newName
    }
    // インスタンスメソッド
    greeting():void{
    console.log("I am " + this._name);
    }
}

クラスの継承

class User {
    // protedted属性のインスタンス変数は継承先クラス内でも呼び出し可能
    constructor(protected _name: string) { }
    get name(): string {
        return this._name
    }
    set name(newName: string) {
        this._name = newName
    }
    // インスタンスメソッド
    greeting(): void {
        console.log("I am " + this._name);
    }
}

class AdminUser extends User {
    private age: number;
    constructor(_name: string, _age: number) {
        // 親クラスのコンストラクタメソッド
        super(_name);
        this.age = _age;
    }
    greeting(): void {
        // 親クラスのメソッド
        super.greeting();
        console.log("my age: "+ this.age);
    }
}

インターフェースとメソッド

interface Store1{
    ramen: number;
}

interface Store2{
    curry: number;
}

// インターフェースの継承
interface FinalStore extends Store1, Store2{
    fries: number;
}

var menu_total = (store : FinalStore):number =>{
    return store.ramen + store.curry + store.fries;
}

// storeはFinalStoreのインターフェースを持っているのでmenu_totalメソッドの引数に使用可能
var store = {
    ramen: 600,
    curry: 700,
    fries: 300,
    water: 700
}
console.log(menu_total(store));
=> 1600

インターフェースを使用することでクラスのメンバを保証させることが可能

interface Person {
    name: string;
    greet():void;
}

class User implements Person{
    name: string;
    constructor(name: string) {}
    greet(): void {
        console.log("hi! i am " + this.name);
    }
}

Userクラスはインターフェースで指定されたプロパティを持たないとコンパイルエラーとなる