• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

[转]纯TypeScript开发Web前端(二)如何引入JS库

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

背景

        总所周知,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,讲完,收工。



作者:ChenReal
链接:https://www.jianshu.com/p/3b154d6e231b
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
 

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
TypeScript学习(四)声明文件和declare关键字发布时间:2022-07-18
下一篇:
vue + typescript 项目起手式发布时间:2022-07-18
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap