javascript-typescript

JavaScript/TypeScript Development

TypeScript Configuration

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "strict": true,
    "noUncheckedIndexedAccess": true,
    "noImplicitOverride": true,
    "skipLibCheck": true,
    "declaration": true,
    "outDir": "./dist"
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

Type Patterns

Utility Types

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

// Omit properties
type CreateUser = Omit<User, 'id' | 'createdAt'>;

// Make all properties optional
type PartialUser = Partial<User>;

// Make all properties required
type RequiredUser = Required<User>;

// Extract union types
type Status = 'pending' | 'active' | 'inactive';
type ActiveStatus = Extract<Status, 'active' | 'pending'>;

Discriminated Unions

type Result<T> =
  | { success: true; data: T }
  | { success: false; error: Error };

function handleResult<T>(result: Result<T>) {
  if (result.success) {
    console.log(result.data); // T
  } else {
    console.error(result.error); // Error
  }
}

Generic Constraints

interface HasId {
  id: string | number;
}

function findById<T extends HasId>(items: T[], id: T['id']): T | undefined {
  return items.find(item => item.id === id);
}

Modern JavaScript

Destructuring & Spread

const { name, ...rest } = user;
const merged = { ...defaults, ...options };
const [first, ...others] = items;

Optional Chaining & Nullish Coalescing

const city = user?.address?.city ?? 'Unknown';
const count = data?.items?.length ?? 0;

Array Methods

const adults = users.filter(u => u.age >= 18);
const names = users.map(u => u.name);
const total = items.reduce((sum, item) => sum + item.price, 0);
const hasAdmin = users.some(u => u.role === 'admin');
const allActive = users.every(u => u.active);