许多开发者在使用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桥接文件的方法。
将你要生成桥接文件的
.js文件修改后缀名为.ts。因为TypeScript是JavaScript的超集，所以JavaScript代码完全可以在TypeScript的文件中执行（就像C++的文件能够跑C语言一样）。首先确保你的电脑上已经安装了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");
如何调用呢？
老式的方法是在需要用到的地方写：
/// <reference path="你的.d.ts的文件路径" />
但是这样很麻烦。不过在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会在加载项目的时候自动去加载，这样就再也不用写那么多的///了。
