typescript 长期困扰我的问题： 多个组件中共享同一个类型怎么组织？

Question

各位尊贵的大佬：

interface Ii {
     name:string;
    value:number;
    func:()=>void;
}

我又两个组件分布在不同的目录下， 这两个组件下都有上面这段定义，此时 我不管是组件A导出，让组件B引用， 还是组件B导出，让组件A引用。代码组织看上去都不合理。

这时 我是不是应该把这个Ii的定义放在一个新的文件里面？ 这个新的文件又应该放到哪里？ 文件如何命名？

怎么写才能让我的代码组织更合理？ 目前我是随性的export 随性的import。 搞的代码很低端的样子。

Answer 1

所以在一些项目里你会看到“base”、“common”这样表示基础、通用，贯穿全局的文件夹

Answer 2

你可以新建一个types的文件夹 -common.d.ts 或者 .ts 来存

Answer 3

新建 src/types/li.ts（或 src/types/common.ts，尽量将想似的类型声明放在一起）。

export interface Ii {
    name:string;
    value:number;
    func:()=>void;
}

Answer 4

2 种方法

1. 可以用全局类型定义

一个 ts 文件如果没有任何 import export 语句，那这个文件里的内容就是全局生效的，并且只要这个文件在 includes 的路径里就行，不一定非得放在 global.d.ts 中

所以可以新建一个 common.d.ts 然后放在这里，所有文件都可以引用到。

但是这种就是全局变量或全局类型了，有可能会和自已的代码或第三方库已定义的全局类型冲突，或不经意间被覆盖或覆盖别人的类型定义。

2. 放在一个公共目录中

现在 TypeScript 推荐采用文件模块的方式定义类型，即要使用 import export 显式的导出或引入。

所以可以在项目下新建 common 或 shared 目录来放这个文件再 import