TypeScript 类型定义最佳实践

Posted

技术标签:

【中文标题】TypeScript 类型定义最佳实践【英文标题】:TypeScript type definition best practices 【发布时间】:2018-04-23 08:33:08 【问题描述】:

我已经阅读了几十页,试图找出在 TypeScript 中设置类型定义的最佳方法。

我曾经在我的项目中的某处有一个 typings.ts 文件,然后会通过执行类似的操作将类型导入每个需要的文件中

import IMyCustomType from './typings';

在我的类型文件中,我会声明我的类型:

export interface IMyCustomType ...

在使用此样板文件:https://github.com/rokoroku/react-redux-typescript-boilerplate/tree/master/types 进行一些工作后,我意识到他们在项目根目录的 types 文件夹中使用了 models.d.ts

他们使用declare interface IMyCustomType ..而不是export interface IMyCustomType ..

这种设置对我来说有一个很大的优势:我不需要显式导入每个文件中的类型,并且接口可以直接在整个项目中使用。

问题:

1) 编译时自动导入所有**/*.d.ts文件是否正确?

2) 使用declare 并使所有类型对整个项目可用是一种好习惯吗?

3) 是否有标准的目录路径和名称,我应该在其中放置类型定义?

基本上,我试图让我的全局接口在我的项目中随处可用,而无需显式导入它们。这是我应该做的事情吗?如何设置我的项目来实现这一点?

更新

在向我的团队提出这个问题后,大多数人都反对使用环境类型,因此我们决定在需要时导入类型。为了使这更容易,我们依靠我们的 IDE 自动导入所述类型。

【问题讨论】:

您能否详细说明您的团队决定不使用环境类型的原因? 我不记得前段时间的情况了,但 4 年后我没有看到直接声明和导入类型有任何问题。使用环境类型会污染全局空间并产生潜在的冲突。仅使用环境类型来声明在您的应用之外声明的模块或全局变量的类型 【参考方案1】:

从 Typescript 2 开始,您应该使用 d.ts 文件。使用这种方法可以减少很多配置文件。

您可以在以下位置找到更多相关信息:

typings vs @types NPM scope https://georgedyrra.com/2017/06/04/migrating-from-typings-to-npm-types/

【讨论】:

你根本没有回答这个问题。 OP 不是在问他是否应该使用d.ts,而是在询问组织类型(目录位置/结构)和使用它们(环境声明与导出)的最佳实践【参考方案2】:

您应该使用 @types NPM 范围。您可以在Typescript Handbook 中找到更详细的指南,但基本上您需要做的就是运行 NPM 命令:

npm install --save @types/lodash

关于你的问题,基本上使用这种方法你根本不需要担心类型定义文件,它们对于第三方库的存在对你来说是透明的(你不关心它们放在哪里或如何导入他们,你只需要自己导入模块)。

关于使用declare,我认为这是一个单独的话题,但你可以看看这个问题:What's the difference between "declare class" and "interface" in TypeScript

【讨论】:

谢谢,但我的问题与库类型无关,而是与我自己的接口和类型有关。基本上我应该让我的类型成为环境(随处自动可用)还是应该导入它们。 用我决定去做的事情更新了我的问题

以上是关于TypeScript 类型定义最佳实践的主要内容,如果未能解决你的问题,请参考以下文章

聊聊TypeScript类型声明那些最佳实践

聊聊TypeScript类型声明那些最佳实践

聊聊TypeScript类型声明那些最佳实践

聊聊TypeScript类型声明那些最佳实践

Vue 3.0前的 TypeScript 最佳入门实践

Vue Typescript 组件类属性初始化器的最佳实践