Typescript 5x Strict Mode Expert

// tsconfig.json - Enterprise Strict Configuration
{
  "compilerOptions": {
    // Strict Mode (Enable All)
    "strict": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "strictBindCallApply": true,
    "strictPropertyInitialization": true,
    "noImplicitThis": true,
    "alwaysStrict": true,
    
    // Additional Safety
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedIndexedAccess": true,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": true,
    "exactOptionalPropertyTypes": true,
    
    // Module Resolution
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "isolatedModules": true,
    "allowSyntheticDefaultImports": true,
    
    // Type Checking
    "skipLibCheck": false,
    "forceConsistentCasingInFileNames": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noUncheckedIndexedAccess": true,
    
    // Output
    "target": "ES2022",
    "module": "ESNext",
    "lib": ["ES2022", "DOM", "DOM.Iterable"],
    "declaration": true,
    "declarationMap": true,
    "sourceMap": true,
    
    // Advanced
    "incremental": true,
    "composite": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist", "**/*.test.ts"]
}

// Template Literal Types for Type-Safe API Routes
type HTTPMethod = 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH';
type Resource = 'users' | 'posts' | 'comments';
type ID = string;

type APIRoute<M extends HTTPMethod, R extends Resource> = `/${M}/${R}`;
type APIRouteWithId<M extends HTTPMethod, R extends Resource> = `/${M}/${R}/${ID}`;

type AllRoutes = 
  | APIRoute<'GET', 'users'>
  | APIRouteWithId<'GET', 'users'>
  | APIRoute<'POST', 'users'>
  | APIRoute<'GET', 'posts'>
  | APIRouteWithId<'GET', 'posts'>;

// Type-safe API client
function fetchAPI<T extends AllRoutes>(
  route: T,
  options?: RequestInit
): Promise<Response> {
  return fetch(`https://api.example.com${route}`, options);
}

// Usage - fully type-safe
fetchAPI('/GET/users'); // ✅ Valid
fetchAPI('/GET/users/123'); // ✅ Valid
fetchAPI('/POST/users'); // ✅ Valid
// fetchAPI('/INVALID/route'); // ❌ Type error

// Event Handler Types
type EventType = 'click' | 'hover' | 'focus' | 'blur';
type ElementType = 'button' | 'input' | 'div' | 'form';

type EventName = `on${Capitalize<EventType>}${Capitalize<ElementType>}`;
// Result: 'onClickButton' | 'onHoverInput' | 'onFocusDiv' | ...

type EventHandlers = {
  [K in EventName]: (event: Event) => void;
};

const handlers: EventHandlers = {
  onClickButton: (e) => console.log('Button clicked'),
  onHoverInput: (e) => console.log('Input hovered'),
  onFocusDiv: (e) => console.log('Div focused'),
  // TypeScript ensures all combinations are provided
};

// CSS Variable Types
type CSSVar<Name extends string> = `--${Name}`;
type ColorVar = CSSVar<'primary' | 'secondary' | 'accent' | 'danger'>;
// Result: '--primary' | '--secondary' | '--accent' | '--danger'

function setCSSVariable(name: ColorVar, value: string): void {
  document.documentElement.style.setProperty(name, value);
}

setCSSVariable('--primary', '#3b82f6'); // ✅ Valid
// setCSSVariable('--invalid', '#000'); // ❌ Type error

// Strict Null Checks Best Practices

interface User {
  id: string;
  name: string;
  email: string;
  profile?: {
    bio?: string;
    avatar?: string;
  };
}

// ❌ Bad - Unsafe access
function processUserUnsafe(user: User | null): void {
  console.log(user.name); // Error: Object is possibly 'null'
}

// ✅ Good - Explicit null check
function processUser(user: User | null): void {
  if (user === null) {
    throw new Error('User is required');
  }
  // TypeScript knows user is not null here
  console.log(user.name); // ✅ Safe
}

// ✅ Good - Optional chaining
function getUserEmail(user: User | null | undefined): string | undefined {
  return user?.profile?.email;
}

// ✅ Good - Nullish coalescing
function getDisplayName(user: User | null): string {
  return user?.name ?? 'Anonymous';
}

// ✅ Good - Type guard
function isUser(value: unknown): value is User {
  return (
    typeof value === 'object' &&
    value !== null &&
    'id' in value &&
    'name' in value &&
    'email' in value &&
    typeof (value as User).id === 'string' &&
    typeof (value as User).name === 'string' &&
    typeof (value as User).email === 'string'
  );
}

function processUserSafe(value: unknown): void {
  if (isUser(value)) {
    // TypeScript knows value is User here
    console.log(value.name); // ✅ Safe
  } else {
    throw new Error('Invalid user');
  }
}

// ✅ Good - Non-null assertion (use sparingly!)
function getElementById(id: string): HTMLElement | null {
  return document.getElementById(id);
}

// Better: Return nullable and handle at call site
function getElementSafe(id: string): HTMLElement | null {
  return document.getElementById(id);
}

// Usage with null check
const element = getElementSafe('app');
if (element !== null) {
  element.textContent = 'Hello'; // ✅ Safe
}

// Array with strict null checks
function processUsers(users: (User | null)[]): string[] {
  return users
    .filter((user): user is User => user !== null)
    .map(user => user.name);
}

// Discriminated Unions for Type Safety
type Success<T> = { 
  status: 'success'; 
  data: T;
};

type Failure = { 
  status: 'error'; 
  error: string;
  code?: number;
};

type Result<T> = Success<T> | Failure;

// Type guard for discriminated union
function isSuccess<T>(result: Result<T>): result is Success<T> {
  return result.status === 'success';
}

function handleResult<T>(result: Result<T>): T | null {
  if (isSuccess(result)) {
    // TypeScript knows this is Success<T>
    return result.data; // ✅ Safe access
  } else {
    // TypeScript knows this is Failure
    console.error(result.error, result.code); // ✅ Safe access
    return null;
  }
}

// Array type guards
function isArrayOfStrings(value: unknown): value is string[] {
  return Array.isArray(value) && value.every(item => typeof item === 'string');
}

function isArrayOfNumbers(value: unknown): value is number[] {
  return Array.isArray(value) && value.every(item => typeof item === 'number');
}

// Object type guards with property checking
interface User {
  id: string;
  name: string;
  email: string;
}

function isUser(value: unknown): value is User {
  return (
    typeof value === 'object' &&
    value !== null &&
    'id' in value &&
    'name' in value &&
    'email' in value &&
    typeof (value as User).id === 'string' &&
    typeof (value as User).name === 'string' &&
    typeof (value as User).email === 'string'
  );
}

// Generic type guard
function isOfType<T>(
  value: unknown,
  check: (val: unknown) => val is T
): value is T {
  return check(value);
}

// Usage
const data: unknown = { id: '1', name: 'John', email: 'john@example.com' };

if (isUser(data)) {
  // TypeScript knows data is User
  console.log(data.name); // ✅ Safe
}

// Multiple type guards
function processValue(value: unknown): string {
  if (isUser(value)) {
    return value.name;
  } else if (isArrayOfStrings(value)) {
    return value.join(', ');
  } else if (typeof value === 'string') {
    return value;
  } else {
    return 'Unknown';
  }
}

// eslint.config.js (ESLint 9.x flat config)
import tseslint from '@typescript-eslint/eslint-plugin';
import tsparser from '@typescript-eslint/parser';

export default [
  {
    files: ['**/*.{ts,tsx}'],
    languageOptions: {
      parser: tsparser,
      parserOptions: {
        project: './tsconfig.json',
        tsconfigRootDir: import.meta.dirname,
        ecmaVersion: 2022,
        sourceType: 'module',
      },
    },
    plugins: {
      '@typescript-eslint': tseslint,
    },
    rules: {
      // TypeScript-specific rules
      '@typescript-eslint/no-explicit-any': 'error',
      '@typescript-eslint/no-unused-vars': [
        'error',
        { 
          argsIgnorePattern: '^_',
          varsIgnorePattern: '^_',
          caughtErrorsIgnorePattern: '^_',
        }
      ],
      '@typescript-eslint/explicit-function-return-type': 'warn',
      '@typescript-eslint/no-non-null-assertion': 'error',
      '@typescript-eslint/strict-boolean-expressions': 'error',
      '@typescript-eslint/no-floating-promises': 'error',
      '@typescript-eslint/await-thenable': 'error',
      '@typescript-eslint/no-misused-promises': 'error',
      '@typescript-eslint/no-unnecessary-condition': 'error',
      '@typescript-eslint/prefer-nullish-coalescing': 'error',
      '@typescript-eslint/prefer-optional-chain': 'error',
      '@typescript-eslint/prefer-readonly': 'error',
      '@typescript-eslint/no-unnecessary-type-assertion': 'error',
      '@typescript-eslint/no-unsafe-assignment': 'error',
      '@typescript-eslint/no-unsafe-call': 'error',
      '@typescript-eslint/no-unsafe-member-access': 'error',
      '@typescript-eslint/no-unsafe-return': 'error',
      
      // Naming conventions
      '@typescript-eslint/naming-convention': [
        'error',
        {
          selector: 'interface',
          format: ['PascalCase'],
          custom: {
            regex: '^I[A-Z]',
            match: false, // Don't use I prefix
          },
        },
        {
          selector: 'typeAlias',
          format: ['PascalCase'],
        },
        {
          selector: 'variable',
          format: ['camelCase', 'UPPER_CASE', 'PascalCase'],
        },
        {
          selector: 'function',
          format: ['camelCase', 'PascalCase'],
        },
      ],
      
      // Prevent common mistakes
      '@typescript-eslint/no-inferrable-types': 'error',
      '@typescript-eslint/no-empty-function': 'warn',
      '@typescript-eslint/no-empty-interface': 'error',
      '@typescript-eslint/explicit-module-boundary-types': 'warn',
    },
  },
];

// Utility Types and Mapped Types

interface User {
  id: string;
  name: string;
  email: string;
  age: number;
  active: boolean;
}

// Built-in utility types
// Make all properties optional
type PartialUser = Partial<User>;
// { id?: string; name?: string; email?: string; age?: number; active?: boolean; }

// Make all properties required
type RequiredUser = Required<PartialUser>;
// { id: string; name: string; email: string; age: number; active: boolean; }

// Pick specific properties
type UserPreview = Pick<User, 'id' | 'name'>;
// { id: string; name: string; }

// Omit specific properties
type UserWithoutEmail = Omit<User, 'email'>;
// { id: string; name: string; age: number; active: boolean; }

// Readonly
type ReadonlyUser = Readonly<User>;
// All properties are readonly

// Custom mapped types
// Deep readonly
type ReadonlyDeep<T> = {
  readonly [P in keyof T]: T[P] extends object ? ReadonlyDeep<T[P]> : T[P];
};

type DeepReadonlyUser = ReadonlyDeep<User>;

// Conditional types
type Awaited<T> = T extends Promise<infer U> ? U : T;

type ApiResponse = Promise<{ data: User }>;
type UnwrappedResponse = Awaited<ApiResponse>; // { data: User }

// Key remapping in mapped types (TypeScript 5.x)
type Getters<T> = {
  [K in keyof T as `get${Capitalize<string & K>}`]: () => T[K];
};

type UserGetters = Getters<User>;
// Result: { 
//   getId(): string; 
//   getName(): string; 
//   getEmail(): string; 
//   getAge(): number; 
//   getActive(): boolean; 
// }

// Setters
type Setters<T> = {
  [K in keyof T as `set${Capitalize<string & K>}`]: (value: T[K]) => void;
};

type UserSetters = Setters<User>;

// Filter properties by type
type StringProperties<T> = {
  [K in keyof T as T[K] extends string ? K : never]: T[K];
};

type UserStringProps = StringProperties<User>;
// { id: string; name: string; email: string; }

// Make specific properties optional
type PartialBy<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;

type UserWithOptionalEmail = PartialBy<User, 'email'>;
// { id: string; name: string; email?: string; age: number; active: boolean; }

// Extract function return type
type ReturnType<T extends (...args: any) => any> = T extends (...args: any) => infer R ? R : any;

function getUser(): User {
  return { id: '1', name: 'John', email: 'john@example.com', age: 30, active: true };
}

type UserReturnType = ReturnType<typeof getUser>; // User

// Type-Safe API Client with Strict Types

// API Response Types
type SuccessResponse<T> = {
  success: true;
  data: T;
};

type ErrorResponse = {
  success: false;
  error: {
    code: string;
    message: string;
    details?: unknown;
  };
};

type APIResponse<T> = SuccessResponse<T> | ErrorResponse;

// Type guard
function isSuccessResponse<T>(
  response: APIResponse<T>
): response is SuccessResponse<T> {
  return response.success === true;
}

// Type-safe API client
class APIClient {
  private baseURL: string;
  
  constructor(baseURL: string) {
    if (!baseURL || typeof baseURL !== 'string') {
      throw new Error('Base URL is required');
    }
    this.baseURL = baseURL;
  }
  
  async request<T>(
    endpoint: string,
    options?: RequestInit
  ): Promise<APIResponse<T>> {
    try {
      const response = await fetch(`${this.baseURL}${endpoint}`, options);
      
      if (!response.ok) {
        return {
          success: false,
          error: {
            code: `HTTP_${response.status}`,
            message: response.statusText,
          },
        };
      }
      
      const data = await response.json() as T;
      
      return {
        success: true,
        data,
      };
    } catch (error) {
      return {
        success: false,
        error: {
          code: 'NETWORK_ERROR',
          message: error instanceof Error ? error.message : 'Unknown error',
          details: error,
        },
      };
    }
  }
  
  async get<T>(endpoint: string): Promise<APIResponse<T>> {
    return this.request<T>(endpoint, { method: 'GET' });
  }
  
  async post<T, D = unknown>(
    endpoint: string,
    data: D
  ): Promise<APIResponse<T>> {
    return this.request<T>(endpoint, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(data),
    });
  }
}

// Usage with strict types
interface User {
  id: string;
  name: string;
  email: string;
}

const client = new APIClient('https://api.example.com');

async function fetchUser(id: string): Promise<User | null> {
  const response = await client.get<User>(`/users/${id}`);
  
  if (isSuccessResponse(response)) {
    return response.data; // TypeScript knows this is User
  } else {
    console.error(response.error);
    return null;
  }
}

// Type-safe usage
const user = await fetchUser('123');
if (user !== null) {
  console.log(user.name); // ✅ Type-safe access
}