客服电话
APP下载
迪恩网络APP
随时随地掌握行业动态
官方微信
扫描二维码
关注迪恩网络微信公众号
背景总所周知，TS需要编译成JS才能在浏览器上跑，TS也能够调用JS的方法。但是，有一个现成的第三方JS类库摆在面前，让它如何能在TS中使用，很多刚入坑的朋友往往不得其门而入。下面我就讲讲我的办法吧。 1、直接翻译 看了上面4个字，大家可能不会不约而同地眉头一皱，立刻开喷：“喔靠，馊主意！”。我承认，这的确是个笨办法，但是我的确这么做过。笨办法也是办法，重剑无锋，大巧不工。 2、页面引入 + 全局定义 如果对第一条不满意，不用着急，咱还有别的办法。第二招，其实也很简单粗暴。所谓“页面引入”就是最常规的用
<html>
<head>
<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
declare var $; class App { init(){ $("#msg").html("jquery引用成功!"); } }
简单粗暴的副作用就是不够优雅，声明的全局变量 3、类型定义文件（.d.ts）相信阁下如果看本文之前百度过，肯定看过这种方法。说明，这是主流。所以，我也准备重点详细地介绍一下。
自己做.d.ts之前，先分析一下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;
这一段，很直观地看出它有什么接口可以暴露出来了。其实，我只需要一个 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;
方法定义只有 最后说一下，.d.ts怎么使用。直接上代码： ///<reference path="../typings/marked.d.ts" /> import * as marked from "marked"; var md_html = marked.parse("### Hello TypeScript");
1.引用路径 至于，主体库mark.js怎么引入页面，方法很多，八仙过海各显神通。我用的是require.js。 require.config({ paths: { 'jquery': '//g.alicdn.com/sj/lib/jquery/dist/jquery.min', 'marked': '/js/lib/marked.min' } });
OK，讲完，收工。 作者：ChenReal 链接：https://www.jianshu.com/p/3b154d6e231b 来源：简书 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。 |
请发表评论