与 monorepo 中的每个包共享 typescript 模块

Question

我有一个使用样式组件构建的反应组件的单一存储库，从主题提供者获取它们的主题。

declare module 'styled-components' {
  export interface DefaultTheme {
    colours: Colours;
    spacing: Spacing;
    breakpoints: Breakpoints;
  }
}

以上内容当前位于我的根类型文件夹中

<root>/types/styled.d.ts

但是，我有大约 20 个组件包，并且还在不断增长。

当我将上述文件包含在我的组件 src 目录中时，我的智能感知就可以工作。

<root>/components/[component name]/src/[src files + styled.d.ts]

但是，在每个包中包含相同的文件似乎有点过分了？

有没有办法，也许使用 tsconfig ？告诉我的包使用我的根类型文件夹中的上述模块？

谢谢！

编辑：

我已经更新了我的文件以像这样导入：

import '@common-types/styled';

这按预期工作 - 这是正确的方法吗？

Answer 1

虽然我不确定什么是“理想”方法，但你的问题帮助我解决了类似的问题。

我正在做的是将声明包含在声明

MyTheme

的同一文件中（例如

<rootDir>/packages/theme/src/theme.ts

）。

export type MyThemetype = {
  colors: {
    foreground: 'black' | 'white',
  }
}

declare module 'styled-components' {
  export interface DefaultTheme extends MyThemeType {}
}

MyThemeType

最终导出到这个包的

<rootDir>/packages/theme/src/index.ts

（我们称之为

@my-lib/theme

）。

然后我在其他具有

@my-lib/theme

作为依赖项的包上使用它。

例如

<rootDir>/packages/label/...

import '@my-lib/theme'
import styled from 'styled-components'

const Label = styled.span`
  color: ${({ theme }) => theme.colors.foreground} // intellisense works as expected
`

export default Label

我相信这与你正在做的事情相似，所以谢谢你！

Answer 2

在 monorepo 中的项目之间共享

declare module ***

，我的解决方案

1. 创建普通类型项目

   aweb-types

   ，添加下面的

   global.d.ts

import { pageLoading } from './src/loading/PageLoading'

declare module 'vue/types/vue' {
  interface Vue {
    $loading: typeof pageLoading
  }
}

2. 因为我需要扩展

   Vue

   的定义，所以我应该在

   Vue

   的

   aweb-types

    中添加 

   node_modules

"peerDependencies": {
  "vue": "^2.7.16"
},

3. 我可以在目标项目的

   global.d.ts

   中使用这个

   tsconfig.json

// tsconfig.json
{
  "files": ["../../packages/aweb-types/global.d.ts"],
}

现在我可以在

this.$loading.show()

 中链接 

vscode