---

---

【TypeScript】constructorで非同期処理を呼び出したい場合の解決方法まとめ

投稿日：2022年1月26日

TypeScriptのクラスではコンストラクタの処理を非同期にすることができません。しかし、どうしても非同期処理を入れたいとき、何らかの対応をする必要があります。いくつかの方法があるので、自身で気に入った方法を選んでください。

---

はじめに

この記事について

環境について

参考

---

実践

コンストラクタに非同期の処理が入ると？

/**
 * GeoLocationAPIを利用して緯度・軽度の情報を取得して
 * 位置情報を扱うクラス
 */
 export class MyGeolocationData {
    // 緯度
    private latitude: number;
    // 軽度
    private longitude: number;

    /**
     * コンストラクタ
     * 現在の緯度と軽度を取得してプロパティにセットして
     * 現在の緯度経度をコンソールに出力
     */
    constructor(){
        navigator.geolocation.getCurrentPosition((position) => {
            this.latitude = position.coords.latitude;
            this.longitude = position.coords.longitude;      
            this.logInfo("INIT");      
        });
    }

    /**
     * 指定された緯度・軽度分移動した後、現在の緯度軽度をコンソールに出力
     * @param addedLongitude 
     * @param addedLatitude 
     */
    move = (addedLongitude: number, addedLatitude: number) => {
        this.longitude += addedLongitude;
        this.latitude += addedLatitude;

        this.logInfo("MOVE");
    }

    /**
     * 情報をコンソールログに出力する
     */
    logInfo = (signature: string) => {
        console.log(`【${signature}】lng = ${this.longitude}, lat = ${this.latitude}`);
    }
}

// [...]

const myGeolocationData = new MyGeolocationData();
myGeolocationData.move(2,10);

【MOVE】lng = NaN, lat = NaN
【INIT】lng = 137.7324108, lat = 34.668629

undefined += addedLongitude;  // NaNになる
undefined += addedLatitude;     // NaNになる

解決法１：初期化処理を別のメソッドに分ける

/**
 * GeoLocationAPIを利用して緯度・軽度の情報を取得して
 * 位置情報を扱うクラス
 */
 export class MyGeolocationData {
    // 緯度
    private latitude: number;
    // 軽度
    private longitude: number;

    /**
     * コンストラクタ
     * 現在の緯度と軽度を取得してプロパティにセットして
     * 現在の緯度経度をコンソールに出力
     */
    constructor(){
    }


    /**
     * 初期化処理をPromiseで処理
     * @returns 
     */
    init = () => {
        return new Promise<void>((resolve, reject) => {
            navigator.geolocation.getCurrentPosition((position) => {
                this.latitude = position.coords.latitude;
                this.longitude = position.coords.longitude;      
                this.logInfo("INIT"); 
                resolve();   
            },(err) =>{
                reject(err);
            }); 
        });
    }

// [...]
}

const myGeolocationData = new MyGeolocationData();
// init()での初期化が完了したらmove()を呼び出す
myGeolocationData.init().then(() => {
    myGeolocationData.move(2,10);
});

const myGeolocationData = new MyGeolocationData();
// init()を呼び忘れている
myGeolocationData.move(2,10);

解決法２：初期化処理を通してコンストラクタを呼び出す

/**
 * GeoLocationAPIを利用して緯度・軽度の情報を取得して
 * 位置情報を扱うクラス
 */
 export class MyGeolocationData {
    // 緯度
    private latitude: number;
    // 軽度
    private longitude: number;

    /**
     * コンストラクタ
     * 現在の緯度と軽度を取得してプロパティにセットして
     * 現在の緯度経度をコンソールに出力
     * このコンストラクタを直接呼ぶことはできない
     * 
     */
    private constructor(_latitude: number, _longitude: number){
        this.latitude = _latitude;
        this.longitude = _longitude;
        this.logInfo("INIT");
    }

    /**
     * 初期化処理をPromiseで処理
     * このinit()を通してでしかインスタンス化できない
     * @returns 
     */
    static init = () => {
        return new Promise<MyGeolocationData>((resolve, reject) => {
            navigator.geolocation.getCurrentPosition((position) => {    
                const myGeolocationData = new MyGeolocationData(position.coords.latitude, position.coords.longitude);
                resolve(myGeolocationData);
            },(err) =>{
                reject(err);
            }); 
        });
    }

// [...]
}

MyGeolocationData.init().then(myGeolocationData => {
    myGeolocationData.move(2,10)
});

---

---

---