Interface Merger
Paste two or more TypeScript interfaces and merge them four different ways — a flattened single interface, an intersection type, an extends chain, or a deep merge that recurses into nested object literals. The differentiator is conflict detection: when the same property is declared with different types it is flagged in a report card and you choose how to resolve it (keep-first, keep-last, or union the types). Everything updates live and is captured in a shareable URL.
About this ToolHow it works, benefits & use casesTap to collapse
Paste two or more TypeScript interfaces and merge them four different ways from one live editor. A tolerant parser finds every interface and object type alias in the input - no delimiter required - and you switch between a flattened merged interface, an intersection type (A & B), an extends chain, or a deep merge that recurses into nested object literals and combines them field by field. The headline feature is conflict detection: when the same property name is declared with different types across your interfaces, it is listed in a dedicated conflict report card so nothing is silently dropped, and you choose how to resolve it - keep the first declaration, keep the last, or union the clashing types into number | string. Extra options make every property optional, sort properties alphabetically, dedupe identical fields, and toggle the export keyword. The output, options, and parsed declaration summary all update instantly, and the whole setup is captured in a shareable URL.
How to Use
- 1Paste two or more interface or object type declarations into the editor, or load one of the built-in examples.
- 2Pick a merge strategy: merged interface, intersection type, extends chain, or deep merge.
- 3If properties clash, choose a conflict resolution - union the types, keep first, or keep last - and read the conflict report card.
- 4Toggle make-all-optional, sort properties, dedupe identical props, and the export keyword to taste.
- 5Name the merged result, then copy, download, or share the generated TypeScript.
Key Benefits
- Four merge strategies from one input: merged interface, intersection, extends chain, and deep merge
- Conflict detection reports every property declared with differing types instead of hiding the clash
- Three conflict resolutions: union the types, keep the first declaration, or keep the last
- Deep merge recurses into nested object literals and combines them field by field
- Tolerant parser finds all interfaces and object type aliases with no delimiter required
- Make-all-optional, sort, dedupe, and export toggles for fine control over the result
- Live output, a parsed-declaration summary, and a shareable URL - all client-side
Common Use Cases
- Flattening separate User, Profile, and Settings interfaces into one UserProfile type
- Resolving a property type clash between two API contracts with an explicit union
- Combining two shapes of the same nested object via a deep merge
- Producing an all-optional variant of a merged type for a patch or update payload
- Deciding between a flattened interface, an intersection, or an extends chain before committing
Merged interface (flatten properties)
export interface Merged {
id: number | string;
status: string;
active: boolean;
}1 property conflict
idin Base, Extended:numbervsstring
Interfaces
Paste two or more interface or object type declarations — no delimiter needed, the parser finds every block.
Strategy & options
How to resolve a property declared with different types.
add ? to every field
alphabetical
collapse matching props
prefix export
Parsed declarations
Baseinterface 2 propsExtendedinterface 2 props
Four ways to merge
A merged interface flattens every property into one declaration. An intersection (A & B) and an extends chain defer the combination to the compiler. A deep merge recurses into nested object literals so two shapes of the same property are combined field by field rather than overwritten.
Conflicts are surfaced, not silently dropped
When the same property name appears with different types it is listed in the conflict report. You decide how to resolve it — keep the first declaration, keep the last, or combine them into a union (number | string).
Was this tool helpful?
Share Your Experience
Help others discover this tool!
Related tools
- TypeScript FormatterFormat and beautify TypeScript code
- JSON to TypeScriptGenerate TypeScript interfaces from JSON
- Merge Conflict ResolverVisualize and resolve Git merge conflicts
- Intersection Observer GeneratorGenerate IntersectionObserver code from a use-case picker (reveal, lazy-load, infinite scroll, scroll-spy, sticky, video autoplay) with a live trigger-zone diagram and vanilla/React/Vue output
- Type Guard GeneratorGenerate recursive runtime type guards (and assertion functions) from a TS interface, with a live validator that tests any JSON value
- Zod Schema GeneratorSmart JSON-to-Zod: merges array samples for optional/nullable/enum/format inference, emits the z.infer type, and validates any payload live
You do not need a delimiter. The parser scans the whole input and finds every interface declaration and every object type alias (type X = { ... }), so you can paste your interfaces back to back. At least two declarations are needed for a meaningful merge, though it will work with one.
Merged interface flattens all properties into a single concrete interface. Intersection emits type Name = A & B and extends emits interface Name extends A, B {}, both of which defer the actual combination to the TypeScript compiler. Deep merge behaves like the merged interface but recurses into nested object literals, combining a property like meta: { ... } field by field instead of letting one declaration overwrite the other.