typescript class

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

classの使い方

classで出てくるものはpublic,private,constructor,onとりあえずこれらを使用しました。他にsuperとかextendsとかもありますが、今回は無視します。

クラスの作成方法

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

export class demo {
    constructor(hoge){//<--これ
        //初回呼び出しされる。
    }

}
let n_class = new demo("hoge");

constructorとは

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

export class demo{
        constructor(hoge){
            console.log("classが起動しました");
    }
}
let classdemo = new demo("gg");//<これをすれば「classが起動しました」ログが表示されます。

constructor内と外

classのconstructor外であれば他から呼び出しができます。

export class demo{
        constructor(hoge){
            const alerta = (()=>{console.log("アラートa");})//<--呼び出せない。
            console.log("classが起動しました");
    }
    // クラスメソッドとして定義
    alertb() {
        console.log("アラートb");
    }
    // クラスメソッドとして定義
   public alertc() {
        console.log("アラートc");
    }
}
let classdemo = new demo("");
classdemo.alertb();
classdemo.alertc();
//alerta()できない

上記のようにconstructor内に記述したalerta()は基本的に呼び出しができません。

変数

クラスでは、変数を定義する際にアクセス修飾子である private や public を使用して、変数のアクセス範囲や利用目的を制御します。

• private: そのクラス内部でのみ使用する変数に適用します。
• public: クラス外部からアクセス可能にしたい場合に適用します。この場合、他のコードがクラスを呼び出して変数を参照・操作できるようになります。 適切にアクセス修飾子を使い分けることで、コードの安全性と可読性を向上させることができます。

export class demo{
    private moji:string = "文字列";
    public suuji:number = 10;
        constructor(hoge){
            const alerta = (()=>{console.log("アラートa");})//<--呼び出せない。
            console.log("classが起動しました");
    }
    // クラスメソッドとして定義
    alertb() {
        console.log("アラートb");
    }
    // クラスメソッドとして定義
   public alertc() {
        console.log("アラートc");
    }
}
let classdemo = new demo("");
console.log(classdemo.moji)
console.log(classdemo.suuji)

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

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

関数も同様

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

export class demo{
    private moji:string = "文字列";
    public suuji:number = 10;
        constructor(hoge){
            const alerta = (()=>{console.log("アラートa");})//<--呼び出せない。
            console.log("classが起動しました");
    }
    // クラスメソッドとして定義
   private alertb() {
        console.log("アラートb");
    }
    // クラスメソッドとして定義
   public alertc() {
        console.log("アラートc");
    }
    
}
let classdemo = new demo("");
classdemo.alertb();
classdemo.alertc();

callback

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

//実現したい事
export class Demo {
    constructor(hoge) {
    }
    cfunction()//<--を呼び出したい。
}


let democlass = new demo("piyo");
const cfunction = (()=>{
    console.log("呼ばれた")//
})

上のように逆にclass内で何か任意のタイミングで

export class Demo {
    private notify?: (data: string) => void; // コールバックの型
    private moji:string = "文字列";
    public suuji:number = 10;

    constructor(hoge: string) {
            const alerta = (()=>{console.log("アラートa");})//<--呼び出せない。
            console.log("classが起動しました");
    }

    // イベントリスナーを登録
    public on(eventName: string, callback: (data: string) => void): void {
        if (eventName === "notify1") {
            this.notify = callback;
        }
    }

    // NotifyEvent をメソッドとして定義
    public NotifyEvent(): void {
        if (this.notify) {
            this.notify("messagedata"); // コールバックを実行
        }
    }
}


// 使用例
let democlass = new Demo("hoge");
democlass.on("notify1", (data) => {
    console.log(data); // "messagedata" が表示される
});
democlass.NotifyEvent();

解説

まずonをを見るとifを使っていますeventNameがnotify1の場合はとなっています。 指定されたイベント名が "notify1" である場合にコールバック関数（callback）を this.notify に格納します。

democlass.on("notify1", (data) => {
    console.log(data);
});
//on("notify1")だった場合class内のthis.notifyに格納

次にNotifyEvent()を呼び出しています。

//クラス内ファンクション
public NotifyEvent(): void {//２．<--これが呼び出される。
        if (this.notify) {
            this.notify("messagedata"); // ３．コールバックを実行
        }
    }
//////

//１．NotifyEvent()を呼び出し。
democlass.NotifyEvent();

では少し戻ってthis.notifyとはどれの事か？

    public on(eventName: string, callback: (data: string) => void): void {
        if (eventName === "notify1") {
            this.notify = callback;//<--これ
        }
    }
//this.notifyはイベント名がnotify1です。つまり下のコードが入っています。
//notify1の名前の場合
democlass.on("notify1", (data) => {
    console.log(data); // "messagedata" が表示される
});

非同期の初期化

classの呼び出し、初期化（初期設定）はconstructorで実装できますが、同期的に動作するので非同期の処理を実装することはできません。その代わりに、init()のように独自のメゾットを作成してあげます。

export class Demo {
    constructor(hoge) {
    }
    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は注意して行けば見やすいコードになるはず。