|
|
Q&A
前提・実現したいこと
Vue3 の型定義で VS Code によるエラーが出ます。
エラーが出ないようにするにはどうすれば良いでしょうか？
config/app.tsから読み込んだオブジェクトを、composable/useAppState.tsの関数で返し、views/Home.vue テンプレートで表示する処理です。
views/Home.vueの {{ appState.name }} で以下のエラーが表示されました。
発生している問題・エラーメッセージ
オブジェクト型は 'unknown' です。 ts(2571)
該当のソースコード
types/App.ts
TypeScript
1export interface App { 2 name: stringconfig/app.ts
TypeScript
1import { App } from '@/types/App' 3export const app:Readonly<App> = Object.freeze({ 4 name: 'アプリケーション名' 5})composable/useAppState.ts
TypeScript
1import { computed } from 'vue' 2import { app } from '@/config/app' 4export const useAppState = (): Record<string, unknown> => { 5 const appState = computed(() => { 6 return app 7 }) 9 return { appState }views/Home.vue
Vue
1<template> 2 <div>{{ appState.name }}</div> 3</template> 5<script lang="ts> 6import { defineComponent } from 'vue' 7import { useAppState } from '@/composable/useAppState' 9export default defineComponent({ 10 setup () { 11 const { appState } = useAppState() 13 return { 14 appState 17}) 18</script>
回答1件
0
私はTypeScriptには明るくないのですが、推測で回答させていただきます。
appStateのプロパティはunknown型となっているので、本来は型のキャストをしなければ参照時にコンパイルエラーとなります。
事実console.log(appState.name)などと書いたら即エラーになりました。
ですが実際はvue自体のコードはTSのコンパイルの対象外であるため、その配下でパースされるテンプレート上では型判定エラーが起きずに普通に動作しているものと思われます。このままではエディタ上の表示だけでなく、TSコードの他の部分でもコンパイルに支障がで可能性があります。
そこで回避策として以下のuseAppStateの定義部分に関して、export const useAppState = (): Record<string, unknown> => {unknownをanyにする型を明確に Record<string, Record<string, any>>（あるいは{ appState: Record<string, any> }等)にする厳密に自作の AppState型にする以上のいずれかを行えば問題は解消すると思います。
投稿2021/11/16 03:13編集2021/11/16 03:13
総合スコア495
あなたの回答tips
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。