質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.49%

  • TypeScript

    516questions

    TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

  • WebStorm

    26questions

    WebStormは、JetBrains社が提供しているJavaScript向けの統合開発環境です。優れたコード解析機能や補完機能を搭載しており、HTML/CSSの編集にも対応が可能です。

TypeScriptでPromise.allが型エラーを起こす問題

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 2
  • VIEW 296

HillTop

score 12

困っていること

TypeScriptでPromise.allにPromiseインスタンスの配列を渡すと、IDE(WebStorm)がエラー(赤波線)表示するので、エラーにならないようにしたいです。
実際に動かしてみると、エラーが出力される訳でもなく動いてしまうので、WebStrormのLintか何かなのかなと思ってるんですが、何が理由で下記のエラーが表示されているのかも分からないので、分かる方に教えていただきたいと思っています。
(色々とググってはみたのですが、ピンと来るものが無く、エラーの内容についても分からなかったのです
ご助力お願いいたします。

該当のソースコード

const promise1 = new Promise((resolve: Function) => {
  resolve();
});
const promise2 = new Promise((resolve: Function) => {
  resolve();
});
Promise.all([promise1, promise2]) // この行で赤い波線が出る
  .then(() => {
    // any process
  });


エラーメッセージ

Argument type [Promise<any>, Promise<any>] is not assignable to parameter type [
  (PromiseLike<any> | any), (PromiseLike<any> | any), (PromiseLike<any> | any),
  (PromiseLike<any> | any), (PromiseLike<any> | any), (PromiseLike<any> | any),
  (PromiseLike<any> | any), (PromiseLike<any> | any), (PromiseLike<any> | any),
  (PromiseLike<any> | any)
]

試したこと

一旦配列に詰めてみました。

const promise1 = new Promise((resolve: Function) => {
  resolve();
});
const promise2 = new Promise((resolve: Function) => {
  resolve();
});
const promiseList: Promise<void>[] = [promise1, promise2]; // この行で赤い波線が出る
Promise.all(promiseList) // ここの赤波線は取れた
  .then(() => {
    // any process
  })


エラーメッセージ

Initializer type Promise<any>[] is not assignable to variable type Promise[]

補足情報(FW/ツールのバージョンなど)

package.json

...
"typescript": "^3.0.0",
...

プロジェクト直下/tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env"
    ],
    "typeRoots" : ["src/@types"],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

tslint.json(下記パスにのみ存在しました)
node_modules/@Vue/cli-plugin-typescript/lib/tslint.json
※ 本プロジェクトはVue CLI 3で作成しています。

<%_ if (options.tsLint) { _%>
{
  "defaultSeverity": "warning",
  "extends": [
    "tslint:recommended"
  ],
  "linterOptions": {
    "exclude": [
      "node_modules/**"
    ]
  },
  "rules": {
    "quotemark": [true, "single"],
    "indent": [true, "spaces", 2],
    "interface-name": false,
    "ordered-imports": false,
    "object-literal-sort-keys": false,
    "no-consecutive-blank-lines": false
  }
}
<%_ } _%>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • dyoshikawa

    2019/01/31 10:07

    tslint.json tsconfig.jsonの内容も貼った方が良いかと。

    キャンセル

  • HillTop

    2019/01/31 20:33

    アドバイスありがとうございます。
    そうさせていただきます。

    キャンセル

回答 1

+1

エラーを見るに promise1promise2 が Promise<any> と解釈されてしまっているので、Promiseインスタンスを生成するときにジェネリクスで void 指定してみたらどうでしょうか。

const promise1 = new Promise<void>((resolve: Function) => {
  resolve();
});

const promise2 = new Promise<void>((resolve: Function) => {
  resolve();
});

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/01/31 20:36

    ご回答ありがとうございます。
    以下のようになりました。
    エラー内容の<any>の部分が<void>に変わりました。
    ```
    Argument type [Promise<void>, Promise<void>] is not assignable to parameter type [(PromiseLike<any> | any), (PromiseLike<any> | any), (PromiseLike<any> | any), (PromiseLike<any> | any), (PromiseLike<any> | any), (PromiseLike<any> | any), (PromiseLike<any> | any), (PromiseLike<any> | any), (PromiseLike<any> | any), (PromiseLike<any> | any)]
    ```

    キャンセル

  • 2019/02/01 01:24

    Promise.all() のほうもジェネリクス指定してみてはどうでしょうか?
    Promise.all<void>(...)

    キャンセル

  • 2019/02/01 14:44

    ご回答ありがとうございます。
    現在、教えていただいた方法を試そうにも、なぜか本件の事象自体の再現性が無くなってしまい、試せない状況となっております。
    何がきっかけで赤いエラーの線が無くなったのか、いろいろ試しているところなのですが、まだ分かっておりません。
    再発した際に改めて検証したいと思っております。

    キャンセル

同じタグがついた質問を見る

  • TypeScript

    516questions

    TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

  • WebStorm

    26questions

    WebStormは、JetBrains社が提供しているJavaScript向けの統合開発環境です。優れたコード解析機能や補完機能を搭載しており、HTML/CSSの編集にも対応が可能です。