writing-typescript

Generate idiomatic, strictly typed TypeScript for Node.js and React applications.

35|5|Updated Jul 5, 2025

Search Tags:#typescript #testing #frontend #react #error-handling #strict-typing #discriminated-unions

Ready to run

npx skills add https://github.com/alexei-led/claude-code-config --skill writing-typescript

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: writing-typescript
Source: https://github.com/alexei-led/claude-code-config/tree/main/skills/writing-typescript
Command: npx skills add https://github.com/alexei-led/claude-code-config --skill writing-typescript

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill enforces strict typing and modern patterns to eliminate runtime errors and messy code, helping you build scalable TypeScript and React applications that are easy to maintain and refactor.

Core Features & Use Cases

Type-Safe Patterns: Use discriminated unions for state, exhaustive switches, and the Result type for explicit error handling.
React & Full-Stack Guidance: Implement type-safe React components, hooks, and data-fetching logic with TanStack Query and Zod.
Use Case: Imagine you're modeling a data-fetching hook. Use this Skill to implement it using a discriminated union ('idle' | 'loading' | 'success' | 'error') instead of error-prone boolean flags, ensuring all states are handled.

Quick Start

Use the writing-typescript skill to convert this set of boolean state flags (isLoading, isError, data) into a single discriminated union type and update the component logic accordingly.

Frequently Asked Questions about writing-typescript

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I use discriminated unions in TypeScript to replace boolean state flags?▼

Discriminated unions combine related states into a single type with explicit variants—like `'idle' | 'loading' | 'success' | 'error'`—instead of separate boolean flags. This ensures all states are accounted for, prevents invalid combinations, and makes exhaustive type checking possible in switch statements.

What's the best way to handle errors in TypeScript with strict typing?▼

Use a Result type pattern that explicitly models success and failure outcomes, making errors part of your type signature rather than thrown exceptions. This approach forces callers to handle both cases, integrates cleanly with discriminated unions, and works well in Node.js services and React applications.

How do I configure TypeScript strict mode for a production application?▼

Enable strict mode in your tsconfig.json to enforce full type checking across your codebase. Strict mode enforces null checks, property initialization, implicit any elimination, and other rules that catch common bugs at compile time before they reach production.

When should I use interface vs type in TypeScript?▼

Interfaces are better for object contracts and public APIs, especially when you need declaration merging; types are more flexible for unions, tuples, and complex shapes. The choice depends on your architecture—this Skill covers both patterns and when each fits real-world project structures.

Can I use strict TypeScript patterns with React and TanStack Query?▼

Yes. Build type-safe React components and hooks using discriminated unions for loading states, Zod for schema validation, and Result types for explicit error handling. TanStack Query integrates cleanly with this pattern to manage async data-fetching state safely.

How do I ensure TypeScript catches all branches in a switch statement?▼

Use discriminated unions with exhaustive type checking in switch expressions. When all union variants are handled, TypeScript narrows the type to `never` at unreachable branches, so the compiler catches missing cases before runtime.