What type to specify for the computed that the vue component returns?

Question

typescript

<template>
  <component :is="layout"></component>
</template>

<script lang="ts">
import {computed, defineComponent} from 'vue'
import {useRoute} from 'vue-router'

export default defineComponent({
  setup() {
    const route = useRoute()

    return {
      layout: computed<string>(() => route.meta.layout)
    }
  }
})
</script>

A string arrives in meta, but webstorm gives an error Error
log

Overload 1 of 2, '(getter: ComputedGetter<string>, debugOptions?: DebuggerOptions | undefined): ComputedRef<string>', gave the following error.     Type 'unknown' is not assignable to type 'string'.   Overload 2 of 2, '(options: WritableComputedOptions<string>, debugOptions?: DebuggerOptions | undefined): WritableComputedRef<string>', gave the following error.     Argument of type '() => unknown' is not assignable to parameter of type 'WritableComputedOptions<string>'.       Type '() => unknown' is missing the following properties from type 'WritableComputedOptions<string>': get, set  reactivity.d.ts(13, 41): The expected type comes from the return type of this signature.

Answer 1

meta is an object whose values ​​are of type unknown. You should use type conversion / type casting. route.meta.layout as YourType.
And why did you specify a generic string? If the layout contains a component?