如何为vue Provide/Inject 便捷标注TS类型

277 阅读1分钟

实践中大部分Provide/Inject使用场景,是要注入一些定义在组件中的方法。此时如何给注入项标注TS类型成了难题。我们可以直接通过as直接手动标注,但是如果原注入项类型如果变动,手动标注维护将相当麻烦。

我的思路是利用InstanceType<>这个工具,首先将原注入项openBlindBoxSetting项导出

function openBlindBoxSetting(schemeId:string){
  myBlindBoxSetting.value?.showModal(schemeId)
}
provide("openBlindBoxSetting",openBlindBoxSetting)
//前加_以标识为仅为type目的
defineExpose({_openBlindBoxSetting:openBlindBoxSetting})

在被注入的地方

import PropManagerOnline from "../../../views/PropManagerOnline.vue";
type a=InstanceType<typeof PropManagerOnline>
const openBlindBoxSetting=inject("openBlindBoxSetting") as  a['_openBlindBoxSetting']

这样就可以拿到原注入项的代码类型提示了

image.png