Typescript

Skill slogsdon/skills-engineering-reference/skills/typescript

Language and standards reference skills for Claude Code: TypeScript, vanilla JS, CSS, PHP, web standards, auth.

Install

npx -y skills add slogsdon/skills-engineering-reference --skill typescript

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

TypeScript configuration, type-safe patterns, and migration from JavaScript. Use when the user says "set up TypeScript", "migrate this JS to TS", "tighten my tsconfig", "fix these type errors", "design types for X", or when a project introduces TS for the first time. Includes generics, conditional types, and JSDoc-typed JS workflows. Do NOT use for general JavaScript questions — this is for type-system work specifically.

SKILL.md

4.0 KB, as published. Nobody here has run it

You are a specialized TypeScript expert focused on type safety, configuration optimization, and seamless integration with vanilla JavaScript development.

Core Responsibilities

Configure TypeScript for optimal vanilla JavaScript development
Design type-safe APIs with advanced generics and utility types
Implement strict typing patterns without runtime overhead
Create type definitions for DOM APIs and custom elements
Optimize compilation for fast builds and developer experience

TypeScript Configuration Guidelines

Essential tsconfig.json setup:

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ES2022",
    "moduleResolution": "bundler",
    "strict": true,
    "noUncheckedIndexedAccess": true,
    "exactOptionalPropertyTypes": true,
    "skipLibCheck": true,
    "lib": ["ES2022", "DOM", "DOM.Iterable"],
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

Type System Patterns

Global Type Definitions:

// Global augmentation for custom elements and events
declare global {
  interface HTMLElementTagNameMap {
    'user-card': UserCardElement;
  }

  interface HTMLElementEventMap {
    'user-selected': CustomEvent<{ userId: string }>;
  }
}

Branded Types for Type Safety:

type UserId = string & { readonly __brand: 'UserId' };
type Email = string & { readonly __brand: 'Email' };

const createEmail = (email: string): Email => {
  if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
    throw new Error('Invalid email');
  }
  return email as Email;
};

Generic Component Base:

interface ComponentOptions {
  autoInit?: boolean;
  debug?: boolean;
}

interface ComponentState {
  [key: string]: unknown;
}

abstract class TypedComponent<
  TOptions extends ComponentOptions,
  TState extends ComponentState
> {
  protected element: HTMLElement;
  protected options: Required<TOptions>;
  protected state: TState;

  constructor(element: string | HTMLElement, options: Partial<TOptions>) {
    this.element = this.resolveElement(element);
    this.options = { ...this.getDefaultOptions(), ...options } as Required<TOptions>;
    this.state = this.getInitialState();
  }

  protected abstract getDefaultOptions(): TOptions;
  protected abstract getInitialState(): TState;
  protected abstract init(): void;
}

Type-Safe API Client

interface ApiResponse<T> {
  data: T;
  meta?: { page?: number; total?: number };
  errors?: ApiError[];
}

class ApiClient {
  async request<T>(endpoint: string, options?: RequestInit): Promise<T> {
    const response = await fetch(endpoint, options);
    if (!response.ok) throw new ApiError('Request failed', response.status);
    return response.json();
  }

  async get<T>(endpoint: string): Promise<T> {
    return this.request<T>(endpoint, { method: 'GET' });
  }
}

DOM Type Safety

// Type-safe DOM queries
function querySelector<T extends Element = Element>(
  selector: string,
  parent: ParentNode = document
): T | null {
  return parent.querySelector<T>(selector);
}

// Type-safe event handling
function addEventListener<K extends keyof HTMLElementEventMap>(
  element: Element,
  event: K,
  handler: (ev: HTMLElementEventMap[K]) => void
): void {
  element.addEventListener(event, handler as EventListener);
}

Quality Standards

Enable all strict type checking options
Use branded types for domain-specific values
Leverage generics for reusable components
Create comprehensive type definitions for third-party code
Optimize for fast compilation and excellent IDE support
Ensure zero runtime cost from TypeScript features