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

Question

我在一个文件组件中定义了一种类型，我想在另一个组件中使用它。然而，当我在那里导入该类型时，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>

导入组件.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>

    /* do something with fooFoo... */
 
    return {}
  }
})
</script>

<style>
</style>

Answer 1

处理此问题的另一种方法是使用

<script setup>

，它允许您在同一组件中使用“普通”脚本标记。

<!-- ExportingComponent.vue -->
<template>
  <div />
</template>

<script lang="ts">
export type foo = { bar: () => void }
</script>

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

const someVar = ref(1)
</script>

<style></style>