在一个大型TypeScript项目中分享类型的最佳方法是什么?

4

我正在处理一个使用TypeScript编写的大型React应用程序。 我有许多常见的类型在单独的文件中声明,每次需要一个类型时我都会导入它。 这个方法很有效,但会创建大量不同的导入,这是我绝对不喜欢的。

另一种选择是使用.d.ts文件全局声明类型并能够在不显式导入它们的情况下使用类型。 这被认为是更好的实践,还是我应该坚持使用导入?


如果我直接使用TypeScript工作,通常不会创建.d.ts文件,但是如果您有共享类型,可以将它们移动到单独的文件中,就像rdd在他的答案中提到的那样。如果要编译它,TypeScript有选项可以自动生成.d.ts文件。 - Keff
2个回答

9

我认为这是一种最好的常识性方法。例如,我们现在正在开发一个大型的React应用程序,使用一个单一仓库(monorepo),共享组件存储库。因此,我们有一些规则,如声明和组件:

  • 如果你在多个地方使用一种类型/接口,则会放入 ~shared/lib/types.ts 文件中。
  • 如果你有一个在多个地方使用的组件,则会重构到 ~shared/components 文件夹中。
  • 如果你扩展了一种类型/接口,它可以在本地声明,但只要它不被多次使用。

一旦人们习惯了这些简单的规则,开发工作就变得更加容易。开发人员习惯于需要时进行重构,也会思考他们编写代码的方式。


+1 这是一个很好的方法,我们正在开发和维护一个大型的 Angular 应用程序,也在采用类似的方式! - Keff
谢谢你的回答!关于导入,你认为在每个使用共享类型的文件/模块中明确导入它们是否可以?我可以使用.d.ts文件全局声明类型,并在整个项目中使用而无需导入。 - artemtam
我认为这没有问题,你明确地说明了你想要什么。将这些导入移动到单个文件中以进行导入只是清理了我们对其的视图,代码仍然会导入它们。 - rrd
2
我对你们如何处理具有大量已定义类型且使文件难以阅读并专注于代码逻辑而非类型的组件感兴趣。这些类型与组件直接相关,仅在组件使用时才会偶尔导入到其他地方。在这种情况下,最好的方法是什么?谢谢。 - zanona

5
  1. Put all the shared declarations in a file, say index.d.ts.

  2. Put this file in a folder say /src/typings

  3. In tsconfig.json, update the following field:

    {.   
       "compilerOptions": {.  
           "typeRoots": ["./node_modules/@types", "./src/typings"].  
       }.  
    }.  
    
现在,这些类型将在所有文件中可用。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接