[Angular(Typescript)]subscribeで取得したデータを用いてif文で条件分岐し、値を返す関数を作りたい

Question

実現したいこと

下記のようなコードを書いています。
関数checkTEST内で、

1. subscribeで取得したデータを用いて(testData = res.body)
2. if文で条件分岐し（if (testData)）、値を返したい

のですが、subscribeで取得する前にif文が始まってしまいます（testDataがundefined）。
今の状態では同期処理ができていないのだと思うのですが、良いやり方はありますでしょうか。

該当のソースコード

export class TestComponent implements OnInit {

	load(){

		if(this.checkTEST(testID,testCount)){
			// 略
		}

	}

	checkTEST(testID: number, testCount: number){
		let testData;
		this.testService.countTest(testID).subscribe(res => {
			// 1. subscribeで取得したデータを用いて(testData = res.body)
			testData = res.body;
		});

		// 2. if文で条件分岐し（if (testData)）、値を返したい
		if (testData) {
			return Number(testData) < testCount;
		} else {
			return false;
		}
	}

}

試したこと

https://teratail.com/questions/129464
上記が近いのではと思い下記のように修正してみましたが、やはり関数内でif文が先に動いてしまうようです。
また、関数checkTESTの戻り値に関して「'void' 型の式は、真実性をテストできません。」というエラーが出ます。

export class TestComponent implements OnInit {

	testData: Subject<number> = new Subject();

	load(){

		if(this.checkTEST(testID,testCount)){
			// 略
		}

	}

	checkTEST(testID: number, testCount: number) {
		this.counter(testID).subscribe(testData => {
			if (testData) {
				return Number(testData) > testCount;
			} else {
				return false;
			}
		});
	}
	counter(testID: number){
		let testData;
		this.testService.countTest(orgId).subscribe(res => {
			testData = res.body;
			this.testData.next(testData);
		});
		return this.testData;
	}

}

Answer 1

subscribeの引数はコールバック関数になっていますので、subscribeの中でreturnしても、checkTEST関数の返値にはなりません。

ですから、

checkTEST(testID: number, testCount: number) {
    this.counter(testID).subscribe(testData => {
        if (testData) {
            return Number(testData) > testCount;
        } else {
            return false;
        }
    });
}

この関数は実際には何も値を返さない関数になっており、IF文の判定に必要なbooleanを返さないので、'void' 型の式は、真実性をテストできません。のようにエラーが出るものと思われます。

さて、お察しの通り、subscribeは非同期的に実行される関数です。「同期っぽく」実行することはできますが、完全に同期的に実行することはできないので、以下のようなコードになるかと思います。

export class TestComponent implements OnInit {

    load(): void {

        this.checkTEST(testID,testCount).subscribe((bool) => {
            if(bool) {
                // 何かしらの処理
            }
        })

    }

    // または

    async load(): Promise<void> {

        const bool = await this.checkTEST(testID,testCount).toPromise() <-- RxJS v6までの記法です

        if(bool) {
            // 何かしらの処理
        }

    }

    checkTEST(testID: number, testCount: number): Observable<boolean> {
        return this.testService.countTest(testID).pipe(
            map((res) => {
                if (res.body) {
                    return Number(res.body) < testCount;
                } else {
                    return false;
                }
            })
        );
    }
}

Comments

[aoa02ssm]

遅くなり申し訳ございません、ご回答ありがとうございました！
kaito3desuyo様の「 // または」から下のasync/awaitを使用した方法が自分には分かりやすく、無事実装できました。

Answer 2

subscribeメソッドはSubjectにデータが発生した際のコールバック関数を定義しているので、そのまますり抜ける動作は正しいです。this.testService.countTest(testID)がSubjectなのか確認できませんが。
Subject.next()が呼ばれることによりコールバック関数が実行されます。

ヒント程度の内容ですが、ご容赦下さい。

rxjs Subjectの自前のサンプルです。用法が異なるようですが、ご参考になりましたら。