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.

原文地址：https://www.cnblogs.com/oxspirt/p/9929738.html

时间： 2024-11-13 06:54:24

Declaration Merging with TypeScript的相关文章

TypeScript Declaration Merging(声明合并)

TypeScript中有一些独特的概念,来自需要描述JavaScript对象类型发生了哪些变化.举个例子,最为独特的概念就是"声明合并".理解了这个概念将会对你在当前JavaScript项目中使用TypeScript开发很有帮助.同时也打开了了解更高级抽象概念的门. 就本文目的而言,声明合并是指编译器执行将两个名称相同的声明合并到一个单独的声明里的工作.合并后的声明具有两种原始声明的特性.当然,声明合并不限于合并两个声明,需要合并的声明数量可任意(注意:他们之间具有相同名称). 基本概

TypeScript手册翻译系列12-编写.d.ts文件

Writing .d.ts files When using an external JavaScript library, or new host API, you'll need to use a declaration file (.d.ts) to describe the shape of that library. This guide covers a few high-level concepts specific to writing definition files, the

TypeScript: type alias 与 interface

官方文档中有关于两者对比的信息,隐藏在 TypeScript Handbook 中,见 Interfaces vs. Type Aliases 部分. 但因为这一部分很久没更新了,所以其中描述的内容不一定全对. 比如, 区别点之一:Type Alias 不会创建新的类型,体现在错误信息上. One difference is, that interfaces create a new name that is used everywhere. Type aliases don't create

TypeScript官方文档翻译-5

1.1 Ambient Declarations 1.1 环境声明 An ambient declaration introduces a variable into a TypeScript scope, but has zero impact on the emitted JavaScript program. Programmers can use ambient declarations to tell the TypeScript compiler that some other co

[TypeScript] 建置输出单一JavaScript档案(.js)与Declaration档案(.d.ts)

[TypeScript] 建置输出单一JavaScript档案(.js)与Declaration档案(.d.ts) 问题情景 开发人员使用Visual Studio来开发TypeScript,可以很方便快速的将项目里的所有TypeScript档案(.ts),一口气全部编译成为JavaScript档案(.js),用以提供html网页使用.但是当软件项目越来越庞大的时候,过多的.js档引用,会增加开发.html档案时的负担;并且每个.js档之间的相依关系,也很容易因为引用顺序的错误,而造成不可预期的

今天第一次接触到typescript，看了第一个知识点就是变量的声明，来回忆回忆，做做笔记

以前只用过JavaScript原生写网站特效,今天还是第一次听说typescript的,然后看了一下它的基本知识,感觉很像Java,真的太像了,但是又有不同点.很让我惊奇看到的第一个知识点就和以前不同,很新鲜. 变量的声明: 在typescript中我知道的变量的声明有两种(除了var),分别是let和const.以前我经常用的是var,let和var很相似,const和他们不一样,让我惊讶的是它居然能阻止对变量的再次赋值. 因为typescript是JavaScript的超集,所以JavaSc

[TypeScript] Generating Definition Files

TypeScript allows you to generate definition files for your own libraries. This lesson shows you how to organize your project and generate the definition files so that others projects can use your library with TypeScript. If you're writing a library

0前端 框架 库_千万别去碰js呀 混合APP_webAPP_美工 选有类型的语言，比如TypeScript

component 组件 成分; 零件; [数]要素; 组分; Angular2怎么使用第三方的component库(如 jquery,easyUI ,Bootstrap 等) PWA  增强web app helloWorld跑起来了,之前失败是因为Chrome服务器插件要FQ才能下载 https://developers.google.cn/web/fundamentals/getting-started/codelabs/your-first-pwapp/ 安装谷歌插件 web-serve

在 Typescript 2.0 中使用 @types 类型定义

在 Typescript 2.0 中使用 @type 类型定义 基于 Typescript 开发的时候,很麻烦的一个问题就是类型定义.导致在编译的时候,经常会看到一连串的找不到类型的提示.解决的方式经过了许多的变化,从 DefinitelyTyped 到 typings.最后是 @types.在 Typescript 2.0 之后,推荐使用 @types 方式. DefinitelyTyped 这个工具已经不被推荐,仅作介绍. 多数来自 javascript 的库是没有 TypeScript 类