小编use*_*325的帖子

如何从 Vue 3 单文件 Typescript 组件导出类型?

我在一个文件组件中定义了一种类型,我想在另一个组件中使用它。然而,当我在那里导入该类型时,Typescript 声称该类型未导出,并且 ESLint 会对其进行处理any。因此,类似的规则@typescript-eslint/no-unsafe-assignment就会被触发。我发现的一种解决方法是创建一个.d.ts与组件具有相同基本文件名的定义文件,但我希望我的组件保留为单个文件。

最小(非)工作示例:

导出组件.vue

<template>
  <div />
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export type foo = { bar: () => void }

export default defineComponent({
  name: 'ExportingComponent'
})
</script>

<style></style>
Run Code Online (Sandbox Code Playgroud)

导入组件.vue

<template>
  <div />
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { foo } from './ExportingComponent'

export default defineComponent({
  name: 'ImportingComponent',

  setup () {
    // next line triggers @typescript-eslint/no-unsafe-assignment
    const fooFoo = {} as Partial<foo> …
Run Code Online (Sandbox Code Playgroud)

typescript eslint vue.js vuejs3

14
推荐指数
1
解决办法
1万
查看次数

标签 统计

eslint ×1

typescript ×1

vue.js ×1

vuejs3 ×1