Declaration Merging
In this page:
interface Name {
property1: type;
}
interface Name {
property2: type;
}Merging Interfaces
Two interfaces declared with the same name are automatically merged by TypeScript, so their members are combined into a single effective interface rather than one silently overwriting the other.
Example: Merging Interfaces
interface Box {
height: number;
}
interface Box {
width: number;
}
const b: Box = { height: 10, width: 20 };
console.log(b);Merging Interface Methods
Interface declarations can contribute methods as well as properties to the merged result, so splitting an interface's definition across multiple declarations still produces one complete combined shape.
Example: Merging Interface Methods
interface Logger {
log(msg: string): void;
}
interface Logger {
warn(msg: string): void;
}
const logger: Logger = {
log: (msg) => console.log(msg),
warn: (msg) => console.log("WARN:", msg),
};
logger.warn("careful");Namespace Merging
Namespace declarations sharing the same name can also merge, allowing related members to be added to a namespace incrementally from more than one place in the codebase.
Example: Namespace Merging
namespace Utils {
export const a = 1;
}
namespace Utils {
export const b = 2;
}
console.log(Utils.a, Utils.b);Namespace and Class Merging
A namespace can merge with a class declaration of the same name, letting exported namespace members act as static-like properties attached to that class.
Example: Namespace and Class Merging
class Album {
constructor(public title: string) {}
}
namespace Album {
export const defaultTitle = "Untitled";
}
console.log(Album.defaultTitle);Merging and Type Safety
Declaration merging still follows TypeScript's normal type checking rules; all required members from every merged declaration must ultimately be satisfied wherever the merged type is used.
Example: Merging and Type Safety
interface Config {
host: string;
}
interface Config {
port: number;
}
const config: Config = { host: "localhost", port: 8080 };
console.log(config);- Declaring two
typealiases with the same name and expecting them to merge, when onlyinterfacedeclarations merge and type aliases give a duplicate identifier error. - Giving merged interface members conflicting types, like
height: numberandheight: string, which is an error. - Forgetting that a merged interface requires all members, so an object literal with only
heightfails to satisfyBox.
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: