React 是一个建立在 JavaScript 之上的组件化 UI 框架，TypeScript 是一种强类型的 JavaScript 扩展语言。使用 TypeScript 可以让我们在开发过程中减少代码中出现的类型错误，增加代码可维护性，提高开发效率。在 React 项目中，使用 TypeScript 也是一个不错的选择。本文将详细介绍如何更好地组织 TypeScript 文件，并给出示例代码。
目录结构
一个良好的目录结构可以帮助我们更好地组织代码和资源。在 React 项目中，我们可以按照功能或者业务模块来组织目录结构。下面是一种比较常见的目录结构：
-- -------------------- ---- ------- ---- --- ----------- - --- ------- - - --- --------- - - --- ------------------ - - --- --------------- - - --- ----------- - --- ------- - --- ------- - --- --- --- ------ - --- ----- - --- ------ - --- --- --- --------- --- ------ --- ---
在上述目录结构中，components/ 目录存放 React 组件，pages/ 目录存放路由页面，services/ 目录存放与后端通信的代码，utils/ 目录存放一些通用的工具函数等。每个组件都有自己的文件夹，文件夹中包含组件本身的代码以及相关的测试文件和样式文件等。
组件的命名和导出
一个组件的命名应该能够反映出它的作用和特点。在代码中，我们可以使用 PascalCase 的命名法来命名组件，例如 Button。在导出组件时，可以使用默认导出或者命名导出。如果组件只有一个，可以使用默认导出，例如：
-- -------------------- ---- -------
------ ----- ---- --------
--------- ----------- -
----- -------
-------- -- -- -----
-
------ ------- -------- -------- ----- ------- -- ------------ -
------ -
------- ---------------------------------
--
-如果组件有多个，可以使用命名导出，例如：
-- -------------------- ---- -------
------ ----- ---- --------
--------- ----------- -
----- -------
-------- -- -- -----
-
------ -------- -------- ----- ------- -- ------------ -
------ -
------- ---------------------------------
--
-
------ -------- ------------ ----- -------- -- - ----- ------- --------- --------------- -- -
------ -
-- --------------------------
--
-Prop Types 和 Default Props
虽然 TypeScript 中已经有了类型检查，但是使用 Prop Types 和 Default Props 仍然是必要的。Prop Types 可以在组件使用时检查传入的 props 是否正确；Default Props 可以为缺少某个 props 的组件提供默认值，并告知使用者。
在使用 React 组件时，可以通过以下方式来设置 Prop Types 和 Default Props：
-- -------------------- ---- -------
------ ----- ---- --------
------ --------- ---- -------------
--------- ----------- -
----- -------
-------- -- -- -----
---------- --------
-
------ ------- -------- -------- ----- -------- -------- - ----- -- ------------ -
------ -
------- ----------------- -----------------------------------
--
-
---------------- - -
----- ----------------------------
-------- --------------------------
--------- ---------------
--
------------------- - -
--------- ------
--使用 PropTypes 模块来检查 props 是否正确，使用组件自带的 defaultProps 属性来设置默认值。
引入 CSS / SCSS
在 React 项目中，我们一般使用 CSS / SCSS 来美化页面。在 TypeScript 中引入 CSS / SCSS 文件可以使用以下方式：
-- -------------------- ---- -------
------ ----- ---- --------
------ ---------------- -- ---- --- ---- ---- --
--------- ----------- -
----- -------
-------- -- -- -----
---------- --------
-
------ ------- -------- -------- ----- -------- -------- - ----- -- ------------ -
------ -
------- --------------- ----------------- -----------------------------------
--
-其中，import './Button.scss' 可以让 Webpack 在构建时将 CSS / SCSS 文件打包进对应的 js 文件中。在组件中，可以直接使用 CSS 类名来设置样式。
编写测试文件
测试对于保证代码质量和稳定性是非常重要的。在 TypeScript 中编写测试文件可以使用 Jest 框架，和普通 JavaScript 没有太大的区别。一个测试文件一般和被测试的文件放在同一个目录下，并以 .test.tsx 结尾。以下是一个示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- --------- - ---- -------------------------
------ ------ ---- ----------
------------------ -- -- -
------------- ---- ------ -- -- -
----- - --------- - - -------------- ----------- --- ----------- -- --- ----
----- ------ - ---------------- ------
-----------------------------------
---
----------- ------- ---- --------- -- -- -
----- ----------- - ----------
----- - --------- - - -------------- ----------- --- --------------------- ----
----- ------ - ---------------- ------
------------------------
---------------------------------------
---
---在上述示例中，使用了 @testing-library/react 模块来渲染组件并进行测试。fireEvent 函数可以模拟用户的操作行为。两个测试用例分别测试了渲染和点击事件。可以在运行 npm test 或者 yarn test 命令时执行测试文件。
总结
在 React 项目中更好地组织 TypeScript 文件可以从目录结构、组件命名、导出、Prop Types、Default Props、样式引入和测试编写等方面入手，提高代码质量和可维护性。希望本文可以对读者在实际开发过程中有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c1b3c483d39b48815edbef