TypeScript Config

TypeScript Config Package (`@repo/typescript-config`)

This package provides shared TypeScript configurations (tsconfig.json files) used throughout the monorepo. It ensures consistency in TypeScript settings across different types of packages (React apps, Node libraries, React Native, etc.).

Why You Need This

Keeping TypeScript configs in sync avoids subtle build issues and reduces boilerplate when creating new packages. For an overview of the project layout read Monorepo Foundations.

Purpose

Maintaining separate tsconfig.json files in each package can lead to duplication and inconsistencies. This package centralizes common configurations, allowing individual packages to simply extend a base configuration and override specific settings if necessary.

Available Configurations

The package provides several pre-defined tsconfig.json files tailored for common use cases within the monorepo:

base.json: The foundational configuration with strict settings, module resolution (bundler), target (es2022), and common library definitions (dom, es2022). Most other configs extend this.
node.json: Extends base.json. Suitable for Node.js libraries or server-side code (e.g., the API package). Sets module to NodeNext.
react-library.json: Extends base.json. Suitable for React component libraries. Includes jsx: "react-jsx".
react-router-app.json: Extends react-library.json. Tailored for the Vite + React Router web application. Includes specific paths for aliases and potentially other Vite-related settings.
react-native-library.json: Extends base.json. Configured for React Native libraries/apps, likely setting jsx: "react-native" and including relevant React Native types.

Usage

In the tsconfig.json file of any package within the monorepo, use the extends property to inherit from one of the configurations provided by this package.

Example: `tsconfig.json` for a React Library

{
  "extends": "@repo/typescript-config/react-library.json",
  "compilerOptions": {
    "outDir": "dist", // Specify output directory for this package
    "rootDir": "src"
    // Add any specific overrides for this library
  },
  "include": ["src"],
  "exclude": ["node_modules", "dist"]
}

Example: `tsconfig.json` for the Web App

{
  "extends": "@repo/typescript-config/react-router-app.json",
  "compilerOptions": {
    // Web-app specific overrides or additions
    "baseUrl": ".",
    "paths": {
      "@/*": ["./app/*"]
    }
  },
  "include": [
    ".react-router/**/*",
    "app/**/*",
    "vite.config.ts"
    // ... other includes specific to the web app
  ],
  "exclude": ["node_modules", "dist", "build"]
}

Modifying Configurations

Base Settings: Changes impacting most packages should be made carefully in base.json.
Specific Use Cases: Modify the relevant config file (e.g., node.json, react-router-app.json) for settings specific to that environment.
Package Overrides: For settings unique to a single package, override them directly in that package's tsconfig.json within the compilerOptions object.