React项目文件中-index.ts的作用

小白的疑问

如果项目中文件夹有index.ts, A.tsx,B.tsx,
A文件:export const TestA
A文件:export const TestB
那么index文件应该怎么写?
身为自学的小白,产生了疑问.

写法介绍

在这个场景下,index.tsx 文件应该作为 A.tsx 和 B.tsx 的入口文件,用于重新导出其导出的内容
例如,如果 A.tsx 中导出:

export const TestA = 'A';

B.tsx 中导出:

export const TestB = 'B';

则 index.tsx 可以写成:

export { TestA } from './A';
export { TestB } from './B';

这样就可以从 index.tsx 引入 TestA 和 TestB:

import { TestA, TestB } from './index';

所以,index.tsx 的作用是方便用户更简洁地导入文件夹下的内容,而不需要直接导入每个文件。
类似的结构在 TypeScript、React 项目中很常见,例如:

- src/
  - components/
    - Button.tsx
    - Input.tsx
    - index.ts // 重新导出 Button 和 Input
    - ...
  - pages/
    - Home.tsx
    - About.tsx
    - index.ts // 重新导出 Home 和 About

- ... 

等等
通过定义 index.ts/index.tsx 这样的入口文件,项目结构和导入会显得更加清晰和简洁。
所以,如果在项目中有多个可导出的文件,推荐:

1. 在每个文件中使用 export 导出需要导出的内容
2. 在文件夹下创建 index.ts/index.tsx 文件
3. 在 index 文件中使用 export { … } from ‘./…’ 重新导出其他文件中的内容
4. 鼓励用户使用 export from ‘./index’ 导入文件夹下的所有内容

另一种写法(不推荐)

如果 index.tsx 写成:

export * from './A';

则可以在导入时直接从 index 导入 A 中的内容,例如:

import { TestA } from './index';

export * 的作用是重新导出 A.tsx 中的所有导出内容,这在简化导入方面与手动列出每个导出是等效的。
所以上面的写法在本例中是等价的,使用 export * 可以更简洁一些。它表示从 A 中重新导出所有的内容,使用方可以直接从 index 导入需要的任何导出。
但是,export * 也有一定的缺点:

1. 如果 A.tsx 中的导出接口/类型名与其他文件冲突,会造成覆盖,这可能导致意料之外的错误。
2. 如果 A.tsx 的导出内容改变,使用 export * 的文件也需要重新编译。而手动导出的话,如果新增内容与当前使用无关,则不会影响其他文件。
3. 阅读 export * 时不直接知道它重新导出了哪些具体内容,需要打开 A.tsx 查看。
   所以,总体来说,在小范围内使用 export * 是比较方便的,但在大型项目或公共库中,手动导出可能会更明了也更稳健。
   这完全取决于具体场景和工程需要。

总结一下:

1. export * 可以简洁地重新导出其他文件的所有导出内容
2. 使用 export * 的 index文件支持直接从中导入源文件中的任何内容
3. 相比手动导出,export * 有一定的缺点,如名称冲突的风险和上述其他提到的问题
4. 在工程化项目中,明确导出可能会更清晰和稳定

项目多层级时

当项目结构较深,包含多层文件夹时,为了方便导入,通常会在每一层文件夹中创建 index.ts/index.tsx 文件,用于重新导出下一层文件夹的内容。

- src/
  - components/
    - Button.tsx
    - Input.tsx
  - containers/
    - Header/
      - Logo.tsx
      - Nav.tsx
      - index.ts // 导出 Logo和Nav
    - Footer/  
      - Copyright.tsx
      - Nav.tsx  
      - index.ts // 导出 Copyright和Nav 
    - index.ts // 导出 Header和Footer

则可以这样导入:

import { Logo, Nav } from './containers/Header'; 
import { Copyright, Nav } from './containers/Footer';
import { Header, Footer } from './containers'; 

可以看到,通过在每一层创建 index.ts 文件重新导出下一层的内容,可以轻松地从任意层导入需要的组件。
所以,在处理较深或复杂的项目结构时,建议:

1. 在每个文件夹内部使用 export 导出子组件
2. 在文件夹下创建 index.ts 文件,使用 export * 或手动导出重新导出子组件
3. 上一层的 index 文件再重新导出该文件夹的内容
4. 以此类推,直到页面级别

这种层级化的结构和重新导出,让项目具有极高的可读性,也方便了各个层级内外的引用。
使用这种结构的项目,其导入语句也会自然呈现出层级感,一目了然。

总结一下:

1. 在多层目录结构中创建 index.ts 文件进行重新导出
2. 上一层的 index 文件再重新导出下层的 index 文件
3. 鼓励从尽量高的层级导入,使导入语句自然呈现层级关系
4. 这种结构清晰且易于使用,是工程化项目的常见实践