Vue3 (TypeScript) の型エラーがテンプレート内で発生します。

Question

前提・実現したいこと

Vue3 の型定義で VS Code によるエラーが出ます。
エラーが出ないようにするにはどうすれば良いでしょうか？

config/app.tsから読み込んだオブジェクトを、composable/useAppState.tsの関数で返し、views/Home.vue テンプレートで表示する処理です。
views/Home.vueの {{ appState.name }} で以下のエラーが表示されました。

発生している問題・エラーメッセージ

オブジェクト型は 'unknown' です。 ts(2571)

該当のソースコード

types/App.ts

export interface App {
  name: string
}

config/app.ts

import { App } from '@/types/App'

export const app:Readonly<App> = Object.freeze({
  name: 'アプリケーション名'
})

composable/useAppState.ts

import { computed } from 'vue'
import { app } from '@/config/app'

export const useAppState = (): Record<string, unknown> => {
  const appState = computed(() => {
    return app
  })

  return { appState }
}

views/Home.vue

<template>
  <div>{{ appState.name }}</div>
</template>

<script lang="ts>
import { defineComponent } from 'vue'
import { useAppState } from '@/composable/useAppState'

export default defineComponent({
  setup () {
    const { appState } = useAppState()

    return {
      appState
    }
  }
})
</script>

Answer 1

私は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型にする

以上のいずれかを行えば問題は解消すると思います。