TypeScript Interface Generator
Write the properties of an object as name: type lines and get a TypeScript interface with optional, readonly and nullable properties, inheritance and doc comments. The generator can also write a type guard function that checks unknown data at runtime, for example an API response, and an example object that shows the shape at a glance.
- Runs in your browser
- No sign-up
- Free to use
How to use TypeScript Interface Generator
- Enter the interface name and any interfaces it extends.
- List the properties as name: type.
- Choose readonly, type guard and example options.
- Copy the TypeScript into your project.
TypeScript Interface Generator features
Property modifiers
Optional (name?), nullable (type?), readonly.
Neutral types
int and float become number, T[] arrays, map<K, V> Record.
Type guard
isUser(value): value is User with checks for every property.
Example object
A typed example with sensible sample values.
Doc comments
Comments after // become TSDoc comments.
Inheritance
extends one or more interfaces.
When to use TypeScript Interface Generator
- Describing API responses and request bodies.
- Defining component props in React or Vue.
- Validating data from localStorage, files or messages at runtime.
- Documenting the shape of configuration objects.
TypeScript Interface Generator FAQ
What is the difference between name? and type??
name?: string means the property may be missing (undefined). name: string | null means it is always present but may be null. APIs use both, so the generator supports both.
Why do I need a type guard?
TypeScript types are removed when the code is compiled. Data from outside, such as JSON from an API, is not checked unless your code checks it; the guard does that and narrows the type for the compiler.
How deep does the guard check?
Primitive properties, dates and arrays of primitives are checked fully. Nested custom types are checked to be objects; call their own guards for a deep check.
Should I use interface or type?
Both describe object shapes. Interfaces can be extended and merged; type aliases can also express unions. The TypeScript Type Generator covers type aliases.
Can I generate from JSON instead?
Yes, the JSON to TypeScript tool infers interfaces from example JSON.
Is anything uploaded?
No. Everything runs in your browser.
Interfaces and runtime checks
An interface describes the shape of an object: which properties it has, their types and whether they are optional or read-only. TypeScript uses this description to check code at compile time, catching misspelled property names, missing fields and wrong types before the program runs. Interfaces are the most common way to model API data, component props and configuration in TypeScript projects.
The generator takes properties in a compact notation. A question mark after the name makes the property optional; a question mark after the type adds | null; readonly in front prevents reassignment. Neutral type names map to TypeScript: int and float become number, date becomes Date, any becomes unknown, which is the safe choice, and map<string, T> becomes Record<string, T>.
Types exist only at compile time, which matters at the boundaries of a program. A JSON response is typed as whatever the code claims, even if the server sends something else. A type guard is a function that checks a value at runtime and tells the compiler what it is when the check passes. The generated guard checks each property with typeof, Number.isInteger, Array.isArray or instanceof, accepting undefined for optional and null for nullable properties.
An example object is useful in tests, documentation and Storybook stories, and it doubles as a check that the interface is what you meant: if the example does not compile, the interface needs adjusting.
Comments written after // become doc comments above the property, which editors show on hover. Interfaces can extend others, such as a BaseEntity with id and timestamps, to keep shared properties in one place.