TypeScriptでPromiseの型を定義する

こんにちは、フロントエンドエンジニアのまさにょんです。

今回は、TypeScriptでPromiseの型を定義する方法について解説していきます。

1 直接、型を定義するパターン
2 typeエイリアスを使って、型を定義するパターン
3 型を抽出して、型を定義するパターン
4 非同期関数に型定義するパターン Ver. 返り値void
5 非同期関数に型定義するパターン Ver. 返り値がObject
6 TypeScript書籍
7 最近の投稿

直接、型を定義するパターン

まずは、シンプルな直接、型を定義するパターンを見ていきます。

Promise< 型 > の形で、Promiseの実行結果(返り値)を型定義することができます。

const PromiseFunc: Promise<void> = new Promise((resolve, reject)=> {
    resolve('ロボ玉');
}).then((val)=>{
    console.log(`グンマー帝国の${val}`);
});

typeエイリアスを使って、型を定義するパターン

type PromiseFuncType = Promise<string>;

const PromiseFunc2: PromiseFuncType = new Promise((resolve, reject)=> {
    resolve('ロボ玉');
}).then((val)=>{
    return `グンマー帝国の${val}`;
});

型を抽出して、型を定義するパターン

次のSampleでは、型を抽出して、型を定義しています。

また、resolve や reject は関数なので、Sampleのように関数の型を定義することができます。

// resolveの型定義(関数の型定義)
type resolveType = (value: number) => void;

const PromiseFunc3 = new Promise((resolve: resolveType, reject)=> {
    resolve(100);
}).then((val)=>{
    return 200 + val;
});

type PromiseFuncType3 = typeof PromiseFunc3;

// [ 抽出結果 ]
// type PromiseFuncType3 = Promise<number>

非同期関数に型定義するパターン Ver. 返り値void

非同期関数にtypeエイリアスで型定義するパターンの返り値がvoidバージョンのSampleです。

type AsyncFuncType = () => Promise<void>;

const asyncFunc: AsyncFuncType = async () => {
    let x, y;

    // await-1: Promiseがresolveするまで待機する
    x = await new Promise((resolve) => {
        setTimeout(() => {
        resolve(1);
        }, 1000);
    });
    // await-2: Promiseがresolveするまで待機する
    y = await new Promise((resolve) => {
        setTimeout(() => {
        resolve(2);
        }, 2000);
    });

    console.log(`すまん！${x + y}秒、待たせた！`);
};


asyncFunc();

非同期関数に型定義するパターン Ver. 返り値がObject

非同期関数にtypeエイリアスで型定義するパターンの返り値がObjectバージョンのSampleです。

// 非同期関数の型を定義する
type AsyncFuncType2 = () => Promise< {
    result: string;
    code: number;
    msg: string;
} >;

const asyncFunc2: AsyncFuncType2 = async () => {
    let x, y;

    // await-1: Promiseがresolveするまで待機する
    x = await new Promise((resolve) => {
        setTimeout(() => {
        resolve(1);
        }, 1000);
    });
    // await-2: Promiseがresolveするまで待機する
    y = await new Promise((resolve) => {
        setTimeout(() => {
        resolve(2);
        }, 2000);
    });

    return { result: "success", code: 200, msg: `すまん！${x + y}秒、待たせた！`};
};