how do I add global types

[GiladShoham]

something like

declare module "something" {
  ...
}

[GiladShoham]

In general, you have to create your own custom env.
Then when you overrideTsConfig the second argument is compilerOptions
One of the props of this is types (array of paths to the global types files)
See it here - https://github.com/teambit/bit/blob/master/scopes/react/react/react.main.runtime.ts#L108
you should also overrideBuildTsConfig - https://github.com/teambit/bit/blob/master/scopes/react/react/react.main.runtime.ts#L123
you can see how we use it internally here - https://github.com/teambit/bit/blob/master/scopes/react/react/react.env.ts#L140

[ivansky]

Hi @GiladShoham is it ok? We have types in ./types folder that is not default for typesRoot.
Btw typesRoot is not possible to setup by these API methods.

const tsConfig = react.getTsConfig();
const compilerOptions: Partial<TsCompilerOptionsWithoutTsConfig> = {
  // typeRoots: ['./node_modules/@types', './types'], // not possible
  types: [resolve(process.cwd(), './types/theme/index.d.ts')],
};

const customReactEnv = react.compose([
  react.overrideDependencies(deps),
  react.overrideJestConfig(JestConfig, require.resolve('jest')),
  react.overrideTsConfig(tsConfig, compilerOptions),
  react.overrideBuildTsConfig(tsConfig, compilerOptions),
]);

[GiladShoham]

No.it won't work.
Keep in mind that your components might be imported to other machines or workspaces where you don't have that path.
That's why you need to put the types inside your env to make sure it is always available.
That's also why types root is not available on this api, as this has to not be bound to file system structure.

[ivansky]

Hi @GiladShoham I did change custom-react but it does not seem to work.
Also created custom-react/@types/theme.d.ts file with related typings that should be in TS context.

export class CustomReactExtension {
  constructor(private react: ReactMain) {}

  static dependencies: any = [EnvsAspect, ReactAspect];

  static async provider([envs, react]: [EnvsMain, ReactMain]) {
    const compilerOptions: Partial<TsCompilerOptionsWithoutTsConfig> = {
      types: [resolve(__dirname, './@types/theme.d.ts')],
    };
    const tsConfig = react.env.getTsConfig();
    const buildTsConfig = react.env.getBuildTsConfig();

    const customReactEnv = react.compose([
      react.overrideDependencies(deps),
      react.overrideJestConfig(JestConfig, require.resolve('jest')),
      react.overrideTsConfig(tsConfig, compilerOptions),
      react.overrideBuildTsConfig(buildTsConfig, compilerOptions),
    ]);

    envs.registerEnv(customReactEnv);

    return new CustomReactExtension(react);
  }
}

I still get error from the component that depends on custom-react env.

/.../[email protected]/IconSvg.tsx:5:43 - error TS2339: Property 'icons' does not exist on type 'DefaultTheme'.
5 export type IconSize = keyof DefaultTheme['icons'];
                                            ~~~~~~~
Found 1 errors in 1 components

[GiladShoham]

The implementation looks good.
Please check with bit envs that your component got the custom react correctly.
If it does, please paste here the theme.d.ts file to take a look.

[na-ji]

Here's an updated answer using the latest API.
First you have to create your own custom env (bit create react-env [env id]).

Then in the main.runtime.ts file, you have a class with a static method called provider. In this method, you can overwrite the typescript configuration. Instead of using the deprecated overrideTsConfig, you can use the new useTypescript.
Here's an example for an environment called "Default":

import type { TypescriptConfigMutator } from '@teambit/typescript';
import { EnvsAspect, EnvsMain } from '@teambit/envs';
import { MainRuntime } from '@teambit/cli';
import { ReactAspect, ReactMain } from '@teambit/react';
import { resolve } from 'path';

import { DefaultAspect } from './default.aspect';

export class DefaultMain {
  static slots = [];

  static dependencies = [ReactAspect, EnvsAspect];

  static runtime = MainRuntime;

  static async provider([react, envs]: [ReactMain, EnvsMain]) {
    const templatesReactEnv = envs.compose(react.reactEnv, [
      /**
       * Override typescript type
       */
      react.useTypescript({
        buildConfig: [
          (config: TypescriptConfigMutator) => {
            config.addTypes([resolve(__dirname, './typescript/styled-components.d.ts')]);

            return config;
          },
        ],
      }),
    ]);
    
    envs.registerEnv(templatesReactEnv);
    return new DefaultMain();
  }
}

DefaultAspect.addRuntime(DefaultMain);

With that, the file ./typescript/styled-components.d.ts is correctly copied to every components.