背景
总所周知，TS需要编译成JS才能在浏览器上跑，TS也能够调用JS的方法。但是，有一个现成的第三方JS类库摆在面前，让它如何能在TS中使用，很多刚入坑的朋友往往不得其门而入。下面我就讲讲我的办法吧。
1、直接翻译
看了上面4个字，大家可能不会不约而同地眉头一皱，立刻开喷：“喔靠，馊主意！”。我承认，这的确是个笨办法，但是我的确这么做过。笨办法也是办法，重剑无锋，大巧不工。
对于一些JS库只有不到200-300行代码，直接翻译成TS又何妨呢？自己用TS重写，跟找typings（很多不一定能找到）或者自己写*.d.ts的时间其实差不了多少。自己动手，也能加深对库的理解，夯实自己。
2、页面引入 + 全局定义
如果对第一条不满意，不用着急，咱还有别的办法。第二招，其实也很简单粗暴。所谓“页面引入”就是最常规的用<script>标签把js直接在html页面引入，然后“全局定义”，就是声明一个变量跟JS的全局变量名或者方法名一样。
下面用大家非常熟悉的jQuery举例吧。
页面里直接用<script>标签引入jquery.js
<html>
<head>
<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
......
TS中声明全局变量
$，然后就可以直接开撸
declare var $;
class App {
init(){
$("#msg").html("jquery引用成功!");
}
}
简单粗暴的副作用就是不够优雅，声明的全局变量$的类型只能是any，这意味着还是弱类型变量，因此IDE中没有任何的方法和属性还有类型的提示。因而，完全失去了写TS的乐趣。下面重点说说怎样做到优雅。
3、类型定义文件（.d.ts）
相信阁下如果看本文之前百度过，肯定看过这种方法。说明，这是主流。所以，我也准备重点详细地介绍一下。
- 首先，什么是类型定义文件？
应该有点类似于C++后缀名为.h的头文件，用于声明JS主文件的函数接口和变量类型的定义，并且把这些定义暴露给TS使用。有了.d.ts的定义之后，TS就能感知到JS库相关的代码提示了。
- 接着，如何得到.d.ts文件？
1.可以先去DefinitelyTyped找找碰碰运气，一般很流行的库也许会有。
2.用npm的typings查找获取的，其实跟上面没什么两样。
3.网上还能还有一些工具，据说根据js库能够反向生成.d.ts。我试了都不靠谱，如果是C#生成.d.ts的成功率我是敢打包票，但是对JS我就只能呵呵了。
4.最后，“拿来主义”都不行的情况下，只有自己动手丰衣足食了。
自己做.d.ts之前，先分析一下js库的代码，看看自己需要什么接口就定义什么。那些自己用不着的大可放过。
例如，我早前做的marked.js，节选一些代码：
marked.options =
marked.setOptions = function(opt) {
merge(marked.defaults, opt);
return marked;
};
marked.getDefaults = function () {
return {
baseUrl: null,
breaks: false,
gfm: true,
headerIds: true,
headerPrefix: '',
highlight: null,
langPrefix: 'language-',
mangle: true,
pedantic: false,
renderer: new Renderer(),
sanitize: false,
sanitizer: null,
silent: false,
smartLists: false,
smartypants: false,
tables: true,
xhtml: false
};
};
marked.defaults = marked.getDefaults();
/**
* Expose
*/
marked.Parser = Parser;
marked.parser = Parser.parse;
marked.Renderer = Renderer;
marked.TextRenderer = TextRenderer;
marked.Lexer = Lexer;
marked.lexer = Lexer.lex;
marked.InlineLexer = InlineLexer;
marked.inlineLexer = InlineLexer.output;
marked.Slugger = Slugger;
marked.parse = marked;
这一段，很直观地看出它有什么接口可以暴露出来了。其实，我只需要一个parse的方法足矣。那么，我的marked.d.ts就会这么写。
interface MDOption {
baseUrl?: string;
breaks?: boolean;
gfm?: boolean;
headerIds?: boolean;
headerPrefix?: string;
highlight?: any;
langPrefix?: string;
mangle?: boolean;
pedantic?: boolean;
sanitize?: boolean;
sanitizer?: any;
silent?: boolean;
smartLists?: boolean;
smartypants?: boolean;
tables?: boolean;
xhtml?: boolean;
}
interface MarkDown {
parse(src: string, opt?: MDOption, callback?: Function);
}
declare module "marked" {
export = marked;
}
declare var marked: MarkDown;
方法定义只有MarkDown.parse一个，外加一个MDOption的结构定义。这样，我在TS调用就能用得很舒服了！至于，最后几行的declare为什么那么写？那是TS语法的套路，我这里就不多做解释，能用就行。好奇宝宝们可以进入传送门深入理解一下。
最后说一下，.d.ts怎么使用。直接上代码：
///<reference path="../typings/marked.d.ts" />
import * as marked from "marked";
var md_html = marked.parse("### Hello TypeScript");
1.引用路径
2.引入模块
3.使用方法
很简单的三行代码
至于，主体库mark.js怎么引入页面，方法很多，八仙过海各显神通。我用的是require.js。
require.config({
paths: {
'jquery': '//g.alicdn.com/sj/lib/jquery/dist/jquery.min',
'marked': '/js/lib/marked.min'
}
});
OK，讲完，收工。
3人点赞
作者：ChenReal
链接：https://www.jianshu.com/p/3b154d6e231b
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
