Instantly extract TypeScript enum keys and values into union types with our free, browser-based TypeScript enum utility tool. No setup, just paste and copy.
AI Generation Prompt
TypeScript Enum Key and Value Type Generator
Overview
A specialized, client-side developer utility designed to streamline TypeScript type safety. This tool takes a provided enum definition and instantly generates the corresponding keyof typeof union type or the union of assigned values. It is built for developers who need to quickly derive types for interfaces, props, or function parameters without manually typing out lists.
Technical Specification
- Architecture: Single-file HTML/CSS/JS application.
- Frameworks: Pure Vanilla JavaScript (ES6+).
- Styling: Tailwind CSS (via CDN) for a clean, light-mode, modern SaaS UI.
- Syntax Highlighting: Prism.js (via CDN) to provide clear visual feedback on code input and output.
- Storage: No persistence mechanisms (no localStorage, cookies, or IndexedDB).
- Sandbox Compatibility: Optimized for iframe environments (no popups, no external tracking).
Feature Set
- Live Parsing: Debounced input listener that updates the output pane as the user types or pastes their enum.
- Multiple Output Modes:
keyof typeofUnion Type:type MyKeys = keyof typeof MyEnum;- Enum Values Union Type:
type MyValues = typeof MyEnum[keyof typeof MyEnum]; - Combination View: Generate both simultaneously.
- Smart Copy Functionality: A prominent, single-click "Copy to Clipboard" button for generated code blocks with a subtle visual 'Success' feedback animation.
- Responsive Layout: A split-pane interface (Left Input / Right Output) on desktop, which stacks gracefully to a single vertical column on mobile/tablet devices.
UI/UX Design
- Color Palette:
- Background:
bg-slate-50(Clean, light gray). - Primary Accent:
text-blue-600for buttons and highlights. - Code Container:
bg-whitewith a soft borderborder-slate-200and high-quality shadowshadow-sm. - Typography: Inter/Sans-serif stack (system-ui).
- Background:
- Animations:
- Smooth fading transitions for copy notifications.
- Linear-easing for layout stacking during browser resizing.
- Interactions: No generic browser alerts. All notifications (like "Copied to clipboard!") appear as non-intrusive, timed CSS toasts in the corner of the screen.
Developer Instructions
- Do not attempt to save user inputs. Variables should remain in-memory.
- Avoid using any external libraries that require complex build steps. Stick to CDN links for Prism.js and Tailwind CSS.
- Formatting: Ensure the output code block is formatted cleanly with 2 or 4 spaces, adhering to standard TS style guides.
- Safety: Ensure all HTML injection is handled securely, treating the user input as plain text only (using
.textContentor similar) to prevent XSS if the generated code is rendered back into the DOM.
Spread the word
Files being used
Frequently Asked Questions
Everything you need to know about using this application.
Why should I use 'keyof typeof' in TypeScript?
The 'keyof typeof' pattern is a powerful TypeScript feature that allows you to derive a union type of all keys present in an enum. This ensures strict type safety by restricting variables to only the valid keys defined in your enum, preventing runtime errors and improving IDE autocomplete suggestions. By using this pattern, you eliminate the need to manually update union types whenever an enum is modified. Our tool automates the boilerplate creation of these types, allowing you to focus on logic rather than repetitive type definitions.
Is my data stored or sent to a server?
This application is built as a client-side utility and runs entirely within your browser environment. We do not use servers, databases, or cookies, ensuring that your code never leaves your machine. Your privacy is guaranteed because the tool performs all calculations locally in real-time. Since no storage (including localStorage or cookies) is implemented, the application state is completely wiped when you refresh the page. This is perfect for teams working with sensitive codebases where security and data privacy are paramount concerns.
Can this tool extract enum values as well as keys?
Yes, our tool is designed to parse TypeScript enums and extract both the keys (property names) and the values. You can easily toggle between generating a union of keys, a union of values, or both simultaneously to suit your project's specific requirements. Whether you need an 'EnumKey' type or an 'EnumValue' type, the generated code is pre-formatted and ready to be pasted directly into your TypeScript interfaces, types, or function signatures, reducing development friction significantly.
Does this tool work with complex numeric or string enums?
Our parsing engine is optimized to handle both standard numeric enums and string-based enums common in modern TypeScript projects. It detects the enum structure and generates the corresponding 'keyof typeof' or value union definitions based on standard TypeScript syntax rules. While highly accurate for standard enum definitions, the tool is designed for clean, valid TypeScript. If your enum contains unconventional formatting, we recommend ensuring your input is syntactically valid TypeScript for the most precise and reliable type extraction results.
