Declaration Merging with TypeScript

原文：https://blog.oio.de/2014/03/21/declaration-merging-typescript/

 

Why might you need this?

There can be several scenarios where this might be required. One of the most common ones is when you want to extend an existing JavaScript library that comes with a type definition.

---------------------------------------------------

Declaration Merging with TypeScript

Posted on 21. March 2014 by Sönke Sothmann

Declaration merging is a very interesting feature of TypeScript, the statically typed superset of JavaScript.
As you will see, different things can be merged in TypeScript.
The merging is always based on matching names, so as soon as two e.g. interfaces have the same name (and live in the same namespace), they will get merged.

What can be merged in TypeScript?

In TypeScript it is possible two merge
– mutliple interfaces
– multiple modules
– modules with classes
– modules with functions
– modules with enums

 

Merging multiple interfaces

To merge multiple interfaces, simply give them the same name.

1 2 3 4 5 6 7 8

interface Foo {     doIt(); }   interface Foo {     doSomething();     doSomethingDifferent(); }

This will result in a merged interface as follows.

1 2 3 4 5

interface Foo {     doSomething();     doSomethingDifferent();     doIt(); }

As you can see, the two interfaces are merged in reverse order, but the order of the declarations in each individual interface is not changed.
A reverse merge order is important if you want to extend a library.

Merging multiple modules

Modules with the same name will merge their members, effectively creating a common namespace.

1 2 3 4 5 6 7

module mod {     export class Foo { } }   module mod {     export class Bar extends Foo { } }

Merging modules is a common task if you use internal modules with TypeScript. It enables you two use the one class per file best practice while placing multiple classes inside the same namespace.

If you have a Java background, merging modules can be compared to putting multiple classes inside the same package.

Merging modules with classes, functions and enums

You can merge modules with classes, functions and enums. This might sound strange, but it allows you to extend these constructs with additional properties in a typesafe way.

Here is an example on how to extend a function with properties, which is a common practice in the JavaScript world:

1 2 3 4 5 6 7

function greet() {     console.log("Hello " + greet.target); }   module greet {     export var target = "World"; }

Here is another example that extends an enum with a method:

1 2 3 4 5 6 7 8 9 10 11 12 13

enum UserType {     ADMIN, USER, GUEST }   module UserType {     export function parse(value: string): UserType {         var UT: any = UserType;         if(typeof UserType[value] === "undefined") {             throw new Error("unknown value of enum UserType: " + value);         }         return UserType[value];     } }

As you can see in another blog post, merging a class with a module containing another class can be used to create inner classes.

What cannot be merged in TypeScript?

In the current TypeScript version (1.0RC at the time of writing), it is not possible to merge the following:
– multiple classes
– classes with variables
– classes with interfaces

This may change in future TypeScript versions.
Mixins could be an alternative approach for these things.

For additional information, take a look at the wiki page at Codeplex.