zoukankan      html  css  js  c++  java
  • 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

    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";
    }

    typescript-extend-function-with-property

    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.

  • 相关阅读:
    原生Js自适应浏览器宽度的瀑布流布局
    Fixed Gear DIY整车配色 JavaScript版制作过程
    DOM结构——两个节点之间可能存在哪些关系以及如何在节点之间任意移动
    盒模型 块级元素与行内元素 浮动元素
    Js 页面元素 简单震动效果
    CSS引入的方式有哪些? link和@import的区别?
    一道Web前端面试题 DIV放大
    js在IE和Firefox下不同之处
    Doctype? 严格模式与混杂模式如何触发这两种模式,区分它们有何意义?
    JavaScript document属性和方法
  • 原文地址:https://www.cnblogs.com/oxspirt/p/9929738.html
Copyright © 2011-2022 走看看