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

2020年9月26日

今回は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という関数、

@Action
public testFunction(): boolean{
  const testValue = false;
  return testValue;
}

@Action

public testFunction(): boolean{

const testValue = false;

return testValue;

}

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

import { TestModule } from '@/store/modules/test';

@Component
export default class App extends Vue {
    public get inspectValue(): boolean{
      return TestModule.testFunction;
    }
}
</script>

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値を返すようにしましょう。

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

import { TestModule } from '@/store/modules/test';

@Component
export default class App extends Vue {
    public get inspectValue(): boolean{
      return TestModule.testFunction();
    }
}
</script>