> For AI agents: the complete documentation index is available at https://mfeflow.github.io/mfeflow/llms.txt, the full documentation bundle is available at https://mfeflow.github.io/mfeflow/llms-full.txt.

# tsconfig

Every app in a micro-frontend platform should be held to the same TypeScript rules, and changing a rule should be a one-line edit rather than a change in a dozen files. This feature makes every app extend one shared set of presets.

## What you get

Each app gets a small `tsconfig.json` that extends a preset from `@mfeflow/tsconfig`, and a `typecheck` script. The presets turn on the strict checks that catch real bugs, such as unchecked array access and optional properties that are really undefined.

## It is already there

You do not add this one. It is part of every project, so `mfeflow init` applies it and it is not offered as a choice. Features such as [lint-oxlint](https://mfeflow.github.io/mfeflow/features/lint-oxlint.md) and [http](https://mfeflow.github.io/mfeflow/features/http.md) list it as a requirement.

What it wrote:

```text
tsconfig.json               # project root, for scripts and end-to-end tests
apps/
├── shell/tsconfig.json     # extends a preset
└── <remote>/tsconfig.json  # extends a preset
```

Dev dependencies and scripts:

```text
@mfeflow/tsconfig   # the presets
typescript 7.0.2    # the compiler
typecheck           # a script in each app and one at the root
```

## Use it

An app's file extends the preset and lists what to check.

```json title="apps/cart/tsconfig.json"
{
  "extends": "@mfeflow/tsconfig/react-app.json",
  "compilerOptions": { "types": ["node"] },
  "include": ["src", "rsbuild.config.ts", "env.ts", "vitest.config.ts"]
}
```

The root file uses the Node preset.

```json title="tsconfig.json"
{
  "extends": "@mfeflow/tsconfig/node.json",
  "include": ["*.ts", "scripts", "e2e"]
}
```

Run the checks from the root. Each app runs `tsc --noEmit`, and the root script fans out through Turborepo.

```sh
pnpm typecheck
```

## Configure it

There are no install options. You choose a preset, and you override single compiler options in the app's own file.

| Preset               | Extends | Adds                                                                      |
| -------------------- | ------- | ------------------------------------------------------------------------- |
| `base.json`          | none    | The strict settings below                                                 |
| `react-app.json`     | base    | DOM libs, `jsx: react-jsx`, `noEmit`                                      |
| `react-library.json` | base    | DOM libs, `jsx: react-jsx`, declaration files with `isolatedDeclarations` |
| `node.json`          | base    | Node types, `noEmit`                                                      |

Generated apps use `react-app.json` and the root uses `node.json`. The library preset is there for packages you publish.

## How it works

The base preset targets ES2022 with bundler module resolution, and turns on these checks beyond `strict`:

```json title="@mfeflow/tsconfig/base.json"
"strict": true,
"noUncheckedIndexedAccess": true,
"exactOptionalPropertyTypes": true,
"noImplicitOverride": true,
"noFallthroughCasesInSwitch": true,
"verbatimModuleSyntax": true,
"isolatedModules": true
```

Rsbuild does the building, so TypeScript only checks, which is why the app presets are `noEmit`. The package needs TypeScript 7 or newer as a peer dependency.

## Gotchas

| Option                       | What you hit                                            | Fix                                     |
| ---------------------------- | ------------------------------------------------------- | --------------------------------------- |
| `noUncheckedIndexedAccess`   | `items[0]` may be undefined                             | Check it, or destructure with a default |
| `exactOptionalPropertyTypes` | Passing `undefined` to an optional property is rejected | Leave the key out instead               |
| `verbatimModuleSyntax`       | Type-only imports must use `import type`                | Write `import type`                     |

Add a new file or folder to `include` in the app's `tsconfig.json`, or the check will not see it.

## Reference

- [lint-oxlint](https://mfeflow.github.io/mfeflow/features/lint-oxlint.md), which reads the same TypeScript setup
- [Project structure](https://mfeflow.github.io/mfeflow/guide/project-structure.md)
- [Upgrading](https://mfeflow.github.io/mfeflow/guide/upgrading.md)
- [feature.json reference](https://mfeflow.github.io/mfeflow/reference/feature-json.md)