Vuex+ TypeScript環境で「Type ‘() => boolean’ is not assignable to type ‘boolean’.」

今回はVuex+TypeScript環境で「Type ‘() => boolean’ is not assignable to type ‘boolean’.」というエラーが出たときの対処法についてご紹介いたします。



Vuex+TypeScript環境で「Type ‘() => boolean’ is not assignable to type ‘boolean’.」

Vue+Vuex+TypeScript環境を使用しているときです。
Vuexで保存した値をVueで使用しようとしたときに、「Type ‘() => boolean’ is not assignable to type ‘boolean’.」というエラーが出てしまいました。

結論を言うと、こちらは返り値そのものが欲しいのに、関数を代入していることが原因です。
上記の例では、「booleanの値」を取得したいのに「返り値がbooleanである関数」を代入しているのでエラーが起きています。

例えば、私はvuex-module-decoratorsとvue-property-decoratorを使用しておりますが、
TypeScriptのファイルに下記のようにtestFunctionという関数、

VueのファイルにtestFunctionを呼び出す

という処理があったとします。(処理自体に特に意味はありません)

この場合、TestModule.testFunctionで「Type ‘() => boolean’ is not assignable to type ‘boolean’.」というエラーが出ると思います。

上記の場合はtestFunctionに()がないことが原因です。
()がないことで、関数をそのままbooleanとしてreturnしようとしているのでエラーが起きます。

上記の場合はtestFunctionに()をつけて、きちんと関数の処理の結果のreturn値を返すようにしましょう。

修正後のコードはこちらです。

終わりに

今回はVuex+TypeScript環境で「Type ‘() => boolean’ is not assignable to type ‘boolean’.」というエラーが出たときの対処法についてご紹介いたしました。

【お知らせ】
プログラミングのコンサルタントをすることを考えております。
下記の通り、かなり格安でご用意させていただいております。
【格安】プログラミングコンサル生募集(初心者向け、フリーランス志望向け)

詳しくは下記のリンクをご覧ください。
https://chico-shikaku.com/2020/10/programming-consult-2020/

11月くらいを目処に開始予定です。
最初は募集があれば先着5名くらいを目安に考えております。
質問や意見、問い合わせやお申し込みは下記のリンクよりお願いいたします。
https://docs.google.com/forms/d/e/1FAIpQLSeTXskmlyPAHuhwiOE9togqJPWdhXYCyRoVnFkkbS0VN0Ftug/viewform?usp=sf_link

最後までお読みいただきありがとうございます。
ブログやTwitterでのシェアOKです。
コメントもお待ちしております。
誤植や勘違いなどございましたらコメント欄にて教えていただけると幸いです。






Vuex

Posted by ちこ