# Setup a polyrepo

Execute the following steps to setup TypeScript for a polyrepo solution (single project per repository).

Open a terminal at the root of the solution and install the following packages:

pnpm add -D @workleap/typescript-configs typescript

yarn add -D @workleap/typescript-configs typescript

npm install -D @workleap/typescript-configs typescript

First, create a configuration file named tsconfig.json at the root of the solution:

root
├── src
├──── ...
├── package.json
├── tsconfig.json

Then, open the newly created file and extend the default configuration with one of the shared configurations provided by @workleap/typescript-configs 👇

For an applications developed with React, use the following configuration:

{
    "extends": ["@workleap/typescript-configs/web-application.json"],
    "exclude": ["dist", "node_modules"]
}

If your application is using Storybook, make sure to include the .storybook folder:

{
    "extends": ["@workleap/typescript-configs/web-application.json"],
    "include": ["**/*", ".storybook/*"],
    "exclude": ["dist", "node_modules"]
}

For a library project developed with or without React, use the following configuration:

{
    "extends": ["@workleap/typescript-configs/library.json"],
    "exclude": ["dist", "node_modules"]
}

If your application is using Storybook, make sure to include the .storybook folder and exclude the .storybook/storybook-static folder:

{
    "extends": ["@workleap/typescript-configs/library.json"],
    "include": ["**/*", ".storybook/*"],
    "exclude": ["dist", "node_modules", ".storybook/storybook-static"]
}

At times, especially when running the CI build, it's useful to lint the entire solution using a single command. To do so, add the following script to your solution's package.json file:

{
    "lint:types": "tsc"
}

New projects shouldn't have to customize the default configurations offered by @workleap/typescript-configs. However, if you are in the process of migrating an existing project to use this library or encountering a challenging situation, refer to the custom configuration page to understand how to override or extend the default configurations. Remember, no locked in ❤️✌️.

To test your new TypeScript setup, open a TypeScript file, type invalid code (e.g. import { App } from "./App"), then wait for the IDE to flag the error. Fix the error (e.g. import { App } from "./App.tsx"), then wait for the IDE to remove the error.