typescript

TypeScript Development Guide

This skill provides mandatory specifications for writing TypeScript in this project to ensure consistency, type safety, and code cleanliness.

1. Naming Conventions

1.1 Variables and Functions

• Variables: Use snake_case (e.g., theme_value, is_dev).
• Functions: Use camelCase (e.g., getAntdTheme, setGlobalAnimation).
• Internal Props Objects: Use props_* prefix (e.g., props_side_bar).

1.2 Classes and Types

• Classes: Use PascalCase (e.g., GlobalModel, Settings).
• Interfaces/Types: Use PascalCase. Interfaces preferably start with I (e.g., IProps, IPropsSidebar).
• Enum-like Types: Use literal union types instead of enum where possible (e.g., type Theme = 'light' | 'dark' | 'system').

2. Type Definitions

2.1 File Organization

• Global Types: Place in packages/app/types/ or packages/app/typings/.
• Local Types: Use types.ts file in the component or module directory.
• Props: Define an IProps interface for each component, typically in the component file or adjacent types.ts.

2.2 Best Practices

• Explicit Types: Prefer providing explicit type annotations for function parameters and complex return value types.
• Utility Types: Leverage TypeScript's utility types (Pick, Omit, Partial, Exclude) to reuse existing definitions.
• Strict Types: Avoid any. If the type is truly unknown, use unknown and perform type casting (cast) when necessary.
• Type Alias vs. Interface: Use interface for object structures (especially props), use type for unions, intersections, or base types.

3. Code Style

3.1 Imports and Exports

• Named Exports: Utility functions and models prefer named exports.
• Default Exports: For the main component or main class in a file, use default export.
• Pure Type Imports: Use import type for importing types to maintain clear process boundaries and reduce bundle size.
• Path Aliases: Use @/ to reference the src directory (e.g., import { Settings } from '@/models').