时间戳

首页 > 解决方案 > 在 React 中导入 src 之外的 TypeScript 类型

node.js - 在 React 中导入 src 之外的 TypeScript 类型

问题描述

我最近一直在做一个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 之外的打字稿类型，但不适用于函数或其他模块？我假设它与 CRA 项目中如何处理 Typescript 有关，但我不太了解这个过程？

标签： node.jsreactjstypescript

解决方案

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

推荐阅读