TypeScript Configuration
Relevant source files
The following files were used as context for generating this wiki page:
The TypeScript configuration for the Wasalny landing page project is designed to provide a robust, type-safe environment for a modern React 19 and Vite-based application. It employs a modular architecture using Project References to separate the concerns of the application code from the build tool configuration.
The configuration enforces strict type-checking and modern ECMAScript standards (ES2022/ES2023) to ensure high code quality and compatibility with contemporary browser environments. It also integrates path aliases to simplify imports across the project structure.
Sources: tsconfig.json, tsconfig.app.json, AGENTS.md:38-40
Configuration Architecture
The project utilizes a base tsconfig.json that acts as an entry point, delegating specific configurations to specialized files via the references property. This structure allows the TypeScript compiler (tsc) to handle the application logic and the build tool configuration (Vite) independently.
This diagram illustrates the hierarchical relationship between the root configuration and its referenced sub-configurations.
Sources: tsconfig.json:3-6, tsconfig.app.json:36, tsconfig.node.json:25
Core Configuration Files
Root Configuration (tsconfig.json)
The root file serves purely as a coordinator. It contains an empty files array, indicating it does not compile files itself, but instead relies on the defined references.
Sources: tsconfig.json:1-7
Application Configuration (tsconfig.app.json)
This file governs the compilation of the main React application located in the src directory. It targets ES2022 and uses react-jsx for JSX transformation.
| Category | Option | Value | Description |
|---|---|---|---|
| Compilation | target | ES2022 | Modern JS output target |
| Compilation | lib | ["ES2022", "DOM", "DOM.Iterable"] | Included library APIs |
| Module System | module | ESNext | Modern ESM module output |
| Module System | moduleResolution | bundler | Optimized for Vite/Bundlers |
| Strictness | strict | true | Enables all strict type-checking |
| Strictness | noUnusedLocals | true | Error on unused local variables |
Sources: tsconfig.app.json:4-10, tsconfig.app.json:13-20, tsconfig.app.json:23-24
Node/Tooling Configuration (tsconfig.node.json)
Dedicated to the environment where Vite runs. It targets ES2023 and includes the node types to support build-time scripts like vite.config.ts.
Sources: tsconfig.node.json:4-8, tsconfig.node.json:25
Path Aliases and Module Resolution
The project uses path aliases to avoid deeply nested relative imports (e.g., ../../../). These aliases are defined in the TypeScript configuration and must be mirrored in the Vite configuration to ensure both the compiler and the bundler can resolve files correctly.
The relationship between TypeScript aliases and Vite resolution.
Sources: tsconfig.app.json:31-34, vite.config.ts:10-14
Defined Aliases
| Alias | Target Path | Usage Example |
|---|---|---|
@/* | src/* | import { cn } from '@/lib/utils' |
@assets/* | assets/* | import logo from '@assets/logo.svg' |
Sources: tsconfig.app.json:32-33, AGENTS.md:49-55
TypeScript Integration in Build Pipeline
TypeScript is integrated into the project's development and build lifecycle via NPM scripts and ESLint.
The build process ensures type safety before bundling begins.
Sources: package.json:7, AGENTS.md:14-16
Linting and Type Safety
The project uses typescript-eslint to enforce coding standards. The eslint.config.js file extends the recommended TypeScript rules and identifies files ending in .ts and .tsx for analysis.
Sources: eslint.config.js:10-15, package.json:35
Project Strictness and Guidelines
As per the project's technical documentation, the following TypeScript constraints are enforced:
- Strict Mode: Enabled by default in
tsconfig.app.json. - No Implicit Any: Part of the strict suite, requiring explicit types.
- Interfaces over Types: Preferred for object shapes.
- Union Types: Used for constrained values (e.g., car categories).
- Explicit Ref Typing: React refs must be typed, such as
useRef<HTMLElement>(null).
Sources: tsconfig.app.json:23, AGENTS.md:59-71, AGENTS.md:80-82
Summary
The TypeScript configuration in Wasalny Landing Page is a structured implementation of modern best practices. By utilizing Project References (tsconfig.app.json and tsconfig.node.json), it ensures that the application code and the build tooling are treated with appropriate, context-specific settings while maintaining a unified type-checking process during the build phase.