TypeScript & Quality

TypeScript & Quality

This project prioritizes TypeScript for robust and maintainable code across the monorepo. We enforce strict type checking and leverage modern TypeScript features.

Core Principles

As outlined in our Global Rules, we follow these key principles:

  • TypeScript First: All code should be written in TypeScript with proper typing. The any type is strongly discouraged; use unknown or specific types instead.
  • Strict Mode: We enable strict: true in our configurations to catch potential errors early.
  • Modern Features: We target es2022 and utilize modern JavaScript features enabled by TypeScript.
  • Modular Code: Type safety supports our goal of creating small, well-defined modules.

Web Application Configuration (apps/web/tsconfig.json)

The web application utilizes a specific tsconfig.json tailored for its Vite and React Router setup. While we maintain shared base configurations in @repo/typescript-config, the apps/web/tsconfig.json currently defines its settings directly.

Key settings include:

{ "compilerOptions": { // Target modern JavaScript (ES2022) but ensure DOM types are available "target": "es2022", "lib": ["es2022", "dom", "dom.iterable"], // Enable strict type checking "strict": true, // Configure module resolution for modern bundlers (like Vite) "module": "preserve", "moduleResolution": "bundler", // Assumed based on 'preserve' and Vite context "esModuleInterop": true, "allowSyntheticDefaultImports": true, "verbatimModuleSyntax": true, // Preferred over isolatedModules in newer TS // Support JSX syntax for React "jsx": "react-jsx", // Allow importing JSON files "resolveJsonModule": true, // Path alias for cleaner imports "baseUrl": ".", "paths": { "~/*": ["./app/*"] }, // Include necessary types for the environment "types": ["node", "vite/client", "react"], // Important checks "noFallthroughCasesInSwitch": true, "noImplicitOverride": true, "forceConsistentCasingInFileNames": true, // Standard practice, implicitly enabled by strict // Skip checking library files for faster type checking "skipLibCheck": true, // Do not emit compiled JS files (Vite handles transpilation) "noEmit": true }, "include": [ // Include all necessary source files and generated types "**/*", "**/.server/**/*", "**/.client/**/*", ".react-router/types/**/*" ], "exclude": ["node_modules", "dist", "build"] }

(Note: Some settings like moduleResolution might be inferred by the build tool based on the module setting.)

Shared Configurations (@repo/typescript-config)

The packages/typescript-config directory contains base configurations intended for reuse across different parts of the monorepo (e.g., Node.js libraries, React Native). While the web app currently doesn't directly extend these, they serve as a guideline and are used by other packages.

Key shared configurations:

  • base.json: The foundation with common strict settings.
  • react-router-app.json: A configuration specifically tailored for React Router web apps (intended for use by apps/web).
  • node.json: Configuration for Node.js environments.
  • react-library.json: For shared React component libraries.
  • react-native-library.json: For React Native specific code.

Projects typically extend these shared configurations in their own tsconfig.json like so:

// Example tsconfig.json in another package { "extends": "@repo/typescript-config/base.json", // or another specific config "compilerOptions": { // Package-specific overrides "outDir": "./dist" }, "include": ["src/**/*"], "exclude": ["node_modules", "dist"] }

Type Safety Practices

  • Avoid any: Use specific types or unknown with type guards.
  • Utility Types: Leverage built-in utility types (Partial, Readonly, Pick, etc.).
  • Type Guards: Use functions that return type predicates (value is MyType) for narrowing types.
  • Interfaces vs. Types: Use interface for defining shapes of objects or classes, and type for aliases, unions, intersections, etc.

By adhering to these configurations and practices, we aim for a high level of code quality and developer productivity throughout the project.