typescript-types

Model TypeScript types with discriminated unions and strict boundary parsing.

1|Updated Jun 20, 2026
One-click install
npx skills add https://github.com/shafibabar/SDLC-Artifact-Factory --skill typescript-types-shafibabar
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: typescript-types
Source: https://github.com/shafibabar/SDLC-Artifact-Factory/tree/main/skills/typescript-types
Command: npx skills add https://github.com/shafibabar/SDLC-Artifact-Factory --skill typescript-types-shafibabar

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill addresses the fragility of frontend applications by replacing loose, error-prone types with a rigorous, compile-time model that makes invalid UI and domain states unrepresentable.

Core Features & Use Cases

  • Discriminated Unions: Replaces boolean flag soup with tagged unions to ensure state transitions are exhaustive and predictable.
  • Boundary Parsing: Implements parse-don't-validate patterns at runtime edges to ensure data is trusted before it enters the application.
  • Branded IDs: Prevents cross-tenant data leaks by making structurally identical IDs nominally distinct at the type level.

Quick Start

Use the typescript-types skill to refactor a component state from boolean flags into a discriminated union and implement a runtime validator for incoming API data.

Frequently Asked Questions about typescript-types

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

FAQPage Schema
How do I make invalid UI states unrepresentable in TypeScript?

To make invalid UI states unrepresentable in TypeScript, replace boolean flags with discriminated unions. This ensures state transitions are exhaustive and predictable at compile time, preventing illegal combinations from being constructed.

What is the parse-don't-validate pattern for API data in TypeScript frontend?

The parse-don't-validate pattern for API data in TypeScript frontend implements boundary parsing at runtime edges. Data is parsed and transformed into trusted types before entering the application core, ensuring only validated domain models are used internally.

How do I prevent cross-tenant ID leaks in a TypeScript microfrontend?

Prevent cross-tenant ID leaks in a TypeScript microfrontend by using branded IDs. This technique makes structurally identical IDs nominally distinct at the type level, causing the compiler to reject mismatched ID assignments across different tenants.

Should I use any or unknown for strict type safety in TypeScript?

Use unknown instead of any for strict type safety in TypeScript. Unknown forces you to narrow types using type guards before operating on the data, eliminating silent failures and ensuring all runtime edge cases are explicitly handled.

Do I need strict tsconfig settings for discriminated unions and boundary parsing?

Yes, strict tsconfig settings are required for discriminated unions and boundary parsing. Strict mode enables essential compiler checks like strictNullChecks, which are necessary to enforce type safety and eliminate illegal states at compile time.

How to refactor boolean flag soup into a tagged union in TypeScript?

Refactor boolean flag soup into a tagged union in TypeScript by grouping state into a discriminated union with a common literal property. This enforces exhaustive state transitions and predictable rendering logic during frontend architecture refactoring.