わからないこと
Nuxtを js/OptionsAPI
の構成で使っていましたが、最近 typescript/composition-api
を使った実装を練習しています。
Nuxtでは plugins
ディレクトリのファイルで
export default (context, inject) => { inject('myFunc', ...) }
などとすることで、コンポーネントやストアで this.$myFunc()
のように依存を注入した関数が実行できると思います。
typescript/composition-api
の構成でもそれをやりたくて、
https://typescript.nuxtjs.org/cookbook/plugins.html#iii-combined-inject
を参考にして実装してみましたが、 setup
内でうまく解釈してくれません。
実装したコード
// @/plugins/myFunc.ts import { Plugin } from '@nuxt/types' declare interface Funcs { hello: () => void } declare module 'vue/types/vue' { interface Vue { $myFunc: Funcs } } declare module '@nuxt/types' { interface NuxtAppOptions { $myFunc: Funcs } interface Context { $myFunc: Funcs } } declare module 'vuex/types/index' { interface Store<S> { $myFunc: Funcs } } const myFunc: Plugin = (_, inject) => { inject('myFunc', { hello: (): string => 'hello' }) } export default myFunc
ページで呼び出す
<script lang="ts"> import { defineComponent } from '@nuxtjs/composition-api' export default defineComponent({ setup(_, { root }) { console.log(root.$myFunc.hello()) } }) </script>
出ているエラー
上記コードの $myFunc
の部分にニョロニョロが出て
Property '$myFunc' does not exist on type 'CombinedVueInstance<Vue, object, object, object, Record<never, any>>'.Vetur(2339)
というメッセージが表示されます。
アプリを開いてみるとちゃんと hello
と表示されているので、型がうまくついていないのではないかと思うのですが、 typescript
も composition-api
も初心者でよくわかりませんでした。
しかしstoreファイルの方では、ちゃんと型がついていて補完も効きます。
// @/store/index.ts export const actions = { hello() { // これは補完が効く this.$myFunc.hello() } }
聞きたいこと
any や ts-ignore などを使うことなく setup 内でちゃんと解釈してもらえるようにする方法はありますでしょうか?
バージョンなど
"dependencies": { "@nuxt/typescript-runtime": "^2.0.0", "@nuxtjs/composition-api": "^0.12.5", "core-js": "^3.6.5", "nuxt": "^2.14.5" }, "devDependencies": { "@nuxt/types": "^2.14.5", "@nuxt/typescript-build": "^2.0.3" }
あなたの回答
tips
プレビュー