typescript class

classは2015年javascriptでもできるようだが、type scriptでclassを使って行きます。
私は基本的関数を作ってお終い。が多くほとんど問題が無かったが、何度も同じような処理をさせる必要が出てきたのでclassを使った備忘録です。

classの使い方

classで出てくるものはpublic,private,constructor,onとりあえずこれらを使用しました。superとかextendsは使っていない。

クラスの作成方法

classでまず必要なのがconstructorでした。とりあえずこれだけは押さえておきたい。

export class demo {
    constructor(hoge){
    }
//処理など
}

//他のファイルからclassを呼び出す。

let n_class = new demo("hoge");

こんな感じでconstructorを使います。

constructorとは

日本語訳で構築者となります。
ここにはクラスを呼び出したときに実行してほしい機能を入れます。

//これは間違いです。動きません。
export class demo{
        constructor(hoge){
            socket = new WebSocket('URL');
            console.log("classが起動しました");
    }
}

constructor内と外

class内で関数の作成はconstructor内に記述、外に記述することができます。

export class Demo {
    constructor(hoge) {
        this.socket = new WebSocket('URL'); // this.socket に変更
        console.log("classが起動しました");
        const alert_a = (()=>{console.log("アラートa");})//<--呼び出せない。

        this.alert_c(); // コンストラクタで呼び出し
    }

    // クラスメソッドとして定義
    alert_c() {
        console.log("アラートc");
    }
    // クラスメソッドとして定義
   public alert_b() {//<--　alert_c
        console.log("アラートB");
    }
}

constructor内に記述したものはconstructor内でしか、基本的に呼び出しができません。

変数

classだと変数定義時 private ,publicを使用します。privateはこのclass内でしか使用しない場合、 publicはこのclassを呼び出し、参照する場合publicを使用します。

export class demo{
    private socket: WebSocket;
    public hoge:string;
        constructor(piyo){
            this.socket = new WebSocket('URL');
            console.log("classが起動しました");
            this.hoge ="参照できる"
    }
}

仮に上記のようなクラスがあると

let democlass = new demo("piyo");
console.log(democlass.hoge);//<--できる
console.log(democlass.socket);//<--不可

関数も同様

関数も同じようにpublicにすると他から呼び出しができます。
暗黙的publicとなるので、何も書かないと呼び出しができる状態です。

export class Demo {
    constructor(hoge) {
        this.socket = new WebSocket('URL'); // this.socket に変更
        console.log("classが起動しました");
        const alert_a = (()=>{console.log("アラートa");})//<--呼び出せない。

        this.alert_c(); // コンストラクタで呼び出し
    }

    // クラスメソッドとして定義
   private alert_c() {
        console.log("アラートc");
    }
    // クラスメソッドとして定義
   public alert_b() {//<--　alert_c
        console.log("アラートB");
    }
}


let democlass = new demo("piyo");
democlass.alert_c()//<--不可
democlass.alert_b()//<--できる

callback

classを呼び出した後、何かイベントが合った際通知させたい場合onを使います。

//実現したい事
export class Demo {
    constructor(hoge) {
        this.socket = new WebSocket('URL'); // this.socket に変更
    }
    cfunction()//<--を呼び出したい。

}
let democlass = new demo("piyo");

const cfunction = (()=>{
    console.log("呼ばれた")//
})

上のように逆にclass内で何か合った際そのイベントを返すcallbackをしたいときは

//未検証
export class Demo {
    private notify: any;
    constructor(hoge) {
        this.socket = new WebSocket('URL'); // this.socket に変更
    }
    public on (eventName:string,callback:any){
        if(eventNmae == "notify"{this.notify=callback})
    }

    public NotifyEvent = (()=>{
        this.notify("messagedata");
    })
}


let democlass = new Demo("hoge");

democlass.on("notify",(data)=>{
    console.log(data);
    //messagedataが表示
})

democlass.NotifyEvent();

少し長いですが、こんな感じで、

1. democlass.NotifyEvent();
2. this.notify("messagedata");
3. public on eventNmae == "notify"
4. democlass.on("notify",(data)=>{...})

の順でイベントが発火をすることができます。

非同期の初期化

classの呼び出し、初期化（初期設定）constructorで実装できますが、非同期処理の場合は確かできなかったはずです。その場合init関数を作成し呼び出してあげてください。

export class Demo {
    private notify: any;
    constructor(hoge) {
        this.socket = new WebSocket('URL'); // this.socket に変更
    }
    init = (async () => {
    //...非同期処理
    })
}
let democlass = new Demo("piyo");
democlass.init();

インストラクター初期化時引数を必ず入れてほしい場合

classの場合 newで初期化できますが、引数を必ず入れてほしい場合は次のようにします。

export class Demo {
    constructor(url: string, ctype: string) {
        if (!url) {
            throw new Error('URL is required');
        }
    }
}

let democlass1 = new Demo();//<--エラー
let democlass1 = new Demo("https://domain.com");

まとめ

関数で良いじゃんってなる状況がまだまだありますが、汎用的に使いまわしできるので便利な部分もあります。しかし、this.やcallbackがややこしく、設計段階で決めて置かないとカオスなコードになるので注意しながら使えばやっぱり便利です。