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’.」というエラーが出たときの対処法についてご紹介いたしました。

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






Vuex

Posted by ちこ