Typescript Configuration

To change your env's default Typescript configuration, or to replace your current compiler with Typescript, implement the following in your env:

/* your base environment */
import { ReactEnv } from '@teambit/react.react-env';

import type { EnvHandler } from '@teambit/envs';
import type { Compiler } from '@teambit/compiler';
import {
  TypescriptTask
  TypescriptCompiler,
  resolveTypes,
} from '@teambit/typescript.typescript-compiler';

export class MyEnv extends ReactEnv  {

  name = 'my-env';

/**
 * replace the env's default compiler
 * (for compilation in development)
 */
  compiler(): EnvHandler<Compiler> {
    return TypescriptCompiler.from({
      /**
       * the configuration file to be used by this typescript compiler
       */
      tsconfig: require.resolve('./config/tsconfig.json'),
      /**
       * a directory with global deceleration
       * files (d.ts) to include in your components'
       * compiled output
       */
      types: resolveTypes(__dirname, ['./types']),
    });
  }

  build() {
    /**
     * replace the env's default TS task
     * (for compilation during build)
     */
    return super.build().replace([
      TypescriptTask.from({
        tsconfig: require.resolve('./config/tsconfig.json'),
        types: resolveTypes(__dirname, ['./types']),
      }),
    ]);
  }
}

export default new MyEnv();
Copied

The example above shows Typescript using the same config file for compilation during development and during build. Create an additional config file to set each with a different configuration.

Run the following to compile your env, after making changes to your env's Typescript configuration (if you're not already in watch mode, compile twice, once for the env and once again to compile your components using the envs new config):

$bit compile

Copied

Your env's Typescript config file extends Bit's default configuration, using Typescript's extends property. The configuration added to this file will override any conflicting configuration from the (default) extended config file.

For example, the following overrides the React env's default target property to es2019:

{
  "extends": "@teambit/react.react-env/config/tsconfig.json",
  "include": ["**/*", "**/*.json"],
  "compilerOptions": {
    "target": "es2019"
  }
}
Copied

The types directory includes the type declaration files that are copied into your components' build output.

Add d.ts files to support additional file types. For example, the following file adds type support for GraphQL files:

// @filename: my-env/types/graphql.d.ts

declare module '*.graphql' {
  import { DocumentNode } from 'graphql';
  const Schema: DocumentNode;
  export = Schema;
}

declare module '*.gql' {
  import { DocumentNode } from 'graphql';
  const Schema: DocumentNode;
  export = Schema;
}
Copied