reactjs - Del TypeScript-modul med hver pakke i et monorepo

Jeg har et monorepo med React-komponenter som er bygget med styled-components, og som får temaene sine fra en theme provider.

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

Ovenstående ligger for øyeblikket i min rot-typer-mappe <root>/types/styled.d.ts

Men jeg har omtrent 20 komponentpakker, og tallet øker.

Når jeg inkluderer filen ovenfor i komponentenes src-katalog, fungerer intellisense.

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

Men å inkludere den samme filen i hver eneste pakke virker overdrevent?

Finnes det en måte, kanskje ved å bruke tsconfig? Å fortelle pakken min om å bruke modulen ovenfor fra rot-typemappen min i stedet?

Takk!

Rediger :

Jeg har oppdatert filene mine for å importere slik: import '@common-types/styled';

Dette fungerer som forventet - Er dette den riktige måten å gjøre det på?

Svar #1

Selv om jeg ikke er sikker på hva som er den «ideelle» tilnærmingen, hjalp spørsmålet ditt meg med et lignende problem.

Det jeg gjør, er å inkludere deklarasjonen i samme fil der MyTheme er deklarert (f.eks. <rootDir>/packages/theme/src/theme.ts).

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

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

MyThemeType eksporteres til slutt i <rootDir>/packages/theme/src/index.ts av denne pakken (la oss kalle den @my-lib/theme).

Da bruker jeg det på andre pakker som har @my-lib/theme som en avhengighet.

F.eks. <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

Som jeg tror ligner på det du gjør, så takk!

Svar #2

For å dele declare module *** mellom prosjekter i monorepo, min løsning

  1. opprett et vanlig typeprosjekt aweb-types, legg til global.d.ts som er nedenfor
import { pageLoading } from './src/loading/PageLoading'

declare module 'vue/types/vue' {
  interface Vue {
    $loading: typeof pageLoading
  }
}
  1. fordi jeg trenger å utvide Vue-definisjonen, bør jeg ha Vue i aweb-typess node_modules
"peerDependencies": {
  "vue": "^2.7.16"
},
  1. Jeg kan bruke denne global.d.ts i målprosjektets tsconfig.json
// tsconfig.json
{
  "files": ["../../packages/aweb-types/global.d.ts"],
}

nå kan jeg koble this.$loading.show() i vscode legg til bildebeskrivelse her

Relaterte artikler