typescript - Cum pot să export un tip dintr-un component Vue 3 cu fișier unic?

Am un tip definit într-un singur component de fișier pe care aș dori să-l folosesc într-un alt component. Totuși, când import acel tip acolo, Typescript susține că tipul nu este exportat și ESLint îl tratează ca any. Astfel, reguli ca @typescript-eslint/no-unsafe-assignment sunt declanșate. O soluție pe care am găsit-o este crearea unui fișier de definiție .d.ts cu același nume de bază ca componenta, dar aș dori ca componentele mele să rămână într-un singur fișier.

Exemplu minim (ne)funcțional:

ExportingComponent.vue

<template>
  <div />
</template>

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

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

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

<style></style>

ImportingComponent.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>

Răspuns #1

O altă modalitate de a gestiona acest lucru este folosind <script setup>, care vă permite, de asemenea, să utilizați un tag de script „normal” în același component.

<!-- 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>