TypeScript Configuration
Relevant source files
The following files were used as context for generating this wiki page:
The TypeScript configuration in the CoolTools project establishes the foundational rules for static type checking, module resolution, and compilation across the Next.js application. It ensures a strict development environment while enabling modern JavaScript features and deep integration with the Next.js framework.
This configuration works in tandem with the build system to manage dependencies, path aliasing, and the interoperability of various modules such as the Data Access Layer and UI components.
Core Compiler Options
The project utilizes tsconfig.json to define the behavior of the TypeScript compiler (tsc). The configuration targets ES2017, providing a balance between modern syntax support and compatibility.
Compilation and Module Behavior
The environment is configured to skip library type checking (skipLibCheck: true) to improve compilation speed and uses esModuleInterop to allow for seamless imports between CommonJS and ES Modules. The project explicitly sets noEmit: true, as the actual transpilation is handled by Next.js and its underlying build tools rather than the standalone TypeScript compiler.
Sources: cooltools/tsconfig.json:3-10
| Option | Value | Description |
|---|---|---|
target | ES2017 | Sets the JavaScript language version for emitted JavaScript. |
module | esnext | Specifies the module code generation style. |
moduleResolution | bundler | Uses a strategy optimized for modern bundlers like Turbopack. |
jsx | preserve | Keeps JSX as part of the output, letting Next.js handle transformation. |
strict | true | Enables all strict type-checking options. |
Sources: cooltools/tsconfig.json:3-15
Path Mapping
To simplify imports and avoid complex relative paths (e.g., ../../../lib/utils), the configuration defines a global alias. The @/* pattern is mapped to the root directory ./*, allowing developers to import modules from a consistent base.
Sources: cooltools/tsconfig.json:21-23, cooltools/app/page.tsx:6
Build System Integration
The TypeScript environment is tightly integrated with the Next.js framework and the Turbopack bundler. This is reflected in both the configuration files and the package management scripts.
The diagram shows how the TypeScript configuration feeds into the Next.js plugin system and the Turbopack-driven build process.
Configuration Plugins and Includes
The project uses a specific plugin for Next.js and includes environment-specific type definitions such as next-env.d.ts and generated types located in .next/types/**/*.ts.
Sources: cooltools/tsconfig.json:16-20, cooltools/tsconfig.json:26
Project Dependencies
The development environment relies on several type definition packages to support external libraries and Node.js environments:
typescript: ^5@types/node: ^20@types/react: ^19@types/react-dom: ^19@types/pg: ^8.15.5
Sources: cooltools/package.json:21-39
Data Access and API Types
TypeScript is used extensively to define the shape of data flowing from external APIs and internal databases. This ensures type safety when handling complex phone specifications and comparison logic.
API Interfacing
The file cooltools/lib/phoneApi.ts defines comprehensive interfaces for phone data, including nested objects for display, platform, memory, and battery specifications.
export interface PhoneSpec {
phone_name: string;
brand: string;
display?: {
size?: string;
resolution?: string;
type?: string;
};
// ... additional fields
}
Sources: cooltools/lib/phoneApi.ts:24-81
Database Schema Types
The project uses Drizzle ORM to define the database schema in TypeScript, which provides end-to-end type safety from the database to the UI. The phones table schema includes specific types for various phone attributes like real for display size and jsonb for full specification objects.
Sources: cooltools/shared/schema.ts:4-72
Component Type Safety
Next.js App Router features, such as layout.tsx and dynamic routes, utilize TypeScript's Metadata and Props types to enforce correct usage of framework APIs.
Layout and Metadata
Root layouts utilize the Metadata type from next to define SEO and page title information, while ensuring that the children prop is correctly typed as React.ReactNode.
Sources: cooltools/app/layout.tsx:1-20
Dynamic Routing
Dynamic route pages, such as those for individual phones, use TypeScript to type-check URL parameters (slugs) and ensure that navigation logic remains robust.
Sources: cooltools/app/phones/[slug]/page.tsx:11-15
Summary
The TypeScript Configuration in CoolTools provides a strict, typed foundation for a Next.js 15+ application. By leveraging a centralized tsconfig.json with path aliasing, comprehensive interfaces for API data in phoneApi.ts, and schema-driven types in shared/schema.ts, the project maintains high code quality and developer productivity. The integration with Turbopack and the inclusion of specific Next.js plugins ensure that the type system evolves alongside the framework's features.
Sources: cooltools/tsconfig.json, cooltools/package.json, cooltools/next.config.ts