nx React/Next.js shared type declaration file

Question

I have a nx Next.js app within my workspace, I'm using styled-components so I created a styled.d.ts file for the type declarations of my theme, as describe on the docs. I placed it on the root of my app and works as expected:

workspace
└── apps
    └── app
        └── styled.d.ts

But now, I created a components library and want to use my theme type definitions over there, so I copied styled.d.ts to libs/:

workspace
├── apps
│   └── app
│       └── styled.d.ts
└── libs
    └── components-library
        └── styled.d.ts

This works and I have my theme type definitions both on the app and on the components library, but I'm duplicating the file. I tried placing it on the root of the workspace but did not work.

Any ideas on how to share styled.d.ts without duplicating it?

Answer 1

We are also using styled components with a types declaration file. To use it across multiple apps and libs we have created a folder types on the root level. Inside there we place the declaration files. For example types/styled-components/index.d.ts.

Next go to your tsconfig.lib.json and tsconfig.app.json. Inside extend the files section for the new types:

  "files": [
    "...",
    "../../types/styled-components/index.d.ts",
  ],