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という関数、
|
1 2 3 4 5 |
@Action public testFunction(): boolean{ const testValue = false; return testValue; } |
VueのファイルにtestFunctionを呼び出す
|
1 2 3 4 5 6 7 8 9 |
import { TestModule } from '@/store/modules/test'; @Component export default class App extends Vue { public get inspectValue(): boolean{ return TestModule.testFunction; } } </script> |
という処理があったとします。（処理自体に特に意味はありません）
この場合、TestModule.testFunctionで「Type '() => boolean’ is not assignable to type 'boolean’.」というエラーが出ると思います。
上記の場合はtestFunctionに()がないことが原因です。
()がないことで、関数をそのままbooleanとしてreturnしようとしているのでエラーが起きます。
上記の場合はtestFunctionに()をつけて、きちんと関数の処理の結果のreturn値を返すようにしましょう。
修正後のコードはこちらです。
|
1 2 3 4 5 6 7 8 9 |
import { TestModule } from '@/store/modules/test'; @Component export default class App extends Vue { public get inspectValue(): boolean{ return TestModule.testFunction(); } } </script> |
終わりに
今回はVuex+TypeScript環境で「Type '() => boolean’ is not assignable to type 'boolean’.」というエラーが出たときの対処法についてご紹介いたしました。