【超基礎】TypeScript非同期処理基本まとめ

前提

この記事は、初学者の私が、サバイバルTypeScriptで学んだこと+調べたことをまとめたものになります。

従って、経験則に基づいた発言ではないため、一部慣習とは違っていたり、認知にずれがあったりする可能性がありますので、ぜひコメントで指摘していただけると幸いです。

非同期処理とは？

概要

• 待ち時間が発生する処理を並行して行うことで効率化を図るもの
• APIの呼び出しや外部データの読み込みなど
• コードが複雑になるという欠点があったが、近年はPromiseやasync,await構文により、可読性の高い実装が可能になった

同期処理とは？

非同期処理を理解する前に、対義語となる同期処理について説明する。

同期処理では、一つ一つ順番に処理を行い、前の処理が完了するのを待ってから次の処理に移る。書いたコードが上から下に、順番に処理されていくため実装は簡単だが、一つでも時間のかかる処理が存在すると、以下の処理全体に遅れが生じるため効率的ではない。

実装

Promise

• 非同期処理の最終的な完了、失敗を表すPromiseオブジェクトを返す関数を作成
• `初期化の際にアロー関数を渡す
• 完了時に返したい値をresolve、エラーをrejectに渡す
• 正常な値はthen、エラーはcatchで受け取る

仕様上resolve以外の名前を使うこともできるが、慣習的にあり得ない

Promise

function plusOne(val: number): Promise<number>{ 
//Promise<T>のTは、resolve時の型
    return new Promise<number> ((resolve,reject) => { //Promiseオブジェクトの作成、コンストラクタにアロー関数を渡す。
        if(val < 0){
            reject(new Error("valueが負の数")) //rejct時に返したい値
        }else{
            resolve(val + 1); //resolve時に返したい値を渡す
        }
    });
}

function double(val: number): Promise<number>{
    return new Promise<number>((resolve,reject) => {
        if(val > 100){
            reject(new Error("valueが大きすぎるよ"));
        } else {
            resolve(val * 2);
        }
    });
}

function main(){
    plusOne(3)
        .then((plusedOneValue: number) => { //resolveの値を引数として受け取る
            return double(plusedOneValue); //コールバックすることで、次のthenに渡す
        })
        .then((doubledValue) => {
            console.log(doubledValue);// => 8
        })
        .catch((e: unknown) => { //rejectはcatchで受け取る
            console.log(e.message);
        });
    }

main()

async/await

• 非同期処理を、Promiseより簡単に書ける構文
• asyncとawaitは基本セット

async : 関数、メソッドの前につけることで戻り値の型をPromiseでラップする

await : Promiseが解決されるまで待機する。基本的にasyncの中でしか使えない。

awaitはasync関数によりPromiseでラップされた戻り値をアンラップする演算子であると捉えることもできる。

async/await

//plusOne関数、double関数は同じ。

async function main() {
    try{
        const plusedOneValue = await plusOne(3);　//定数を定義し、関数呼び出しの際にawaitを付けるだけ
        const doubledValue =  await double(plusedOneValue);
        console.log(doubledValue);//=> 8
    } catch(e:unknown) { //then、catchはtry-catchに置き換えてエラーハンドリング
        console.log(e);
    }
}

main() 

まとめ

なんとなく学習時のストレスが大きそうだな、、と思っていた非同期処理ですが、時代の流れとともにより分かりやすい形になっており、ありがたかったです。

当方初学者なため、認知のずれや、モダンな開発現場ではもう使わない表現などがありましたらコメントで指摘していただけると幸いです。😸

参考資料

https://qiita.com/soarflat/items/1a9613e023200bbebcb3
https://qiita.com/soarflat/items/1a9613e023200bbebcb3
https://typescriptbook.jp/reference/asynchronous/promise