Share typescript module with every package in a monorepo

user_3368068 0
Viewed 474

I have a monorepo of react components that are built using styled-components, getting their themes from a theme provider.

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

The above currently lives in my root types folder <root>/types/styled.d.ts

However, I have about 20 component packages, and growing.

When I include the above file in my components src directory, my intellisense works.

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

However, including the same file in every single package seems overkill?

Is there a way, maybe using tsconfig? To tell my package to use the above module from my root types folder instead?

Thanks!

Edit:

I've updated my files to import like so: import '@common-types/styled';

This works as expected - Is the the right way to do this?

tsconfig styled-components typescript reactjs
1 Answers

While I'm not sure what is "ideal" approach, your question helped me with a similar problem.

What I'm doing is including the declaration on the same file where MyTheme is declared (e.g. <rootDir>/packages/theme/src/theme.ts).

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

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

MyThemeType is eventually exported on the <rootDir>/packages/theme/src/index.ts of this package (let's call it @my-lib/theme).

Then I use it on other packages that have @my-lib/theme as a dependency.

E.g. <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

Which I believe is similar to what you're doing, so thank you!

user_142555310
Related