claude-flow-novice 1.0.0

package/wiki/languages/typescript/frameworks.md

@@ -0,0 +1,970 @@
+# TypeScript Framework Integration with Claude Flow
+
+Comprehensive guide to integrating TypeScript with popular frameworks using intelligent agent coordination. Learn framework-specific patterns, type-safe implementations, and agent workflows for React, Node.js, NestJS, and more.
+
+## 🚀 React TypeScript Integration
+
+### React Component Development with Agents
+```typescript
+// Type-safe React component patterns
+interface UserCardProps {
+  user: User;
+  onEdit?: (user: User) => void;
+  onDelete?: (userId: string) => Promise<void>;
+  variant?: 'compact' | 'detailed' | 'minimal';
+  className?: string;
+}
+
+// Functional component with strict typing
+const UserCard: React.FC<UserCardProps> = ({
+  user,
+  onEdit,
+  onDelete,
+  variant = 'compact',
+  className
+}) => {
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleDelete = useCallback(async () => {
+    if (!onDelete) return;
+
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      await onDelete(user.id);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Unknown error');
+    } finally {
+      setIsLoading(false);
+    }
+  }, [onDelete, user.id]);
+
+  // Component implementation...
+};
+
+// Agent workflow for React components
+Task("Component Architect", "Design React component interfaces and prop types", "coder")
+Task("Hook Developer", "Create custom hooks with comprehensive typing", "coder")
+Task("State Manager", "Implement type-safe state management patterns", "code-analyzer")
+Task("Event Handler Creator", "Generate type-safe event handlers", "reviewer")
+```
+
+### React Hooks with TypeScript
+```typescript
+// Custom hook with generic types
+function useAsyncData<T, E = Error>(
+  asyncFunction: () => Promise<T>,
+  dependencies: React.DependencyList = []
+): {
+  data: T | null;
+  loading: boolean;
+  error: E | null;
+  retry: () => void;
+} {
+  const [data, setData] = useState<T | null>(null);
+  const [loading, setLoading] = useState<boolean>(true);
+  const [error, setError] = useState<E | null>(null);
+
+  const fetchData = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+
+    try {
+      const result = await asyncFunction();
+      setData(result);
+    } catch (err) {
+      setError(err as E);
+    } finally {
+      setLoading(false);
+    }
+  }, dependencies);
+
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  return { data, loading, error, retry: fetchData };
+}
+
+// Form handling with type safety
+interface FormState<T> {
+  values: T;
+  errors: Partial<Record<keyof T, string>>;
+  touched: Partial<Record<keyof T, boolean>>;
+  isValid: boolean;
+  isSubmitting: boolean;
+}
+
+function useForm<T extends Record<string, any>>(
+  initialValues: T,
+  validationSchema: ValidationSchema<T>
+): FormState<T> & {
+  handleChange: (field: keyof T) => (value: T[keyof T]) => void;
+  handleSubmit: (onSubmit: (values: T) => Promise<void>) => Promise<void>;
+  reset: () => void;
+} {
+  // Hook implementation with full type safety
+}
+
+// Agent workflow for React hooks
+Task("Hook Designer", "Create reusable hooks with comprehensive typing", "coder")
+Task("Generic Hook Developer", "Implement generic hooks for common patterns", "code-analyzer")
+Task("Hook Optimization Specialist", "Optimize hook performance and dependencies", "performance-benchmarker")
+```
+
+### React Context and State Management
+```typescript
+// Type-safe context patterns
+interface AppState {
+  user: User | null;
+  theme: 'light' | 'dark';
+  notifications: Notification[];
+  preferences: UserPreferences;
+}
+
+interface AppActions {
+  setUser: (user: User | null) => void;
+  setTheme: (theme: 'light' | 'dark') => void;
+  addNotification: (notification: Notification) => void;
+  removeNotification: (id: string) => void;
+  updatePreferences: (preferences: Partial<UserPreferences>) => void;
+}
+
+// Context creation with type safety
+const AppStateContext = createContext<AppState | null>(null);
+const AppActionsContext = createContext<AppActions | null>(null);
+
+// Custom hooks for context consumption
+function useAppState(): AppState {
+  const context = useContext(AppStateContext);
+  if (!context) {
+    throw new Error('useAppState must be used within AppStateProvider');
+  }
+  return context;
+}
+
+function useAppActions(): AppActions {
+  const context = useContext(AppActionsContext);
+  if (!context) {
+    throw new Error('useAppActions must be used within AppStateProvider');
+  }
+  return context;
+}
+
+// Redux Toolkit with TypeScript
+interface UserSliceState {
+  users: User[];
+  currentUser: User | null;
+  loading: boolean;
+  error: string | null;
+}
+
+const userSlice = createSlice({
+  name: 'user',
+  initialState: {
+    users: [],
+    currentUser: null,
+    loading: false,
+    error: null,
+  } as UserSliceState,
+  reducers: {
+    setUsers: (state, action: PayloadAction<User[]>) => {
+      state.users = action.payload;
+    },
+    setCurrentUser: (state, action: PayloadAction<User | null>) => {
+      state.currentUser = action.payload;
+    },
+    setLoading: (state, action: PayloadAction<boolean>) => {
+      state.loading = action.payload;
+    },
+    setError: (state, action: PayloadAction<string | null>) => {
+      state.error = action.payload;
+    },
+  },
+});
+
+// Agent workflow for state management
+Task("State Architecture Designer", "Design global state structure with types", "system-architect")
+Task("Context Provider Developer", "Implement type-safe context providers", "coder")
+Task("Redux Integration Specialist", "Setup Redux with comprehensive typing", "backend-dev")
+Task("State Selector Creator", "Create type-safe state selectors", "code-analyzer")
+```
+
+## 🔧 Node.js and Express TypeScript
+
+### Express API with TypeScript
+```typescript
+// Type-safe Express setup
+interface TypedRequest<T = any> extends Request {
+  body: T;
+}
+
+interface TypedResponse<T = any> extends Response {
+  json: (body: T) => TypedResponse<T>;
+}
+
+// Request/Response types
+interface CreateUserRequest {
+  email: string;
+  password: string;
+  profile: {
+    firstName: string;
+    lastName: string;
+  };
+}
+
+interface CreateUserResponse {
+  success: boolean;
+  data?: User;
+  error?: string;
+}
+
+// Type-safe route handlers
+type RouteHandler<ReqBody = any, ResBody = any> = (
+  req: TypedRequest<ReqBody>,
+  res: TypedResponse<ResBody>,
+  next: NextFunction
+) => Promise<void> | void;
+
+const createUser: RouteHandler<CreateUserRequest, CreateUserResponse> = async (
+  req,
+  res,
+  next
+) => {
+  try {
+    const validationResult = CreateUserRequestSchema.safeParse(req.body);
+
+    if (!validationResult.success) {
+      res.status(400).json({
+        success: false,
+        error: 'Invalid request data',
+      });
+      return;
+    }
+
+    const user = await userService.createUser(validationResult.data);
+
+    res.status(201).json({
+      success: true,
+      data: user,
+    });
+  } catch (error) {
+    next(error);
+  }
+};
+
+// Middleware with types
+interface AuthenticatedRequest extends Request {
+  user: User;
+}
+
+const authenticateUser = async (
+  req: Request,
+  res: Response,
+  next: NextFunction
+): Promise<void> => {
+  try {
+    const token = req.headers.authorization?.replace('Bearer ', '');
+
+    if (!token) {
+      res.status(401).json({ error: 'No token provided' });
+      return;
+    }
+
+    const user = await authService.validateToken(token);
+    (req as AuthenticatedRequest).user = user;
+    next();
+  } catch (error) {
+    res.status(401).json({ error: 'Invalid token' });
+  }
+};
+
+// Agent workflow for Express APIs
+Task("API Route Designer", "Design type-safe Express routes and handlers", "backend-dev")
+Task("Middleware Developer", "Create type-safe middleware functions", "coder")
+Task("Validation Manager", "Implement request/response validation", "reviewer")
+Task("Error Handler Specialist", "Design comprehensive error handling", "code-analyzer")
+```
+
+### Database Integration with TypeORM
+```typescript
+// TypeORM entities with validation
+@Entity('users')
+export class UserEntity {
+  @PrimaryGeneratedColumn('uuid')
+  id!: string;
+
+  @Column({ unique: true })
+  @IsEmail()
+  email!: string;
+
+  @Column()
+  @MinLength(8)
+  passwordHash!: string;
+
+  @Column('jsonb')
+  @ValidateNested()
+  @Type(() => UserProfile)
+  profile!: UserProfile;
+
+  @CreateDateColumn()
+  createdAt!: Date;
+
+  @UpdateDateColumn()
+  updatedAt!: Date;
+
+  @DeleteDateColumn()
+  deletedAt?: Date;
+
+  // Relations with type safety
+  @OneToMany(() => PostEntity, post => post.author)
+  posts!: PostEntity[];
+
+  @ManyToMany(() => RoleEntity, role => role.users)
+  @JoinTable()
+  roles!: RoleEntity[];
+}
+
+// Type-safe repository patterns
+interface UserRepository {
+  findById(id: string): Promise<UserEntity | null>;
+  findByEmail(email: string): Promise<UserEntity | null>;
+  create(data: CreateUserData): Promise<UserEntity>;
+  update(id: string, data: Partial<UpdateUserData>): Promise<UserEntity>;
+  delete(id: string): Promise<void>;
+  findWithPosts(id: string): Promise<UserEntity | null>;
+}
+
+class TypeORMUserRepository implements UserRepository {
+  constructor(
+    @InjectRepository(UserEntity)
+    private readonly repository: Repository<UserEntity>
+  ) {}
+
+  async findById(id: string): Promise<UserEntity | null> {
+    return this.repository.findOne({ where: { id } });
+  }
+
+  async findByEmail(email: string): Promise<UserEntity | null> {
+    return this.repository.findOne({ where: { email } });
+  }
+
+  async create(data: CreateUserData): Promise<UserEntity> {
+    const user = this.repository.create(data);
+    return this.repository.save(user);
+  }
+
+  async findWithPosts(id: string): Promise<UserEntity | null> {
+    return this.repository.findOne({
+      where: { id },
+      relations: ['posts'],
+    });
+  }
+}
+
+// Agent workflow for database integration
+Task("Entity Designer", "Design TypeORM entities with validation", "backend-dev")
+Task("Repository Implementer", "Create type-safe repository patterns", "coder")
+Task("Migration Generator", "Generate database migrations from entities", "code-analyzer")
+Task("Query Optimizer", "Optimize database queries with type safety", "performance-benchmarker")
+```
+
+## 🏢 NestJS Enterprise Framework
+
+### NestJS Controllers and Services
+```typescript
+// Type-safe NestJS controller
+@Controller('users')
+@ApiTags('users')
+export class UserController {
+  constructor(private readonly userService: UserService) {}
+
+  @Post()
+  @ApiOperation({ summary: 'Create a new user' })
+  @ApiResponse({ status: 201, description: 'User created successfully', type: UserDto })
+  @ApiResponse({ status: 400, description: 'Bad request' })
+  async createUser(
+    @Body() createUserDto: CreateUserDto
+  ): Promise<UserDto> {
+    return this.userService.createUser(createUserDto);
+  }
+
+  @Get(':id')
+  @ApiOperation({ summary: 'Get user by ID' })
+  @ApiParam({ name: 'id', description: 'User ID' })
+  @ApiResponse({ status: 200, description: 'User found', type: UserDto })
+  @ApiResponse({ status: 404, description: 'User not found' })
+  async getUser(
+    @Param('id', ParseUUIDPipe) id: string
+  ): Promise<UserDto> {
+    const user = await this.userService.findById(id);
+    if (!user) {
+      throw new NotFoundException('User not found');
+    }
+    return user;
+  }
+
+  @Put(':id')
+  @UseGuards(AuthGuard)
+  @ApiOperation({ summary: 'Update user' })
+  async updateUser(
+    @Param('id', ParseUUIDPipe) id: string,
+    @Body() updateUserDto: UpdateUserDto,
+    @CurrentUser() currentUser: UserEntity
+  ): Promise<UserDto> {
+    if (currentUser.id !== id && !currentUser.isAdmin) {
+      throw new ForbiddenException('Insufficient permissions');
+    }
+    return this.userService.updateUser(id, updateUserDto);
+  }
+}
+
+// Type-safe NestJS service
+@Injectable()
+export class UserService {
+  constructor(
+    private readonly userRepository: UserRepository,
+    private readonly emailService: EmailService,
+    private readonly eventEmitter: EventEmitter2
+  ) {}
+
+  async createUser(createUserDto: CreateUserDto): Promise<UserDto> {
+    // Check if user already exists
+    const existingUser = await this.userRepository.findByEmail(createUserDto.email);
+    if (existingUser) {
+      throw new ConflictException('User with this email already exists');
+    }
+
+    // Create user
+    const hashedPassword = await bcrypt.hash(createUserDto.password, 10);
+    const userData: CreateUserData = {
+      ...createUserDto,
+      passwordHash: hashedPassword,
+    };
+
+    const user = await this.userRepository.create(userData);
+
+    // Emit event
+    this.eventEmitter.emit('user.created', new UserCreatedEvent(user));
+
+    // Send welcome email
+    await this.emailService.sendWelcomeEmail(user.email, user.profile.firstName);
+
+    return this.mapToDto(user);
+  }
+
+  private mapToDto(user: UserEntity): UserDto {
+    // Type-safe mapping logic
+    return {
+      id: user.id,
+      email: user.email,
+      profile: user.profile,
+      createdAt: user.createdAt,
+      updatedAt: user.updatedAt,
+    };
+  }
+}
+
+// Agent workflow for NestJS development
+Task("NestJS Architect", "Design NestJS module structure with type safety", "system-architect")
+Task("Controller Developer", "Implement type-safe controllers with validation", "backend-dev")
+Task("Service Implementation Specialist", "Create business logic services", "coder")
+Task("Guard and Interceptor Creator", "Implement authentication and validation guards", "reviewer")
+```
+
+### NestJS DTOs and Validation
+```typescript
+// Input DTOs with validation
+export class CreateUserDto {
+  @ApiProperty({ example: 'user@example.com' })
+  @IsEmail()
+  @IsNotEmpty()
+  email!: string;
+
+  @ApiProperty({ minLength: 8 })
+  @IsString()
+  @MinLength(8)
+  @Matches(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]/, {
+    message: 'Password must contain uppercase, lowercase, number and special character',
+  })
+  password!: string;
+
+  @ApiProperty({ type: UserProfileDto })
+  @ValidateNested()
+  @Type(() => UserProfileDto)
+  profile!: UserProfileDto;
+}
+
+export class UserProfileDto {
+  @ApiProperty()
+  @IsString()
+  @IsNotEmpty()
+  @MaxLength(50)
+  firstName!: string;
+
+  @ApiProperty()
+  @IsString()
+  @IsNotEmpty()
+  @MaxLength(50)
+  lastName!: string;
+
+  @ApiProperty({ required: false })
+  @IsOptional()
+  @IsInt()
+  @Min(13)
+  @Max(120)
+  age?: number;
+
+  @ApiProperty({ required: false })
+  @IsOptional()
+  @IsString()
+  @MaxLength(500)
+  bio?: string;
+}
+
+// Output DTOs
+export class UserDto {
+  @ApiProperty()
+  id!: string;
+
+  @ApiProperty()
+  email!: string;
+
+  @ApiProperty({ type: UserProfileDto })
+  profile!: UserProfileDto;
+
+  @ApiProperty()
+  createdAt!: Date;
+
+  @ApiProperty()
+  updatedAt!: Date;
+}
+
+// Custom validation decorators
+export function IsValidRole(validationOptions?: ValidationOptions) {
+  return function (object: Object, propertyName: string) {
+    registerDecorator({
+      name: 'isValidRole',
+      target: object.constructor,
+      propertyName: propertyName,
+      options: validationOptions,
+      validator: {
+        validate(value: any) {
+          return typeof value === 'string' && ['admin', 'user', 'moderator'].includes(value);
+        },
+        defaultMessage() {
+          return 'Role must be one of: admin, user, moderator';
+        },
+      },
+    });
+  };
+}
+
+// Agent workflow for DTOs and validation
+Task("DTO Designer", "Create comprehensive DTOs with validation rules", "backend-dev")
+Task("Validation Rule Creator", "Implement custom validation decorators", "reviewer")
+Task("API Documentation Generator", "Generate OpenAPI documentation from DTOs", "code-analyzer")
+```
+
+## 📱 Next.js Full-Stack TypeScript
+
+### Next.js API Routes with TypeScript
+```typescript
+// Type-safe Next.js API routes
+import type { NextApiRequest, NextApiResponse } from 'next';
+
+interface CreateUserAPIRequest extends NextApiRequest {
+  body: CreateUserRequest;
+}
+
+interface UserAPIResponse {
+  success: boolean;
+  data?: User;
+  error?: string;
+}
+
+export default async function handler(
+  req: CreateUserAPIRequest,
+  res: NextApiResponse<UserAPIResponse>
+) {
+  if (req.method !== 'POST') {
+    res.setHeader('Allow', ['POST']);
+    res.status(405).json({ success: false, error: 'Method not allowed' });
+    return;
+  }
+
+  try {
+    // Validate request body
+    const validationResult = CreateUserRequestSchema.safeParse(req.body);
+    if (!validationResult.success) {
+      res.status(400).json({
+        success: false,
+        error: validationResult.error.message,
+      });
+      return;
+    }
+
+    // Create user
+    const user = await userService.createUser(validationResult.data);
+
+    res.status(201).json({
+      success: true,
+      data: user,
+    });
+  } catch (error) {
+    console.error('Error creating user:', error);
+    res.status(500).json({
+      success: false,
+      error: 'Internal server error',
+    });
+  }
+}
+
+// Type-safe API client
+class ApiClient {
+  private baseUrl: string;
+
+  constructor(baseUrl: string = '/api') {
+    this.baseUrl = baseUrl;
+  }
+
+  async post<TRequest, TResponse>(
+    endpoint: string,
+    data: TRequest
+  ): Promise<TResponse> {
+    const response = await fetch(`${this.baseUrl}${endpoint}`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(data),
+    });
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+
+    return response.json();
+  }
+
+  async get<TResponse>(endpoint: string): Promise<TResponse> {
+    const response = await fetch(`${this.baseUrl}${endpoint}`);
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+
+    return response.json();
+  }
+}
+
+// Usage in components
+const UserForm: React.FC = () => {
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const apiClient = new ApiClient();
+
+  const handleSubmit = async (userData: CreateUserRequest) => {
+    setIsSubmitting(true);
+    try {
+      const response = await apiClient.post<CreateUserRequest, UserAPIResponse>(
+        '/users',
+        userData
+      );
+
+      if (response.success) {
+        // Handle success
+        console.log('User created:', response.data);
+      } else {
+        // Handle error
+        console.error('Error:', response.error);
+      }
+    } catch (error) {
+      console.error('Network error:', error);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  // Component implementation...
+};
+
+// Agent workflow for Next.js development
+Task("Next.js Architect", "Design full-stack Next.js architecture with TypeScript", "system-architect")
+Task("API Route Developer", "Implement type-safe API routes", "backend-dev")
+Task("Client-Side Developer", "Create type-safe client-side components", "coder")
+Task("SSR/SSG Specialist", "Implement server-side rendering with type safety", "performance-benchmarker")
+```
+
+## 🧪 Testing Framework Integration
+
+### Jest with TypeScript
+```typescript
+// Type-safe test utilities
+interface TestUser {
+  id: string;
+  email: string;
+  profile: UserProfile;
+}
+
+class UserTestFactory {
+  static create(overrides: Partial<TestUser> = {}): TestUser {
+    return {
+      id: faker.datatype.uuid(),
+      email: faker.internet.email(),
+      profile: {
+        firstName: faker.name.firstName(),
+        lastName: faker.name.lastName(),
+        age: faker.datatype.number({ min: 18, max: 80 }),
+      },
+      ...overrides,
+    };
+  }
+
+  static createMany(count: number, overrides: Partial<TestUser> = {}): TestUser[] {
+    return Array.from({ length: count }, () => this.create(overrides));
+  }
+}
+
+// Type-safe mock creators
+function createMockUserService(): jest.Mocked<UserService> {
+  return {
+    createUser: jest.fn(),
+    findById: jest.fn(),
+    updateUser: jest.fn(),
+    deleteUser: jest.fn(),
+    findByEmail: jest.fn(),
+  };
+}
+
+// Test suite with comprehensive typing
+describe('UserService', () => {
+  let userService: UserService;
+  let mockUserRepository: jest.Mocked<UserRepository>;
+  let mockEmailService: jest.Mocked<EmailService>;
+
+  beforeEach(() => {
+    mockUserRepository = createMockUserRepository();
+    mockEmailService = createMockEmailService();
+    userService = new UserService(mockUserRepository, mockEmailService);
+  });
+
+  describe('createUser', () => {
+    it('should create user with valid data', async () => {
+      // Arrange
+      const createUserData: CreateUserRequest = {
+        email: 'test@example.com',
+        password: 'SecurePass123!',
+        profile: {
+          firstName: 'John',
+          lastName: 'Doe',
+        },
+      };
+
+      const expectedUser = UserTestFactory.create({
+        email: createUserData.email,
+        profile: createUserData.profile,
+      });
+
+      mockUserRepository.findByEmail.mockResolvedValue(null);
+      mockUserRepository.create.mockResolvedValue(expectedUser);
+
+      // Act
+      const result = await userService.createUser(createUserData);
+
+      // Assert
+      expect(result).toEqual(expectedUser);
+      expect(mockUserRepository.create).toHaveBeenCalledWith(
+        expect.objectContaining({
+          email: createUserData.email,
+          profile: createUserData.profile,
+        })
+      );
+      expect(mockEmailService.sendWelcomeEmail).toHaveBeenCalledWith(
+        expectedUser.email,
+        expectedUser.profile.firstName
+      );
+    });
+
+    it('should throw error when user already exists', async () => {
+      // Arrange
+      const createUserData: CreateUserRequest = {
+        email: 'existing@example.com',
+        password: 'SecurePass123!',
+        profile: { firstName: 'Jane', lastName: 'Doe' },
+      };
+
+      const existingUser = UserTestFactory.create({ email: createUserData.email });
+      mockUserRepository.findByEmail.mockResolvedValue(existingUser);
+
+      // Act & Assert
+      await expect(userService.createUser(createUserData)).rejects.toThrow(
+        'User with this email already exists'
+      );
+
+      expect(mockUserRepository.create).not.toHaveBeenCalled();
+      expect(mockEmailService.sendWelcomeEmail).not.toHaveBeenCalled();
+    });
+  });
+});
+
+// Agent workflow for testing
+Task("Test Strategy Designer", "Design comprehensive testing strategy with types", "tester")
+Task("Test Factory Creator", "Create type-safe test data factories", "tester")
+Task("Mock Generator", "Generate typed mocks for all dependencies", "reviewer")
+Task("Test Coverage Analyzer", "Ensure comprehensive test coverage", "code-analyzer")
+```
+
+## 🔧 Build and Development Tools
+
+### Webpack Configuration for TypeScript
+```typescript
+// webpack.config.ts
+import path from 'path';
+import { Configuration } from 'webpack';
+import HtmlWebpackPlugin from 'html-webpack-plugin';
+import { CleanWebpackPlugin } from 'clean-webpack-plugin';
+
+const config: Configuration = {
+  mode: 'development',
+  entry: './src/index.tsx',
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    filename: '[name].[contenthash].js',
+    publicPath: '/',
+  },
+  resolve: {
+    extensions: ['.tsx', '.ts', '.js'],
+    alias: {
+      '@': path.resolve(__dirname, 'src'),
+      '@components': path.resolve(__dirname, 'src/components'),
+      '@utils': path.resolve(__dirname, 'src/utils'),
+      '@types': path.resolve(__dirname, 'src/types'),
+    },
+  },
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        use: [
+          {
+            loader: 'ts-loader',
+            options: {
+              transpileOnly: true,
+              experimentalWatchApi: true,
+            },
+          },
+        ],
+        exclude: /node_modules/,
+      },
+      {
+        test: /\.css$/,
+        use: ['style-loader', 'css-loader', 'postcss-loader'],
+      },
+    ],
+  },
+  plugins: [
+    new CleanWebpackPlugin(),
+    new HtmlWebpackPlugin({
+      template: './public/index.html',
+    }),
+  ],
+  devServer: {
+    contentBase: path.join(__dirname, 'dist'),
+    compress: true,
+    port: 3000,
+    hot: true,
+    historyApiFallback: true,
+  },
+};
+
+export default config;
+```
+
+### Vite Configuration for TypeScript
+```typescript
+// vite.config.ts
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+import { checker } from 'vite-plugin-checker';
+
+export default defineConfig({
+  plugins: [
+    react(),
+    checker({
+      typescript: true,
+      eslint: {
+        lintCommand: 'eslint "./src/**/*.{ts,tsx}"',
+      },
+    }),
+  ],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+      '@components': path.resolve(__dirname, './src/components'),
+      '@utils': path.resolve(__dirname, './src/utils'),
+      '@types': path.resolve(__dirname, './src/types'),
+    },
+  },
+  build: {
+    outDir: 'dist',
+    sourcemap: true,
+    rollupOptions: {
+      output: {
+        manualChunks: {
+          vendor: ['react', 'react-dom'],
+          utils: ['lodash', 'date-fns'],
+        },
+      },
+    },
+  },
+  server: {
+    port: 3000,
+    open: true,
+  },
+});
+```
+
+## 📋 Framework Integration Checklist
+
+### React Integration
+- [ ] Component prop types defined
+- [ ] Custom hooks with generic types
+- [ ] Context providers with type safety
+- [ ] State management integration
+- [ ] Event handlers with proper typing
+
+### Node.js/Express Integration
+- [ ] Request/response types defined
+- [ ] Middleware with type safety
+- [ ] Route handlers properly typed
+- [ ] Database integration with TypeORM
+- [ ] Error handling with types
+
+### NestJS Integration
+- [ ] Controllers with decorators and types
+- [ ] Services with dependency injection
+- [ ] DTOs with validation rules
+- [ ] Guards and interceptors typed
+- [ ] Module structure organized
+
+### Testing Integration
+- [ ] Test utilities with types
+- [ ] Mock factories created
+- [ ] Test suites comprehensive
+- [ ] Type coverage in tests
+- [ ] Integration tests included
+
+---
+
+**Next Steps:**
+- Explore [Automation](automation.md) for CI/CD integration with frameworks
+- Learn [Enterprise Patterns](enterprise.md) for large-scale framework usage
+- Check [Performance Optimization](performance.md) for framework-specific optimizations
+
+**Ready to integrate with your framework?**
+- Choose your primary framework and follow the specific patterns
+- Use agents to generate boilerplate framework code
+- Implement type-safe patterns incrementally across your application