ネイティブ ES6 Promise で Typescript を使用するにはどうすればよいですか?

ECMAScript の ES6 バージョンでは、Promise が初めて導入されました。

TypeScript プロジェクトで ES6 Promise を使用するには、ユーザーは tsconfig.json ファイルを変更する必要があります。

次のコードを「compilerOptions」オブジェクト内に追加します。

リーリー

さらに、ユーザーは以下の「lib」属性に「ES6」を追加できます。

リーリー

ただし、ユーザーは、TypeScript でネイティブ Promise をサポートしているため、ECMAScript の以降のバージョンを使用することもできます。たとえば、es7、es10 などです。

TypeScript では、ネイティブ Promise は、TypeScript コードで Promise() コンストラクターを使用して作成された Promise を指します。ただし、API リクエストから返された Promise を解決することはできます。

これらの Promise には次の 3 つの状態があります。

• pending - これは、コミットメントがまだ完了していないことを意味します。

• Completed - これは、Promise がエラーなく正常に完了したことを意味します。

• 拒否されました - これは、Promise がエラーで完了したことを意味します。

＃＃＃文法＃＃＃

ユーザーは、次の構文に従って TypeScript でネイティブ Promise を使用できます。

リーリー

上記の構文では、Promise() コンストラクターを使用して Promise を作成し、then() ブロックと catch() ブロックでそれぞれ結果とエラーを処理します。さらに、「T」は、Promise が正常に完了したときの戻り値の型を表します。

例 1 (基本的な約束)

次の例では、基本的に TypeScript で ES6 ネイティブ Promise を使用する方法を学習します。 first_promise と Second_promise という名前の 2 つの Promise を作成しました。 first_promise を解決し、 Second_promise を拒否しました。

さらに、ユーザーは、Promise の戻り値の型が文字列であることがわかります。最初の Promise が正常に解決されると、実行制御は then() ブロックに移り、2 番目の Promise が拒否されると、実行制御は catch() ブロックに移ります。

リーリー

コンパイルすると、次の JavaScript コードが生成されます。

リーリー

例 2 (ネストされた Promise)

次の例では、ネストされた Promise の使用方法を示します。 new キーワードと Promise() コンストラクターを使用して、outer_promise を作成しました。 inner_promise のコールバック関数内で、新しいサブ Promise を作成し、そのサブ Promise を解決します。

出力では、outer_promise がサブ Promise として正常に解決されたことがわかります。 sub-promise を拒否すると、outer_promise も拒否されます。

リーリー

コンパイルすると、次の JavaScript コードが生成されます。

リーリー

例 3 (連鎖した約束)

中国語訳は次のとおりです:

例 3 (連鎖した約束)

以下の例では、TypeScript でチンされた Promise を示します。その名前が示すように、それは一連の約束です。ここでは、numeric_promise を解決すると数値を返します。

then() ブロック内の結果として 10 が得られました。その後、結果を 2 で乗算して返します。最初の then() ブロックから返された値は、2 番目の then() ブロック内で取得できます。エラーが発生した場合、制御は直接 catch() ブロックに移ります。

出力では、各 then() ブロックの結果値が 2 倍になっていることがわかります。

リーリー

コンパイル後、次の JavaScript コードが生成されます。約束を解決する

リーリー

ユーザーは、TypeScript で ES6 ネイティブの Promise を使用する方法を学びました。また、ネストされた Promise と Promise Chaining の使用方法も学びました。通常、ユーザーは API からの応答として Promise を受け取り、それを処理するには then() ブロックと catch() ブロックを使用する必要があります。

以上がネイティブ ES6 Promise で Typescript を使用するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。