許多開發(fā)者在使用Angular2或者TypeScript開發(fā)的時(shí)候不可避免地要用到許多原生的JavaScript函數(shù)變量等冰木，但是如何使用TypeScript調(diào)用已經(jīng)封裝好的JavaScript是許多開發(fā)者心中的疑惑竭望。
如何使用TypeScript調(diào)用JavaScript呢？
流行的第三方JavaScript庫(kù)
使用Angular2開發(fā)的童鞋可能會(huì)注意到，Angular2需要引用進(jìn)來(lái)的許多的庫(kù)文件中總會(huì)有.d.ts后綴名的文件父阻，這個(gè)文件就是一個(gè)TypeScript調(diào)用JavaScript的橋接文件杜窄，TypeScript需要通過(guò)這個(gè)文件來(lái)識(shí)別JavaScript中的內(nèi)容。
對(duì)于許多流行的第三方JavaScript庫(kù)蚌本，GitHub上已經(jīng)有一個(gè)開源項(xiàng)目編譯好了他們的.d.ts橋接文件盔粹，直接下載下來(lái)便可以直接使用了隘梨。
項(xiàng)目地址是：https://github.com/DefinitelyTyped/DefinitelyTyped
快速生成橋接文件
但是有些JavaScript是我們開發(fā)人員自己編寫的，該如何調(diào)用呢舷嗡？TypeScript有一個(gè)快速生成.d.ts橋接文件的方法轴猎。
將你要生成橋接文件的
.js文件修改后綴名為.ts。因?yàn)門ypeScript是JavaScript的超集进萄，所以JavaScript代碼完全可以在TypeScript的文件中執(zhí)行（就像C++的文件能夠跑C語(yǔ)言一樣）捻脖。-
首先確保你的電腦上已經(jīng)安裝了TypeScript，打開“終端”（Windows下是命令行）中鼠，
cd到你剛剛修改后綴名的文件所在的文件夾可婶，運(yùn)行命令：
tsc --declaration 剛剛修改后綴名的文件名（包括后綴名）。
例如：tsc --declaration myJavaScript.ts
之后便可以看到TypeScript自動(dòng)生成的.d.ts的橋接文件了援雇。
如果在生成過(guò)程中報(bào)錯(cuò)矛渴，建議將要生成的文件中的JavaScript代碼中實(shí)現(xiàn)部分全部刪掉，只保留接口即可惫搏，反正生成的.d.ts文件就是一個(gè)變量和函數(shù)等的橋接文件具温。
手動(dòng)編寫橋接文件
如果通過(guò)TypeScript自動(dòng)生成的.d.ts橋接文件不合適怎么辦？（很正常筐赔，我從來(lái)沒生成正常過(guò)桂躏，因?yàn)槲业腏avaScript代碼是封裝到一個(gè)單例里面的，TypeScript不認(rèn)識(shí)單例...）
這個(gè)時(shí)候就需要我們自己手動(dòng)來(lái)編寫.d.ts的橋接文件了川陆。
TypeScript官方也給出了如何編寫橋接文件：https://www.tslang.cn/docs/handbook/declaration-files/introduction.html
注：
.d.ts文件放在TypeScript調(diào)用JavaScript中國(guó)年是橋接文件剂习，放在單純的TypeScript中便是TypeScript的聲明文件）
TypeScript官方給的文檔很不好理解（至少我看了半天的時(shí)間才搞明白）
下面我重點(diǎn)說(shuō)一下應(yīng)該如何編寫.d.ts橋接文件（只適用于TypeScript和JavaScript橋接）。
橋接文件中分為模塊较沪，接口鳞绕，類，函數(shù)尸曼，變量等们何。所有的最外層都需要關(guān)鍵字declare來(lái)聲明。
模塊 的橋接
模塊在TypeScript可以為JavaScript中的單例控轿，匿名函數(shù)冤竹，全局的對(duì)象，全局的庫(kù)等包含多個(gè)屬性多個(gè)接口方法的東西茬射，具體在何種情況應(yīng)該聲明為模塊還主要是看個(gè)人的喜好鹦蠕。模塊中可以聲明任何東西。
單純的模塊：
declare module myModule { ... }
模塊的嵌套在抛，在一個(gè)模塊中聲明另一個(gè)模塊可以使用以下兩種方式：
declare module aModule, bModule { ... }
等于
declare module aModule {
module bModule {
...
}
...
}
類 的橋接
所有聲明在橋接文件中的類的名稱需要和JavaScript中對(duì)應(yīng)的類的名稱保持一致钟病。
單純的類的聲明：
declare class myClass { ... }
類的繼承：
declare class mySubClass extends myClass { ... }
如何調(diào)用：
let tempClass = new mySubClass();
模塊中的類：
declare module myModule {
class myModuleClass { ... }
}
接口 的橋接
TypeScript單獨(dú)的提供了一個(gè)接口的聲明，接口類似于類，不過(guò)類是要new出來(lái)的肠阱，而接口是可以直接調(diào)用的票唆，類似于全局的函數(shù)。
單純的接口：
declare interface myInterface { ... }
模塊中的接口：
declare module myModule {
class myModuleClass { ... }
interface myModuleInterface { ... }
}
變量 的橋接
全局變量
全局變量需要聲明變量類型屹徘，變量的名稱需要和JavaScript中對(duì)應(yīng)的變量的名稱一致走趋。
declare var myVariable: string;
模塊中的變量：
declare module myModule {
var myModuleVariable: string;
class myModuleClass { ... }
interface myModuleInterface { ... }
}
類中的變量屬性，變量屬性的名稱需要和JavaScript中對(duì)應(yīng)的類的變量屬性的名稱一致噪伊。
declare class myClass {
name: string;
id : number;
}
接口中的變量：
declare interface myInterface {
myInterfaceVariable: string;
}
函數(shù) 的橋接
單純的函數(shù)的聲明吆视，函數(shù)的名稱需要和JavaScript中對(duì)應(yīng)的函數(shù)的名稱一致，參數(shù)數(shù)量也應(yīng)該一致酥宴，參數(shù)名稱可以不一樣：
declare function myfunction(param: string): void;
模塊中的方法啦吧，方法的名稱需要和JavaScript中對(duì)應(yīng)的模塊的方法的名稱一致，參數(shù)數(shù)量也應(yīng)該一致拙寡，參數(shù)名稱可以不一樣：
declare module myModule {
var myModuleVariable: string;
class myModuleClass { ... }
interface myModuleInterface { ... }
function myModuleFunction(param: string): void;
}
接口中的方法：
declare interface myInterface {
myInterfaceVariable: string;
myInterfaceFunction(param: string): void;
}
回調(diào)函數(shù)的橋接注意：
因?yàn)門ypeScript中this的作用域同JavaScript中this的作用域不同授滓，TypeScript中默認(rèn)對(duì)函數(shù)聲明了this的作用域。
所以我們?cè)谡{(diào)用回調(diào)函數(shù)的時(shí)候必須使用=>來(lái)調(diào)用回調(diào)函數(shù)：
callbackFunction((data) => {
// 回調(diào)函數(shù)的內(nèi)容
})
橋接文件的舉例
這是我之前寫過(guò)的一個(gè)自己的單例模式的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;
}
};
})();
對(duì)應(yīng)的橋接文件
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;
}
}
調(diào)用的文件：
let tempUser = new User();
tempUser.userID = 1;
tempUser.userName = "Shmily";
TempModule.shareTemp.userInfo = tempUser;
TempModule.shareTemp.test((data) => {
// 回調(diào)函數(shù)內(nèi)容
});
TempModule.shareTemp.login(tempUser.userName, "1234");
如何調(diào)用呢般堆？
老式的方法是在需要用到的地方寫：
/// <reference path="你的.d.ts的文件路徑" />
但是這樣很麻煩。不過(guò)在Angular2項(xiàng)目中我們有了一個(gè)簡(jiǎn)單的方法诚啃，在項(xiàng)目中的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會(huì)在加載項(xiàng)目的時(shí)候自動(dòng)去加載，這樣就再也不用寫那么多的///了始赎。
