javascript-typescript

name	javascript-typescript
description	Modern JavaScript and TypeScript development patterns
domain	programming-languages
version	1.0.0
tags	["javascript","typescript","es6","nodejs","async","types"]
triggers	{"keywords":{"primary":["javascript","typescript","js","ts","nodejs","node","npm","deno","bun"],"secondary":["es6","async","promise","module","webpack","vite","esbuild"]},"context_boost":["web","frontend","backend","fullstack","react","vue"],"context_penalty":["python","java","csharp","rust"],"priority":"high"}

JavaScript & TypeScript

Overview

Modern JavaScript (ES6+) and TypeScript patterns for building robust applications.

---

TypeScript Fundamentals

Type Definitions

// Basic types
type UserId = string;
type Timestamp = number;

// Object types
interface User {
  id: UserId;
  email: string;
  name: string;
  createdAt: Timestamp;
  metadata?: Record<string, unknown>;
}

// Union types
type Status = 'pending' | 'active' | 'inactive';

// Discriminated unions
type Result<T, E = Error> =
  | { success: true; data: T }
  | { success: false; error: E };

// Generic types
interface Repository<T extends { id: string }> {
  find(id: string): Promise<T | null>;
  findAll(filter?: Partial<T>): Promise<T[]>;
  create(data: Omit<T, 'id'>): Promise<T>;
  update(id: string, data: Partial<T>): Promise<T>;
  delete(id: string): Promise<void>;
}

// Utility types
type CreateUserInput = Omit<User, 'id' | 'createdAt'>;
type UpdateUserInput = Partial<Pick<User, 'name' | 'metadata'>>;
type UserKeys = keyof User;

// Conditional types
type Nullable<T> = T | null;
type NonNullableFields<T> = {
  [K in keyof T]-?: NonNullable<T[K]>;
};

// Template literal types
type EventName = `on${Capitalize<string>}`;
type HttpMethod = 'GET' | 'POST' | 'PUT' | 'DELETE';
type ApiRoute = `/${string}`;

Type Guards

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

// Discriminated union guards
interface Dog {
  kind: 'dog';
  bark(): void;
}

interface Cat {
  kind: 'cat';
  meow(): void;
}

type Animal = Dog | Cat;

function handleAnimal(animal: Animal) {
  switch (animal.kind) {
    case 'dog':
      animal.bark(); // TypeScript knows this is Dog
      break;
    case 'cat':
      animal.meow(); // TypeScript knows this is Cat
      ;
  }
}


 (): asserts value is  {
   ( value !== ) {
      ();
  }
}


 ():  {
    ();
}

---

Async Patterns

Promises and Async/Await

// Promise creation
function delay(ms: number): Promise<void> {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

// Async/await with error handling
async function fetchUser(id: string): Promise<Result<User>> {
  try {
    const response = await fetch(`/api/users/${id}`);

    if (!response.ok) {
      return {
        success: false,
        error: new Error(`HTTP ${response.status}`),
      };
    }

    const data = await response.json();
    return { success: true, data };
  } catch (error) {
    return {
      success: false,
      error: error instanceof Error ? error :  ((error)),
    };
  }
}


  (): <[]> {
   results =  .(ids.( (id)));

   results
    .((r): r is { : ; :  } => r.)
    .( r.);
}


  () {
   results =  .(
    ids.( ().( r.()))
  );

   results.( ({
    : ids[index],
    : result.,
    : result. ===  ? result. : ,
    : result. ===  ? result. : ,
  }));
}


  processSequentially<T, R>(
  : T[],
  :  <R>
): <R[]> {
   items.( (accPromise, item) => {
     acc =  accPromise;
     result =  (item);
     [...acc, result];
  }, .([]  R[]));
}

Async Iterators

// Async generator
async function* paginate<T>(
  fetcher: (page: number) => Promise<{ data: T[]; hasMore: boolean }>
): AsyncGenerator<T[], void, unknown> {
  let page = 1;
  let hasMore = true;

  while (hasMore) {
    const result = await fetcher(page);
    yield result.data;
    hasMore = result.hasMore;
    page++;
  }
}

// Using async iterator
async function getAllItems() {
  const items: Item[] = [];

  for await (const batch of paginate(fetchPage)) {
    items.push(...batch);
  }

  return items;
}

// Async iterator utilities
async function* map<T, R>(
  iterable: AsyncIterable<T>,
  fn: (item: T) => R | Promise<R>
): AsyncGenerator<R> {
    ( item  iterable) {
      (item);
  }
}

 * filter<T>(
  : <T>,
  :   | <>
): <T> {
    ( item  iterable) {
     ( (item)) {
       item;
    }
  }
}

 * take<T>(
  : <T>,
  : 
): <T> {
   taken = ;
    ( item  iterable) {
     (taken >= count) ;
     item;
    taken++;
  }
}

---

Functional Patterns

Higher-Order Functions

// Currying
const add = (a: number) => (b: number) => a + b;
const add5 = add(5);
console.log(add5(3)); // 8

// Pipe and compose
const pipe =
  <T>(...fns: Array<(arg: T) => T>) =>
  (value: T): T =>
    fns.reduce((acc, fn) => fn(acc), value);

const compose =
  <T>(...fns: Array<(arg: T) => T>) =>
  (value: T): T =>
    fns.reduceRight((acc, fn) => fn(acc), value);

// Usage
const processString = pipe(
  (s: string) => s.trim(),
  (s: string) => s.toLowerCase(),
   s.(, )
);


 memoize<  [], >(
  :  
):   {
   cache =  <, >();

   (...: ):  {
     key = .(args);

     (cache.(key)) {
       cache.(key)!;
    }

     result = (...args);
    cache.(key, result);
     result;
  };
}


 debounce<T  (...: []) => >(
  : T,
  : 
):   {
   : < >;

    {
    (timeoutId);
    timeoutId = ( (...args), delay);
  };
}


 throttle<T  (...: []) => >(
  : T,
  : 
):   {
   inThrottle = ;

    {
     (!inThrottle) {
      (...args);
      inThrottle = ;
      ( (inThrottle = ), limit);
    }
  };
}

Immutable Data Patterns

// Object updates
const updateUser = (user: User, updates: Partial<User>): User => ({
  ...user,
  ...updates,
});

// Nested updates
interface State {
  users: Record<string, User>;
  settings: {
    theme: string;
    notifications: boolean;
  };
}

const updateNestedState = (
  state: State,
  userId: string,
  userUpdate: Partial<User>
): State => ({
  ...state,
  users: {
    ...state.users,
    [userId]: {
      ...state.users[userId],
      ...userUpdate,
    },
  },
});

// Array operations (immutable)
const addItem = <T>(arr: T[], item: T): T[] => [...arr, item];
const removeItem = <T>(arr: T[], index: number): T[] => [
  ...arr.slice(0, index),
  ...arr.slice(index + 1),
];
const updateItem = <T>(arr: T[], index: number, : T): T[] => [
  ...arr.(, index),
  item,
  ...arr.(index + ),
];

---

Modern JavaScript Features

Destructuring and Spread

// Object destructuring with defaults and rename
const { name, email, role = 'user', id: odentifier } = user;

// Nested destructuring
const {
  address: { city, country },
} = user;

// Array destructuring
const [first, second, ...rest] = items;
const [, , third] = items; // Skip elements

// Function parameter destructuring
function createUser({
  name,
  email,
  role = 'user',
}: {
  name: string;
  email: string;
  role?: string;
}) {
  return { id: generateId(), name, email, role };
}

// Spread for merging
const merged = { ...defaults, ...overrides };
const combined = [...arr1, ...arr2];

Optional Chaining and Nullish Coalescing

// Optional chaining
const city = user?.address?.city;
const firstItem = items?.[0];
const result = callback?.();

// Nullish coalescing (only null/undefined)
const value = input ?? defaultValue;

// Combining them
const displayName = user?.profile?.displayName ?? user?.name ?? 'Anonymous';

// Logical assignment operators
let config = { timeout: 0 };
config.timeout ||= 5000; // Assigns if falsy (won't assign, 0 is falsy)
config.timeout ??= 5000; // Assigns if null/undefined (won't assign)
config.retries ??= 3; // Assigns (undefined)

---

Error Handling

// Custom error classes
class AppError extends Error {
  constructor(
    message: string,
    public code: string,
    public statusCode: number = 500
  ) {
    super(message);
    this.name = 'AppError';
    Error.captureStackTrace(this, this.constructor);
  }
}

class ValidationError extends AppError {
  constructor(
    message: string,
    public fields: Record<string, string[]>
  ) {
    super(message, 'VALIDATION_ERROR', 400);
    this.name = 'ValidationError';
  }
}

// Result type pattern (no exceptions)
type Result<T, E = Error> =
  | { ok: true; value: T }
  | { ok: ; : E };

 ok<T>(: T): <T, > {
   { : , value };
}

 err<E>(: E): <, E> {
   { : , error };
}


 parseJSON<T>(: ): <T, > {
   {
     (.(json));
  }  (e) {
     (e  );
  }
}


 map<T, U, E>(: <T, E>, :  U): <U, E> {
   result. ? ((result.)) : result;
}

 flatMap<T, U, E>(
  : <T, E>,
  :  <U, E>
): <U, E> {
   result. ? (result.) : result;
}

---

Module Patterns

// Named exports
export const API_URL = 'https://api.example.com';
export function fetchData() {}
export class ApiClient {}

// Default export
export default class Logger {}

// Re-exports
export { UserService } from './user-service';
export { default as Logger } from './logger';
export * from './types';
export * as utils from './utils';

// Dynamic imports
async function loadModule() {
  const { default: Chart } = await import('./chart');
  return new Chart();
}

// Conditional imports
const adapter = await import(
  process.env. ===  ?  : 
);

---

Related Skills

• [[frontend]] - React/Next.js development
• [[backend]] - Node.js server development
• [[testing]] - Jest, Vitest testing