TypeScript Configuration
Relevant source files
The following files were used as context for generating this wiki page:
The TypeScript configuration in the RemyMan (Kilo Man) project establishes the foundational rules for static typing, module resolution, and compilation targets. It ensures type safety across the game's core systems, including the HTML5 Canvas rendering engine, physics calculations, and React component tree.
The configuration is designed to work seamlessly with the Next.js framework, utilizing modern ECMAScript features while enforcing strict type-checking to prevent runtime errors in the platformer's complex state management.
Sources: tsconfig.json:1-32, architecture_plan.md:4-15
Compiler Options and Environment
The project targets ES2017, providing a balance between modern JavaScript features and broad compatibility. The environment includes libraries for the DOM and asynchronous iterables, which are essential for the game's loop and event handling.
Core Compiler Settings
The configuration prioritizes a strict development environment to catch potential issues early. Key settings include:
| Option | Value | Description |
|---|---|---|
target | ES2017 | Sets the JavaScript language version for emitted JavaScript. |
lib | dom, dom.iterable, esnext | Includes type definitions for the browser environment and modern ES features. |
strict | true | Enables all strict type-checking options. |
moduleResolution | bundler | Optimized for modern bundlers like the one used by Next.js. |
jsx | preserve | Keeps JSX as part of the output, allowing Next.js to handle transformations. |
Sources: tsconfig.json:2-16
Module and Path Resolution
The project uses a path alias @/* mapping to the root directory, simplifying imports across the deep directory structure of the app/ and components/ folders.
Sources: tsconfig.json:23-27
The diagram shows how the TypeScript configuration maps the root directory to an alias, facilitating easier access to the game components.
Sources: tsconfig.json:23-27, architecture_plan.md:14-22
Game Engine Type Definitions
The TypeScript configuration supports a robust set of interfaces and types that define the game's entities, physics, and state. These types are centralized in app/components/Game/types.ts and consumed by the GameCanvas and levelData modules.
Entity and State Interfaces
The project defines specific interfaces for different game actors, ensuring that the physics engine interacts correctly with player and monster objects.
| Interface | Key Properties | Purpose |
|---|---|---|
LevelEntity | id, x, y, w, h, type | Defines static and interactive objects in the level. |
PlayerState | vx, vy, isGrounded, facing, frame | Tracks dynamic physical properties and animation state of the player. |
MonsterState | vx, patrolStart, patrolEnd, speed | Manages AI movement boundaries for NPCs. |
GameConfig | gravity, friction, moveSpeed, maxSpeed | Standardizes physics constants across the engine. |
Sources: app/components/Game/types.ts:3-56
Type Relationships
The following diagram illustrates how different types are related within the game's architecture:
The class diagram represents the structural definitions used to maintain type safety during game loop execution and collision detection.
Sources: app/components/Game/types.ts:3-56, app/components/Game/GameCanvas.tsx:37-70
Project Integration and Tooling
TypeScript is integrated into the broader project ecosystem via package.json scripts and Next.js specific plugins.
Dependencies
The project relies on several type definition packages to provide autocomplete and validation for React and Node.js environments:
@types/node: Types for Node.js runtime environments.@types/react: Types for React 18/19 components and hooks.@types/react-dom: Types for DOM-specific React methods.typescript: The core compiler (v5+).
Sources: package.json:17-25
Build and Linting
The TypeScript configuration is utilized by the Next.js build pipeline and ESLint for code quality enforcement.
The flow shows how the configuration file guides the transformation of TypeScript source files into executable JavaScript during the build process.
Sources: package.json:7-10, tsconfig.json:18-21
Conclusion
The TypeScript configuration in RemyMan provides the necessary strictness and structure required for a real-time game environment. By defining clear interfaces for entities and physics, it enables the development of complex platformer mechanics with a high degree of confidence in code reliability.