メインコンテンツへスキップ

no-misused-promises

Promiseを、それらを処理するように設計されていない場所で使用することを禁止します。

✅

拡張 「plugin:@typescript-eslint/」recommended-type-checked" を ESLint設定 で有効にすると、このルールが有効になります。

💭

このルールは実行するために 型情報 が必要です。

このルールは、TypeScriptコンパイラが許可するものの、正しく処理されない場所（例えばif文のような論理的な場所）にPromiseを提供することを禁止します。これらの状況は、awaitキーワードの欠落や、async関数の処理/待機方法の誤解が原因でよく発生します。

ヒント

no-misused-promisesは、Promiseを誤った*論理的*な場所に提供するコードのみを検出します。未処理のPromise *ステートメント*を検出するには、no-floating-promisesを参照してください。

.eslintrc.cjs
module.exports = {
  "rules": {
    "@typescript-eslint/no-misused-promises": "error"
  }
};

プレイグラウンドでこのルールを試す ↗

オプション​

このルールは、以下のオプションを受け付けます

type Options = [
  {
    checksConditionals?: boolean;
    checksSpreads?: boolean;
    checksVoidReturn?:
      | {
          arguments?: boolean;
          attributes?: boolean;
          properties?: boolean;
          returns?: boolean;
          variables?: boolean;
        }
      | boolean;
  },
];

const defaultOptions: Options = [
  { checksConditionals: true, checksVoidReturn: true, checksSpreads: true },
];

checksConditionals​

条件式をチェックしたくない場合は、"checksConditionals": falseでルールを設定できます。

{
  "@typescript-eslint/no-misused-promises": [
    "error",
    {
      "checksConditionals": false
    }
  ]
}

そうすることで、ルールがif (somePromise)のようなコードを調べなくなります。

checksConditionals: trueの場合の、このルールのコード例

例​

const promise = Promise.resolve('value');

if (promise) {
  // Do something
}

const val = promise ? 123 : 456;

while (promise) {
  // Do something
}
プレイグラウンドで開く

checksVoidReturn​

同様に、voidの戻り値が期待される場合にPromiseを返す関数をチェックしたくない場合は、設定は次のようになります

{
  "@typescript-eslint/no-misused-promises": [
    "error",
    {
      "checksVoidReturn": false
    }
  ]
}

特定のチェックを無効にするオブジェクトを提供することで、checksVoidReturnオプションの選択的な部分を無効にできます。次のオプションがサポートされています

  • arguments: パラメータ型がvoidを返す関数を期待する場所で、引数として渡される非同期関数のチェックを無効にします
  • attributes: voidを返す関数であることが期待されるJSX属性として渡される非同期関数のチェックを無効にします
  • properties: voidを返す関数であることが期待されるオブジェクトプロパティとして渡される非同期関数のチェックを無効にします
  • returns: 戻り値の型がvoidを返す関数である関数で返される非同期関数のチェックを無効にします
  • variables: 戻り値の型がvoidを返す関数である変数として使用される非同期関数のチェックを無効にします

たとえば、() => Promise<void>を() => voidパラメータまたはJSX属性に渡すことが、フローティング未処理のPromiseにつながる可能性があることを気にしない場合

{
  "@typescript-eslint/no-misused-promises": [
    "error",
    {
      "checksVoidReturn": {
        "arguments": false,
        "attributes": false
      }
    }
  ]
}

checksVoidReturn: trueの場合の、このルールのコード例

[1, 2, 3].forEach(async value => {
  await fetch(`/${value}`);
});

new Promise<void>(async (resolve, reject) => {
  await fetch('/');
  resolve();
});

document.addEventListener('click', async () => {
  console.log('synchronous call');
  await fetch('/');
  console.log('synchronous call');
});
プレイグラウンドで開く

checksSpreads​

オブジェクトスプレッドをチェックしたくない場合は、この設定を追加できます

{
  "@typescript-eslint/no-misused-promises": [
    "error",
    {
      "checksSpreads": false
    }
  ]
}

checksSpreads: trueの場合の、このルールのコード例

const getData = () => fetch('/');

console.log({ foo: 42, ...getData() });

const awaitData = async () => {
  await fetch('/');
};

console.log({ foo: 42, ...awaitData() });
プレイグラウンドで開く

いつ使用しないか​

このルールは、多数の誤用されたPromiseが設定されている大規模な既存プロジェクトで有効にすることが難しい場合があります。あるいは、グローバルな未処理Promiseハンドラが登録されている場合など、フローティングまたは誤用されたPromiseによるクラッシュを心配していない場合は、このルールを使用しない方が安全な場合があります。このルールを完全に無効にする代わりに、特定の状況ではESLint無効化コメントの使用を検討できます。

さらに読む​

型チェックされたリントルールは、従来のリントルールよりも強力ですが、型チェックされたリンティングを設定する必要もあります。型チェックされたルールを有効にした後にパフォーマンスの低下が発生する場合は、パフォーマンスのトラブルシューティングを参照してください。

リソース​