• 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.

  • 相关阅读:
    wc项目
    随笔之——伪类选择器:nthchild(n) 与 nthoftype(n)的区别!!!
    随笔之——浮动(float)的影响及其清除、、clear与overflowhidden清除float的不同!!!
    随笔之——各大热门网站search 搜索框的写法,浅析!
    一个简单的注册页面
    自我介绍、目标
    position的6个属性的实验和相关分析
    第二次作业
    第三次作业
    第一次作业
  • 原文地址:https://www.cnblogs.com/oxspirt/p/9929738.html
Copyright © 2020-2023  润新知