TypeScript/Angular2调用原生JS的桥接文件的编写

许多开发者在使用Angular2或者TypeScript开发的时候不可避免地要用到许多原生的JavaScript函数变量等,但是如何使用TypeScript调用已经封装好的JavaScript是许多开发者心中的疑惑。


如何使用TypeScript调用JavaScript呢?


流行的第三方JavaScript库

使用Angular2开发的童鞋可能会注意到,Angular2需要引用进来的许多的库文件中总会有.d.ts后缀名的文件,这个文件就是一个TypeScript调用JavaScript的桥接文件,TypeScript需要通过这个文件来识别JavaScript中的内容。
对于许多流行的第三方JavaScript库,GitHub上已经有一个开源项目编译好了他们的.d.ts桥接文件,直接下载下来便可以直接使用了。
项目地址是:https://github.com/DefinitelyTyped/DefinitelyTyped


快速生成桥接文件

但是有些JavaScript是我们开发人员自己编写的,该如何调用呢?TypeScript有一个快速生成.d.ts桥接文件的方法。

  1. 将你要生成桥接文件的.js文件修改后缀名为.ts。因为TypeScript是JavaScript的超集,所以JavaScript代码完全可以在TypeScript的文件中执行(就像C++的文件能够跑C语言一样)。

  2. 首先确保你的电脑上已经安装了TypeScript,打开“终端”(Windows下是命令行),cd到你刚刚修改后缀名的文件所在的文件夹,运行命令:
    tsc --declaration 刚刚修改后缀名的文件名(包括后缀名)。
    例如:

    tsc --declaration myJavaScript.ts
    

之后便可以看到TypeScript自动生成的.d.ts的桥接文件了。
如果在生成过程中报错,建议将要生成的文件中的JavaScript代码中实现部分全部删掉,只保留接口即可,反正生成的.d.ts文件就是一个变量和函数等的桥接文件。


手动编写桥接文件

如果通过TypeScript自动生成的.d.ts桥接文件不合适怎么办?(很正常,我从来没生成正常过,因为我的JavaScript代码是封装到一个单例里面的,TypeScript不认识单例...)
这个时候就需要我们自己手动来编写.d.ts的桥接文件了。
TypeScript官方也给出了如何编写桥接文件:https://www.tslang.cn/docs/handbook/declaration-files/introduction.html

注:.d.ts文件放在TypeScript调用JavaScript中国年是桥接文件,放在单纯的TypeScript中便是TypeScript的声明文件)

TypeScript官方给的文档很不好理解(至少我看了半天的时间才搞明白)
下面我重点说一下应该如何编写.d.ts桥接文件(只适用于TypeScript和JavaScript桥接)。

桥接文件中分为模块,接口,类,函数,变量等。所有的最外层都需要关键字declare来声明。

模块 的桥接

模块在TypeScript可以为JavaScript中的单例,匿名函数,全局的对象,全局的库等包含多个属性多个接口方法的东西,具体在何种情况应该声明为模块还主要是看个人的喜好。模块中可以声明任何东西。
单纯的模块:

declare module myModule { ... }

模块的嵌套,在一个模块中声明另一个模块可以使用以下两种方式:

declare module aModule, bModule { ... }

等于

declare module aModule {
    module bModule {
        ...
    }
    ...
}
类 的桥接

所有声明在桥接文件中的类的名称需要和JavaScript中对应的类的名称保持一致。
单纯的类的声明:

declare class myClass { ... }

类的继承:

declare class mySubClass extends myClass { ... }

如何调用:

let tempClass = new mySubClass();

模块中的类:

declare module myModule {
    class myModuleClass { ... }
}
接口 的桥接

TypeScript单独的提供了一个接口的声明,接口类似于类,不过类是要new出来的,而接口是可以直接调用的,类似于全局的函数。
单纯的接口:

declare interface myInterface { ... }

模块中的接口:

declare module myModule {
    class myModuleClass { ... }

    interface myModuleInterface { ... }
}
变量 的桥接

全局变量
全局变量需要声明变量类型,变量的名称需要和JavaScript中对应的变量的名称一致。

declare var myVariable: string;

模块中的变量:

declare module myModule {
    var myModuleVariable: string;

    class myModuleClass { ... }

    interface myModuleInterface { ... }
}

类中的变量属性,变量属性的名称需要和JavaScript中对应的类的变量属性的名称一致。

declare class myClass {
    name: string;
    id  : number;
}

接口中的变量:

declare interface myInterface {
     myInterfaceVariable: string;
}
函数 的桥接

单纯的函数的声明,函数的名称需要和JavaScript中对应的函数的名称一致,参数数量也应该一致,参数名称可以不一样:

declare function myfunction(param: string): void;

模块中的方法,方法的名称需要和JavaScript中对应的模块的方法的名称一致,参数数量也应该一致,参数名称可以不一样:

declare module myModule {
    var myModuleVariable: string;

    class myModuleClass { ... }

    interface myModuleInterface { ... }

    function myModuleFunction(param: string): void;
}

接口中的方法:

declare interface myInterface {
     myInterfaceVariable: string;

     myInterfaceFunction(param: string): void;
}

回调函数的桥接注意:
因为TypeScript中this的作用域同JavaScript中this的作用域不同,TypeScript中默认对函数声明了this的作用域。
所以我们在调用回调函数的时候必须使用=>来调用回调函数:

callbackFunction((data) => {
    // 回调函数的内容
})
桥接文件的举例

这是我之前写过的一个自己的单例模式的JavaScript文件的桥接文件,仅作参考

JavaScript代码
tempJS.js:

function inherit(subClass, superClass) {
    function F() {};
    F.prototype = superClass.prototype;
    subClass.prototype = new F();
    subClass.prototype.constructor = subClass.constructor;
}

function User() {
    this.userID   = Number;
    this.userName = String;
    this.userICON = String;
    this.isFriend = Boolean;
}

function Member() {
    User.call(this);
    this.remarkName = String;
}
inherit(Member, User);

var TempModule = (function () {
    var instantiated;
    function init() {
        return { 
            userInfo:User;
            test: function (callback) { ... },
            login: function (loginName, password) { ... }
        };
    }
    return {
        shareTemp: function () {
            if (!instantiated) {
                instantiated = init();
            }
            return instantiated;
        }
    };
})();

对应的桥接文件
tempJS.d.ts:

declare class User {
    userID   : number;
    userName : string;
    userICON : string;
    isFriend : boolean;
}

declare class Member extends User {
    remarkName : string;
}

declare module TempModule {
    interface shareTemp {
        userInfo: User;

        test(callback:Function): void;
        login(loginName: string, password: string): void;
    }
}

调用的文件:

let tempUser = new User();
tempUser.userID = 1;
tempUser.userName = "Shmily";
TempModule.shareTemp.userInfo = tempUser;
TempModule.shareTemp.test((data) => {
    // 回调函数内容
});
TempModule.shareTemp.login(tempUser.userName, "1234");
如何调用呢?

老式的方法是在需要用到的地方写:

/// 

但是这样很麻烦。不过在Angular2项目中我们有了一个简单的方法,在项目中的tsconfig.json文件中这样写:

{  
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "lib": [ "es2015", "dom" ],
        "noImplicitAny": true,
        "suppressImplicitAnyIndexErrors": true,
        "types": ["./library/ArrowIM/ArrowIM.d.ts"]
}}

只需要在types中添加你想要引用的.d.ts文件,Angular2会在加载项目的时候自动去加载,这样就再也不用写那么多的///了。

你可能感兴趣的:(TypeScript/Angular2调用原生JS的桥接文件的编写)