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

【问题标题】：Importing TypeScript types outside of src in React在 React 中导入 src 之外的 TypeScript 类型
【发布时间】：2020-12-14 18:24:26
【问题描述】：

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

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

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

react 应用程序是一个create-react-app 项目，我已经阅读了与导入驻留在 react 应用程序 src 目录之外的文件相关的问题。但是，在 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 目录中 - 但是，导入类型时没有发现问题, 接口等。

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

【问题讨论】：

代码可以驻留在src/之外并且仍然可以被导入/编译。 Path mapping 支持。实际示例：Crisp React。我是作者。
@winwiz1 这似乎可行，但/dist 文件夹的输出模仿了monorepo 的文件夹结构，而不是根项目。如果这是有道理的，有什么想法吗？

标签： node.js reactjs typescript

【解决方案1】：

类型和接口没有被编译，所以它们基本上在构建过程的第一部分就被删除了，构建可以继续进行。但是其余的构建过程依赖于src文件夹中存在的所有代码，而该目录中不存在通用功能代码（编译后的）。

【讨论】：