TS中inject type unknown的问题

取啥名儿呢

已于 2023-03-07 14:57:44 修改

阅读量850

点赞数

文章标签： vue.js Powered by 金山文档

于 2023-03-07 14:24:16 首次发布

本文链接：https://blog.csdn.net/qq_36451761/article/details/129381014

版权

文章讲述了在Vue应用中，使用<scriptsetup>语法糖结合typescript时，遇到通过provide传递的reload函数在子组件中注入后出现类型错误的问题。解决方案包括检查类型、提供默认值以及使用InjectionKey来精确定义类型，从而避免类型推断错误。

摘要由CSDN通过智能技术生成

描述

App.vue
<script setup lang="ts">
import { provide, ref, nextTick } from 'vue'
const isRouterAlive = ref<boolean>(true)
const reload = () => {
  isRouterAlive.value = false
  nextTick(() => {
    isRouterAlive.value = true
  })
}
provide('reload', reload)
</script>

OtherComponent.vue
<script setup lang="ts">
import { reactive, inject } from 'vue'
const reload = inject('reload')
const fun1 = () => {
  reload()
}
</script>

此时TS会报错：'reload' is of type 'unknown'.

解决方案

判断类型

if (typeof reload === 'function') {
  reload()
}

给定初始值

const reload = inject('reload', () => {})
const reload = inject('reload') as () => {}

3. InjectionKey

function provide<T>(key: InjectionKey<T> | string | number, value: T): void
function inject<T>(key: InjectionKey<T> | string): T | undefined
function inject<T>(key: InjectionKey<T> | string, defaultValue: T, treatDefaultAsFactory?: false): T
function inject<T>(key: InjectionKey<T> | string, defaultValue: T | (() => T), treatDefaultAsFactory: true): T

types.ts
import type { InjectionKey } from 'vue'
export const reloadInjectKey: InjectionKey<() => {}> = Symbol('reload')

App.vue
import { reloadInjectKey } from '@/utils/types'
provide(reloadInjectKey, reload)

OtherComponent.vue
import { reloadInjectKey } from '@/utils/types'
const reload = inject(reloadInjectKey)