Overriding default typeRoots does not seem to be working

[hanselabreu]

Does anyone have any suggestions as a way to create a types library that will be used to declare modules and then be referenced in other libraries? I have tried the following:

Overriding the DefaultTheme in the styled-components/native module

// libs/types/styled.d.ts

declare module "styled-components/native" {
  export type DefaultTheme = {
    colors: string
  }
}

Then configuring typeRoots on the libs/components library like so:

// libs/components/tsconfig.json

{
  ...
  "typeRoots": ["../types"]
  ...
}

Finally importing it on that library and getting it’s overridden values

// libs/components

import { DefaultTheme } from "styled-components/native"

Where DefaultTheme would be an object with the colors key as a string, but it's not. It keeps defaulting to the styled-components/native interface.

Another thing, as per TypeScript's typeRoots documentation, if typeRoots is specified, only packages under typeRoots will be included. For example:

{
  "compilerOptions": {
    "typeRoots": ["./typings", "./vendor/types"]
  }
}

This config file will include all packages under ./typings and ./vendor/types, and no packages from ./node_modules/@types. All paths are relative to the tsconfig.json.

But this does not appear to happen either, if I have typeRoots specified in a library, the ./node_modules/@types are still being defined.

Any suggestions?

[tommyc38]

I too have had issues on how to implement typings in my Nx monorepo, particularly types that are going to be shared between a number of libraries.

CURRENT STATE:
Create one lib per "type grouping". This seems like overkill and could get out of control fast with many libs.

FUTURE STATE
Nx has a cli command for creating a special library for typing data (e.g.libs/shared/types <---lib). First, you create the lib and then you create your "type grouping" which would create a typeRoot for all typing data placed in that sub folder (e.g.libs/shared/types/media <---media typeRoot (e.g. @shared-types-media). Moreover, you could then create these special typings libs to indicate and limit scope (e.g. globally shared, app specific shared, etc.). Lastly, when it came time to build, the incremental builder would only look to see if anything changed in the respective rootTypes folder and only build ones that changed accordingly.

[tommyc38]

This could also be the same case with shared functions

[hanselabreu]

Excellent suggestion. Would love to see something like this implemented. As it is right now, you will find yourself repeating a lot of the typings among different libraries.

[ptrhck]

I do not fully understand your solution. I have defined two modules in two seperate .d.ts files. How can I share them accross libs? I have tried multiple configs, but nothing worked. Would really appreciate help!

[aitorllj93]

something new about this? I have the same issue. I tried all the possible combinations:

tsconfig.base.json

    "typeRoots": ["./node_modules",  "./typings", "libs/web-components/types"],

libs/mylib/tsconfig.json

    "typeRoots": ["../../node_modules", "./types", "../../typings"]

apps/myapp/tsconfig.app.json

    "typeRoots": [
      "../../node_modules",
      "../../libs/web-components/types",
      "../../typings"
    ]

[GentileFulvio]

Any news on this topic ? I seem to have the same issue

[peter-wd-1]

How about using a generator adding "include": [../../global-types/**/*.ts] for libs and apps tsconfig.app/lib.json on creation of libs/apps. You can add overing types there. I solved this way in my case.

[ryanflowers]

I also solved this by adding the path to include as @peter-wd-1 did. However this is a brittle solution as you now have to override the nx generators(yay) plus if you ever move your folder structure it all breaks. Just seems tsc would have a solution for this.

[shady-cansultant]

Hello from 2025 👋🏻. Any movements on this?