Блог

В последнее время я работал над React Express проектом, который имеет структуру файла проекта, подобную этой:

 Repo
  |--ExpressApp
      |--src/..
  |--Common
      |--types.ts
  |--ReactApp
      |--src/..
  

Таким образом, приложение Express находится в ExpressApp папке, приложение react — в ReactApp папке, а внутри Common находится набор Typescript типов, которые совместно используются приложениями Express и react.

Приложение react — это create-react-app проект, и я прочитал проблемы, связанные с импортом файлов, которые находятся за пределами каталога src react apps. Однако в приложении React я, кажется, могу импортировать типы, указанные из Common/types.ts , в приложение React без каких-либо проблем.

 /** Common/types.ts */

// This imports ok to React app even though its outside of the src directory
export type Person {
 id: string,
 name: string,
 role: string
};

// This does not import into React app, as it is outside of the source directory
export const smapleFunction = () => {
  ...
}
  

 /** ReactpApp/src/app.ts */

// This is accepted by React
import { Person } from '../../common/types';

// This is not accepted by React
import { sampleFunction } from '../../common/types';

  

Если бы я экспортировал функцию из файла Common/types.ts и использовал ее в приложении React, то react выдает ожидаемую ошибку о том, что файлы должны находиться в каталоге src — однако при импорте типов, интерфейсов и т.д. проблем не обнаружено.

Не мог бы кто-нибудь, пожалуйста, объяснить, почему это работает для типов typescript, находящихся за пределами src, но не для функций или других модулей? Я предполагаю, что это как-то связано с тем, как Typescript обрабатывается в проекте CRA, но я не совсем понимаю процесс?

Типы и интерфейсы не компилируются, поэтому они по существу удаляются в качестве первой части процесса сборки, и сборка может продолжаться. Но остальная часть процесса сборки зависит от всего кода, существующего в src папке, а общий функциональный код (который компилируется) не существует в этом каталоге.