Start sharing components as a team!Share components as a team!Join Bit to build your applications faster.Get Started Free

typescript

v3.1.17arrow_drop_down
v3.1.17
v3.1.16
v3.1.15
v3.1.14
v3.1.13
v3.1.12
v3.1.11
v3.1.10
v3.1.9
v3.1.8
v3.1.7
v3.1.6
v3.1.5
v3.1.4
v3.1.3
v3.1.2
v3.1.1
v3.1.0
v3.0.36
v3.0.35
v3.0.34
v3.0.33
v3.0.32
v3.0.31
v3.0.30
v3.0.29
v3.0.28
v3.0.27
v3.0.26
v3.0.25
v3.0.24
v3.0.23
v3.0.22
v3.0.21
v3.0.20
v3.0.19
v3.0.18
v3.0.17
v3.0.16
v3.0.15
v3.0.14
v3.0.13
v3.0.12
v3.0.11
v3.0.10
v3.0.9
v3.0.8
v3.0.7
v3.0.6
v3.0.5
v3.0.4
v3.0.3
v3.0.2
v3.0.1
v3.0.0
v0.0.10
v0.0.9
v0.0.8
v0.0.7
v0.0.6
v0.0.5
v0.0.4
v0.0.3
v0.0.2
v0.0.1
STATUS
Passing
DOWNLOADS
11,275
LICENSE
MIT
VISIBILITY
Public
PUBLISHED
A week ago
SIZE
N/A
Bit TypeScript compiler. Compiles a component for TypeScript.
5 contributors
Use typescript in your project ?
Copied
npm i @bit/bit.envs.compilers.typescript
Set Bit as a scoped registryLearn more
npm config set '@bit:registry' https://node.bit.dev
Component Example
React
React
Vue
Angular
React Native
Add dependency... help_outline
Just
import
any of the 1 million components
and packages in Bit or NPM to the example.
import Button from '@bit/grommet.grommet.button';
import Lodash from 'lodash';
toggle layout
modifieddraft
modifieddraft
 bit import bit.envs/compilers/typescript -c
modifieddraft
chevron_left
chevron_right

Typescript Compiler

A TypeScript component compiler for Bit. This compiler follows our best practices guide for compiling shared components.

How to use?

In order to run this extension your must have a bit workspace with at least one component defined, for more information on how to build please read the docs section on the bit website. TL;DR version:

Install the Typescript compiler

$ bit import -c bit.envs/compilers/typescript

Then, you can simply build the component using bit build

$ bit build

Features

  • Type checking - Uses the typescript compiler to perform type checking.

  • Compile components in isolation - Compiling shared components in true isolation is both challenging and important. It helps to find reusability issues quickly and early throughout the development process. It makes sure your components will compile identically anywhere and without side-effects. Read more about isolation here.

  • Styles and static file support - When developing a UI component it can include more then just Typescript code. You may have images, svg files, css etc. Transpiling shared components without bundling can get complicated in both build time and runtime.

    • Build time: TypeScript type checker tries to resolve those files, to get the types information and fails. We resolve this issue by automatically providing type definitions for common imported files.
    • Runtime: Import statements may be broken in the target code, because the file system structure changed. To resolve that we employ a copy policy which copies the assets to the appropriate location in the target directory.
  • Configuration - This compiler is configured according to best practices for shared components compiling learned from our experience. For general concepts on how to approach shared components compilation and testing, please see the main readme. Feel free to open an issue or submit a PR if you think something should be different or there is a bug in the implementation.

Configuration Reference

When first importing the compiler the bit entry in the package.json will look as following:

{
    "bit": {
        "env": {
            "compiler": "bit.envs/compilers/[email protected][version]"
        }
    }
}

This config state is as if you would configure the compiler as following by hand:

{
    "bit": {
        "env": {
            "compiler": {
                "bit.envs/compilers/[email protected][version]": {
                    "rawConfig: {
                        "tsconfig": {},
                        "development": false
                        "copyPolicy": {
                            "ignorePatterns": ["package.json", "package-lock.json"],
                            "disable": false
                        }
                    }
                }
            }
        }
    }
}
  • tsconfig - override tsconfig.json configuration.
  • development - enable or disable dev mode to include source maps and better debugging capabilities.
  • copyPolicy - manage the copy policy.
  • copyPolicy.ignorePatterns - Array of patterns to exclude files from being copied.
  • copyPolicy.disable - turn off the copy policy.

F.A.Q

What are my configuration ?

The default configuration without dev mode or overrides is here.

Whats to do component builds in workspace and doesn’t build in capsule?

Most odds you missing a dependency which influences the global scope like @types/node or @types/mocha. Use overrides to add it to the dependencies.

Missing types in consumer environment?

Some type dependency should be in th dependencies section and not in devDependencies. This is because your component exposes a type from that dependency. In order for the consumer environment to get access to that type, you must get when installing the component with NPM.

How to include custom-types folder from the author environment?

You have some custom-types folder which extend other types with your own type definition. You want to reuse it in capsule. Do the following:

  • create a component from the types.
  • add it in overrides to all other components.
  • include it in tsconfig.include as following:
"bit.envs/compilers/typescript": {
    "rawConfig": {
        "tsconfig": {
            "compilerOptions": {},
            "include": [
                 "./**/*",
                 "node_modules/@bit/org.collection.custom-types"
            ]
        }
    }
}

Writing node only components and getting unknown identifer exception.

Add the flowing configuration override in the bit.json

"bit.envs/compilers/typescript": {
    "rawConfig": {
        "tsconfig": {
            "compilerOptions": {
                "target": "ES5",
                "module": "CommonJS"
            }
        }
    }
}