在 React 中的 src 之外导入 TypeScript 类型

Question

我最近一直在做一个React + Express项目，它的项目文件结构是这样的：

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

所以 express 应用程序位于ExpressApp文件夹中，react 应用程序位于ReactApp文件夹中， Common内部是一组在 express 和 react 应用程序之间共享的Typescript类型。

react 应用程序是一个create-react-app项目，我已经阅读了与导入位于 react apps src 目录之外的文件相关的问题。 但是，在 React 应用程序中，我似乎可以Common/types.ts将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 目录中——但是，在导入类型、接口等时没有发现问题.

有人可以解释一下为什么这似乎适用于驻留在 src 之外的打字稿类型，而不适用于函数或其他模块吗？ 我假设它与在 CRA 项目中处理 Typescript 的方式有关，但我不太了解这个过程？

Answer 1

类型和接口没有被编译，所以它们本质上作为构建过程的第一部分被删除，并且构建可以继续进行。 但是其余的构建过程依赖于src文件夹中存在的所有代码，并且该目录中不存在公共函数代码（已编译）。