reactjs - Dijeljenje TypeScript modula sa svakim paketom u monorepu

Imam monorepo React komponenti koje su izrađene koristeći styled-components, a svoje teme dobivaju od pružatelja tema.

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

Gore navedeno trenutno se nalazi u mojoj mapi root tipova <root>/types/styled.d.ts

Međutim, imam oko 20 paketa komponenti, i taj broj raste.

Kada uključim gore navedenu datoteku u moj direktorij komponenti src, moj IntelliSense radi.

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

Međutim, uključivanje iste datoteke u svaki paket djeluje pretjerano?

Postoji li način, možda korištenjem tsconfig-a? Da kažem svom paketu da umjesto toga koristi gore navedeni modul iz moje root types mape?

Hvala!

Uredi :

Ažurirao sam svoje datoteke da se uvoze ovako: import '@common-types/styled';

Ovo radi kako se očekivalo - Je li ovo pravi način da se to učini?

Odgovor #1

Iako nisam siguran što je 'idealni' pristup, tvoje pitanje mi je pomoglo sličnom problemu.

Ono što radim je uključivanje deklaracije u istu datoteku gdje je MyTheme deklariran (npr. <rootDir>/packages/theme/src/theme.ts).

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

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

MyThemeType na kraju se eksportira u <rootDir>/packages/theme/src/index.ts ovog paketa (nazovimo ga @my-lib/theme).

Tada ga koristim na drugim paketima koji imaju @my-lib/theme kao ovisnost.

Npr. <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

Što vjerujem da je slično onome što radite, pa hvala vam!

Odgovor #2

Da bih dijelio declare module *** između projekata u monorepu, moje rješenje

  1. kreiraj projekt uobičajenog tipa aweb-types, dodaj global.d.ts koji je dolje
import { pageLoading } from './src/loading/PageLoading'

declare module 'vue/types/vue' {
  interface Vue {
    $loading: typeof pageLoading
  }
}
  1. jer trebam proširiti definiciju Vue, trebao bih imati Vue u node_modules od aweb-types
"peerDependencies": {
  "vue": "^2.7.16"
},
  1. Mogu koristiti ovaj global.d.ts u tsconfig.json ciljane projekte
// tsconfig.json
{
  "files": ["../../packages/aweb-types/global.d.ts"],
}

sada mogu povezati this.$loading.show() u vscode unesite opis slike ovdje

Povezani članci