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

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

新規登録して質問してみよう
ただいま回答率
85.35%
TypeScript

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

WebStorm

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

Q&A

1回答

8552閲覧

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

HillTop

総合スコア22

TypeScript

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

WebStorm

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

1グッド

2クリップ

投稿2019/01/30 14:08

編集2019/01/31 11:40

困っていること

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

該当のソースコード

TypeScript

1const promise1 = new Promise((resolve: Function) => { 2 resolve(); 3}); 4const promise2 = new Promise((resolve: Function) => { 5 resolve(); 6}); 7Promise.all([promise1, promise2]) // この行で赤い波線が出る 8 .then(() => { 9 // any process 10 });

エラーメッセージ

WebStorm

1Argument type [Promise<any>, Promise<any>] is not assignable to parameter type [ 2 (PromiseLike<any> | any), (PromiseLike<any> | any), (PromiseLike<any> | any), 3 (PromiseLike<any> | any), (PromiseLike<any> | any), (PromiseLike<any> | any), 4 (PromiseLike<any> | any), (PromiseLike<any> | any), (PromiseLike<any> | any), 5 (PromiseLike<any> | any) 6]

試したこと

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

TypeScript

1const promise1 = new Promise((resolve: Function) => { 2 resolve(); 3}); 4const promise2 = new Promise((resolve: Function) => { 5 resolve(); 6}); 7const promiseList: Promise<void>[] = [promise1, promise2]; // この行で赤い波線が出る 8Promise.all(promiseList) // ここの赤波線は取れた 9 .then(() => { 10 // any process 11 })

エラーメッセージ

WebStorm

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

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

package.json

json

1... 2"typescript": "^3.0.0", 3...

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

Json

1{ 2 "compilerOptions": { 3 "target": "esnext", 4 "module": "esnext", 5 "strict": true, 6 "jsx": "preserve", 7 "importHelpers": true, 8 "moduleResolution": "node", 9 "experimentalDecorators": true, 10 "esModuleInterop": true, 11 "allowSyntheticDefaultImports": true, 12 "sourceMap": true, 13 "baseUrl": ".", 14 "types": [ 15 "webpack-env" 16 ], 17 "typeRoots" : ["src/@types"], 18 "paths": { 19 "@/*": [ 20 "src/*" 21 ] 22 }, 23 "lib": [ 24 "esnext", 25 "dom", 26 "dom.iterable", 27 "scripthost" 28 ] 29 }, 30 "include": [ 31 "src/**/*.ts", 32 "src/**/*.tsx", 33 "src/**/*.vue", 34 "tests/**/*.ts", 35 "tests/**/*.tsx" 36 ], 37 "exclude": [ 38 "node_modules" 39 ] 40}

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

JSON

1<%_ if (options.tsLint) { _%> 2{ 3 "defaultSeverity": "warning", 4 "extends": [ 5 "tslint:recommended" 6 ], 7 "linterOptions": { 8 "exclude": [ 9 "node_modules/**" 10 ] 11 }, 12 "rules": { 13 "quotemark": [true, "single"], 14 "indent": [true, "spaces", 2], 15 "interface-name": false, 16 "ordered-imports": false, 17 "object-literal-sort-keys": false, 18 "no-consecutive-blank-lines": false 19 } 20} 21<%_ } _%> 22
set0gut1👍を押しています

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2019/01/31 01:07

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

2019/01/31 11:33

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

回答1

0

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

typescript

1const promise1 = new Promise<void>((resolve: Function) => { 2 resolve(); 3}); 4 5const promise2 = new Promise<void>((resolve: Function) => { 6 resolve(); 7});

投稿2019/01/31 04:52

yhg

総合スコア2161

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

HillTop

2019/01/31 11: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)] ```
yhg

2019/01/31 16:24

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

2019/02/01 05:44

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問