執筆時のバージョン
> tsc --version
Version 2.1.6
定義ファイルのインストール
定義ファイルは、以下のようにnpmで直接インストールすることができます。
npm install --save @types/es6-promise
Promiseを使う
// Promise<T>のTはresolveの引数の型
const p1 = new Promise<string>((resolve: (value?: string) => void, reject: (reason?: any) => void) => {
// 非同期の処理
// 成功したときは戻り値を引数にしてresolveを呼ぶ
// 失敗したときは戻り値を引数にしてrejectを呼ぶ
setTimeout(() => {
resolve("OK"); // 成功したときの戻り値
}, 1000);
}).then(
// Promiseが成功したとき
(value: string) => { // 引数valueの型はProcese<T>のT型
console.log(value);
}
).catch(
// Promiseが失敗したとき
(reason: any) => {
console.log(reason);
}
);
Promiseのコンストラクタは、関数を引数に取ります。
引数の関数は、resolveとrejectを引数に取り、戻り値はありません。
resolveとrejectはどちらも関数です。
const p1 = new Promise<string>(
(resolve: (value?: string) => void, reject: (reason?: any) => void) => {
});
Promise
引数の関数の中で、非同期処理を実行します。
処理が成功したら、戻り値を引数にしてresolve()を呼びます。
失敗したときは、エラーの内容を引数にしてreject()を呼びます。
const p1 = new Promise<string>(
(resolve: (value?: string) => void, reject: (reason?: any) => void) => {
// 非同期の処理
// 成功したときは戻り値を引数にしてresolveを呼ぶ
// 失敗したときは戻り値を引数にしてrejectを呼ぶ
setTimeout(() => {
resolve("OK"); // 成功したときの戻り値
}, 1000);
});
then()メソッドに、処理が成功したときに実行するコールバック関数を登録します。
関数の引数の型は、Promise
const p1 = new Promise<string>((resolve: (value?: string) => void, reject: (reason?: any) => void) => {
// 非同期の処理
}).then(
// Promiseが成功したとき
(value: string) => { // 引数valueの型はProcese<T>のT型
console.log(value);
}
);
catch()メソッドに、処理が失敗したときに実行するコールバック関数を登録します。
const p1 = new Promise<string>((resolve: (value?: string) => void, reject: (reason?: any) => void) => {
// 非同期の処理
}).catch(
// Promiseが失敗したとき
(reason: any) => {
console.log(reason);
}
);
Promise.all
複数の非同期処理がすべて終わったときに処理を行いたいときは、Promise.all()を使用します。
Promise.all()はPromiseオブジェクトの配列を受け取ります。
すべてのPromiseオブジェクトがresolveされると、then()メソッドを呼びます。
サンプルコード
Promise.all([
// Promiseオブジェクトの配列
new Promise((resolve, reject) => { setTimeout(() => resolve("1"), 1000); }),
new Promise((resolve, reject) => { setTimeout(() => resolve("2"), 2000); }),
new Promise((resolve, reject) => { setTimeout(() => resolve("3"), 3000); }),
]).then(
// すべてのPromiseオブジェクトがresolveされた後に呼ばれる
value => console.log(value)
);
実行結果
[ '1', '2', '3' ]
Pingback: Ionic3+Firebaseでメールアドレス認証を写経してみる(2)BitBucketに非公開登録し、Netlifyで公開とfirebaseの設定