TypeScript Configuration

This document details the TypeScript configuration for the STO Education Platform project.

Configuration Files

tsconfig.json

Main TypeScript configuration file that extends specific configurations:

{
  "files": [],
  "references": [
    {
      "path": "./tsconfig.app.json"
    },
    {
      "path": "./tsconfig.node.json"
    }
  ]
}

Purpose: Uses project references to separate application and build tool configurations.

tsconfig.app.json

Configuration for the main application code:

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,
    "jsx": "react-jsx",
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["src"]
}

Key Settings:

target: ES2020 for modern JavaScript features
jsx: react-jsx for React 17+ JSX transform
strict: Enables all strict type checking options
noEmit: TypeScript only checks types, doesn’t emit JavaScript
baseUrl/paths: Path mapping for cleaner imports (@/ → ./src/)

tsconfig.node.json

Configuration for Node.js build tools and scripts:

{
  "compilerOptions": {
    "target": "ES2022",
    "lib": ["ES2023"],
    "module": "ESNext",
    "skipLibCheck": true,
    "moduleResolution": "bundler",
    "allowSyntheticDefaultImports": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["vite.config.ts"]
}

Purpose: Separate configuration for build tools with different requirements than the main app.

Type Safety Features

Strict Mode Enabled

The configuration enables strict TypeScript checking:

noImplicitAny: Prevents implicit any types
strictNullChecks: Ensures null/undefined safety
strictFunctionTypes: Strict checking of function parameter types
noImplicitReturns: All code paths must return a value
noFallthroughCasesInSwitch: Prevents fallthrough in switch statements

Path Mapping

Clean import paths using @/ prefix:

// Instead of:
import { supabase } from '../../../lib/supabase'

// Use:
import { supabase } from '@/lib/supabase'

Type Definitions

Built-in Types

The project includes comprehensive type definitions in /src/types/:

index.ts: Core interfaces and types
BlogPost.ts: Blog-related types
Session.ts: Session management types
User.ts: User and profile types
Course.ts: Course and education types
Payment.ts: Payment processing types

Third-Party Types

Type definitions for external libraries:

// Supabase types
import { Database } from '@/types/database'

// React types
import { ReactNode, ComponentType } from 'react'

// Router types
import { NavigateFunction, Location } from 'react-router-dom'

Build Integration

Vite Integration

TypeScript works seamlessly with Vite:

// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()], // Handles TypeScript compilation
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
})

Development Experience

Features:

Real-time type checking in IDE
Auto-completion and IntelliSense
Error highlighting and diagnostics
Refactoring support
Import/export validation

IDE Support:

VS Code with TypeScript extension
WebStorm/IntelliJ IDEA
Vim/Neovim with LSP

Type Checking in CI/CD

Type checking is integrated into the build process:

{
  "scripts": {
    "build": "tsc && vite build",
    "type-check": "tsc --noEmit"
  }
}

Benefits:

Catches type errors before deployment
Ensures type safety across the codebase
Prevents runtime type-related bugs

Best Practices

Type Definitions

Use Interfaces for Objects:

interface User {
  id: string
  email: string
  role: 'student' | 'teacher' | 'admin'
}

Use Types for Unions:

type Status = 'pending' | 'approved' | 'rejected'

Generic Types for Reusability:

interface ApiResponse<T> {
  data: T
  success: boolean
  message?: string
}

Import/Export Types

// Export types explicitly
export type { User, Course, Session }

// Import types with type keyword
import type { User } from '@/types'

Strict Type Checking

Avoid any Type:

// Bad
const data: any = response.data

// Good
const data: ApiResponse<User> = response.data

Use Type Guards:

function isUser(obj: unknown): obj is User {
  return typeof obj === 'object' && obj !== null && 'id' in obj
}

Common Patterns

API Response Types

interface ApiResponse<T> {
  data: T
  success: boolean
  error?: string
}

interface PaginatedResponse<T> extends ApiResponse<T[]> {
  pagination: {
    page: number
    limit: number
    total: number
    hasMore: boolean
  }
}

Component Props Types

interface ButtonProps {
  children: ReactNode
  variant?: 'primary' | 'secondary'
  size?: 'sm' | 'md' | 'lg'
  disabled?: boolean
  onClick?: () => void
}

const Button: React.FC<ButtonProps> = ({ children, ...props }) => {
  // Component implementation
}

Hook Return Types

interface UseApiResult<T> {
  data: T | null
  loading: boolean
  error: string | null
  refetch: () => Promise<void>
}

function useApi<T>(url: string): UseApiResult<T> {
  // Hook implementation
}

Troubleshooting

Common Issues

Module Resolution Errors:
- Ensure baseUrl and paths are correctly configured
- Check import paths match the path mapping
Type Import Errors:
- Use import type for type-only imports
- Ensure types are properly exported
Strict Mode Errors:
- Add explicit types instead of relying on inference
- Use type assertions when necessary
- Handle null/undefined cases explicitly

Performance Optimization

Skip Lib Check: Enabled to speed up compilation
Incremental Compilation: TypeScript caches compilation results
Project References: Separate configurations for different parts

Build Configuration - Vite and build setup
Frontend Types - Application-specific type definitions
Project Structure - Overall project organization

Getting Started

Frontend Development

Backend Development

Configuration & Setup

Third-Party Integrations

Scripts & Automation

Public Assets & Resources

Database & Migrations

Documentation Files

Typescript config

TypeScript Configuration

Configuration Files

tsconfig.json

tsconfig.app.json

tsconfig.node.json

Type Safety Features

Strict Mode Enabled

Path Mapping

Type Definitions

Built-in Types

Third-Party Types

Build Integration

Vite Integration

Development Experience

Type Checking in CI/CD

Best Practices

Type Definitions

Import/Export Types

Strict Type Checking

Common Patterns

API Response Types

Component Props Types

Hook Return Types

Troubleshooting

Common Issues

Performance Optimization

​TypeScript Configuration

​Configuration Files

​tsconfig.json

​tsconfig.app.json

​tsconfig.node.json

​Type Safety Features

​Strict Mode Enabled

​Path Mapping

​Type Definitions

​Built-in Types

​Third-Party Types

​Build Integration

​Vite Integration

​Development Experience

​Type Checking in CI/CD

​Best Practices

​Type Definitions

​Import/Export Types

​Strict Type Checking

​Common Patterns

​API Response Types

​Component Props Types

​Hook Return Types

​Troubleshooting

​Common Issues

​Performance Optimization

​Related Documentation

TypeScript Configuration

Configuration Files

tsconfig.json

tsconfig.app.json

tsconfig.node.json

Type Safety Features

Strict Mode Enabled

Path Mapping

Type Definitions

Built-in Types

Third-Party Types

Build Integration

Vite Integration

Development Experience

Type Checking in CI/CD

Best Practices

Type Definitions

Import/Export Types

Strict Type Checking

Common Patterns

API Response Types

Component Props Types

Hook Return Types

Troubleshooting

Common Issues

Performance Optimization

Related Documentation