reactjs - TypeScript Atenționare: Exportul, reexportat ca, nu a fost găsit (exporturi posibile)

Cu această structură de dosare

├──components/
|  └─Employee/
|    └─employee.tsx
|    └─index.ts
|  └─app.tsx

Export un tip și un component

angajat.tsx

import React, { FC } from 'react'

export type EmployeeState = {
  Name: string
  EmployeeId: number
}

type EmployeeProps = {
  employees: EmployeeState[]
}

export const Employee: FC<EmployeeProps> = ({ employees }) => {
  return (
    <ul>
    {
      employees.map((employee) => (
        <li key={employee.EmployeeId}>
          <h2>{employee.Name}</h2>
        </li>
      ))
    }
    </ul>
  )
} 

Și apoi exportând din index.ts din folderul Employee

index.ts

export { EmployeeState, Employee } from './employee'

Când încerc să import din app.tsx

app.tsx

...
import { EmployeeState, Employee } from '@components/Employee'
...

Primesc acest avertisment de la TypeScript:

WARNING in ../src/components/Employee/index.ts 4:0-53
`export 'EmployeeState' (reexported as 'EmployeeState') was not found in './employee' (possible exports: Employee)`

Am reușit să remediez avertizarea făcând această modificare:

Angajat/index.ts

Veche:

export { EmployeeState, Employee } from './employee'

Nou:

export * from './employee'

Dar tot nu înțeleg de ce nu ar funcționa în sens invers.

Răspuns #1

Am avut și eu această problemă și, după ce am cercetat puțin mai mult, am găsit acest Issue pe GitHub care intră în detalii dacă ești interesat: https://github.com/webpack/webpack/issues/7378#issuecomment-683894656

Oricum, soluția este că type-ul tău trebuie exportat diferit. Actualizarea codului tău după cum urmează ar trebui să rezolve problema.

export { Employee } from './employee'
export type { EmployeeState } from './employee'

De asemenea, poți face următoarele, mulțumesc @bmacher pentru comentariu!

export { Employee, type EmployeeState } from './employee'

Dacă vrei să citești mai multe despre cum și de ce se întâmplă acest lucru, aici este un articol bun: https://javascript.plainenglish.io/leveraging-type-only-imports-and-exports-with-typescript-3-8-5c1be8bd17fb