任逍遥

 找回密码
 立即注册
查看: 31006|回复: 100

通过引用TypeScript定义来提高你的Javascript开发能力

    [复制链接]
  • TA的每日心情
    郁闷
    2022-12-4 03:02
  • 签到天数: 495 天

    连续签到: 2 天

    [LV.9]妙领天机

    727

    主题

    3612

    帖子

    5084

    积分

    VIP会员

    Rank: 16Rank: 16Rank: 16Rank: 16

    积分
    5084
    发表于 2018-7-23 20:40:27 | 显示全部楼层 |阅读模式

    马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

    您需要 登录 才可以下载或查看,没有帐号?立即注册

    x

      其实事情是这样的,小编这几天闲来没事做,老早之前就听说TypeScript是一种更容易地编写javascript的一种超集语言(注意是“超集”而非“超级”),并且完美支持最新的EcmaScript2016标准和能够运行在任何的主流IDE工具上,于是乎我也花了几个小时的时间来学习TypeScript,通过学习发现,其实还真乃神器也,做前端的人都知道javascript是种弱类型的语言,虽然js很简单,但调试起来也是比较麻烦的,开发的时候也没有像后端语言那样完美的语法提示和代码自动完成,这确实很头痛,然而有的人说写js文件的时候在头部添加这样的东西就能让IDE智能感知了:
      ///<reference path="/Scripts/jquery-3.1.1.js"/>
      但我也试过了,然并卵,依然在写代码的时候函数一样的被当作了属性来进行提示,虽然是要比以前要智能一点了,但作为后端语言为母语又转前端大牛的我(呵呵~),这怎么能满足我对代码智能感知的体验呢!:

      我们知道IDE对后端语言的智能感知能完美支持的原因在于后端语言是强类型的,编辑器通过强大的反射系统将我们正在操作的对象即时的反射来得到我们需要的字段属性和方法,而js是弱类型的,你让它怎么去反射,对象即方法,方法即对象,编辑器他拿到的成员他也不知道这到底是方法还是属性啊,而需要我们人为地自己去判断是方法还是属性;所以我也一直在苦思这件事情,咋个才能让IDE完美地支持对js的智能感知呢?
      比如像这样的,看图标一目了然谁是属性谁是方法了,那该多好啊:

      直到这两天学习TypeScript的时候发现了,用TypeScript来写js代码确实是极致体验啊,但这里不是教大家TypeScript了哈,有兴趣的童鞋可以去微软官方的Channel9进行学习,好了,回归正题;
      在我学习TypeScript的过程中发现,其实TypeScript的智能感知原理在于TypeScript它的编译器依赖了一系列的xxx.d.ts这样的文件,于是乎我就想,既然TypeScript作为javascript的超集,那这么一系列的d.ts文件是否也能对javascript起作用呢?!通过实践告诉我是可以的。
      好了,接下来将进入重头戏,我将以两款IDE作为抛砖引玉,告诉大家如何让你的IDE支持对js的智能感知:
      宇宙级的开发工具VisualStudio
      轻量级的前端开发神器VisualStudioCode
      VisualStudio实现对Javascript的智能感知
      对于VisualStudio来说就相当简单了,因为它太智能了,只需要一步就能搞定:
      首先,新建好你的web项目,然后打开nuget程序包管理器,搜索你要实现智能感知的js库,如jquery的则搜索“jquery.TypeScript”,然后找到对应的nuget包,安装到项目中即可,

      然后你就会发现项目的Scripts目录下多了一个叫typings的文件夹,展开你就发现原来就是几个d.ts文件,现在你再写js代码的时候,你就会发现,这才是完美的智能感知嘛。(原来这么简单,以前怎么也想不到呢)
      VisualStudio Code实现对Javascript的智能感知
      VisualStudio Code就相比要麻烦点了,可能有些前端大牛知道VisualStudio Code是用node开发出来的,所以现在,node环境你是跑不掉了,当你把基本的开发环境都做好了以后,接下来需要全局安装一个node包,至于npm服务器连不上的小伙伴们,就用淘宝的那个npm镜像吧,这里不解释了。
      首先全局安装typings包:
      npm install -g typings
      然后使用git工具将这个项目克隆到本地:
      https://github.com/DefinitelyTyped/DefinitelyTyped
      其实这里面就是大量的d.ts文件,接近3000个文件夹了,应该是所有基于TypeScript开发的js组件的定义文件吧,然后用VS Code打开你的web项目,在DefinitelyTyped文件夹中将你需要的那个js组件的文件夹找到,如angular,然后复制到你的项目里,在你的js文件头部引用定义(因为VS Code没有VS那样智能,所以还得手动引用一下):
      /// <reference path="./typings/angular/index.d.ts" />
      接下来,好宝,奇迹发生了:

      这样写代码才叫爽嘛,Enjoy IT!
      既然TypeScript能够跑在任何的主流IDE上,那其他的IDE我就不一一试了,这里就做个抛砖引玉,大家自己慢慢折腾吧。
    楼主热帖
  • TA的每日心情
    奋斗
    2019-8-30 00:40
  • 签到天数: 459 天

    连续签到: 1 天

    [LV.9]妙领天机

    1

    主题

    2834

    帖子

    2833

    积分

    声名显赫

    Rank: 7Rank: 7Rank: 7

    积分
    2833
    发表于 2018-7-23 20:57:45 | 显示全部楼层
    看帖要回,回帖才健康,在踩踩,楼主辛苦了!
    回复

    使用道具 举报

  • TA的每日心情
    擦汗
    2019-8-30 18:38
  • 签到天数: 467 天

    连续签到: 12 天

    [LV.9]妙领天机

    1

    主题

    2956

    帖子

    2954

    积分

    声名显赫

    Rank: 7Rank: 7Rank: 7

    积分
    2954
    发表于 2018-7-26 04:12:51 | 显示全部楼层
    好,很好,非常好!
    回复

    使用道具 举报

  • TA的每日心情
    无聊
    2019-8-29 12:56
  • 签到天数: 467 天

    连续签到: 3 天

    [LV.9]妙领天机

    0

    主题

    2845

    帖子

    2843

    积分

    声名显赫

    Rank: 7Rank: 7Rank: 7

    积分
    2843
    发表于 2018-7-28 15:18:36 | 显示全部楼层
    啊啊啊啊啊啊啊啊啊啊啊
    回复

    使用道具 举报

  • TA的每日心情
    擦汗
    2019-8-30 07:54
  • 签到天数: 469 天

    连续签到: 1 天

    [LV.9]妙领天机

    7

    主题

    2913

    帖子

    2921

    积分

    声名显赫

    Rank: 7Rank: 7Rank: 7

    积分
    2921
    发表于 2018-7-30 16:52:30 | 显示全部楼层
    这么强,支持楼主,佩服
    回复

    使用道具 举报

  • TA的每日心情
    奋斗
    2019-8-30 15:29
  • 签到天数: 486 天

    连续签到: 1 天

    [LV.9]妙领天机

    1

    主题

    2965

    帖子

    2962

    积分

    声名显赫

    Rank: 7Rank: 7Rank: 7

    积分
    2962
    发表于 2018-8-4 06:42:18 | 显示全部楼层
    不错 支持下
    回复

    使用道具 举报

  • TA的每日心情

    2019-8-30 10:13
  • 签到天数: 473 天

    连续签到: 1 天

    [LV.9]妙领天机

    2

    主题

    2873

    帖子

    2871

    积分

    声名显赫

    Rank: 7Rank: 7Rank: 7

    积分
    2871
    发表于 2018-8-6 08:38:07 | 显示全部楼层
    佩服佩服!
    回复

    使用道具 举报

  • TA的每日心情
    开心
    2019-8-30 12:41
  • 签到天数: 484 天

    连续签到: 7 天

    [LV.9]妙领天机

    1

    主题

    2907

    帖子

    2900

    积分

    声名显赫

    Rank: 7Rank: 7Rank: 7

    积分
    2900
    发表于 2018-8-6 20:00:01 | 显示全部楼层
    发发呆,回回帖,工作结束~
    回复

    使用道具 举报

  • TA的每日心情
    难过
    2019-8-30 01:21
  • 签到天数: 474 天

    连续签到: 2 天

    [LV.9]妙领天机

    0

    主题

    2836

    帖子

    2834

    积分

    声名显赫

    Rank: 7Rank: 7Rank: 7

    积分
    2834
    发表于 2018-8-8 11:11:42 | 显示全部楼层
    是爷们的娘们的都帮顶!大力支持
    回复

    使用道具 举报

  • TA的每日心情
    慵懒
    2019-8-30 01:29
  • 签到天数: 457 天

    连续签到: 1 天

    [LV.9]妙领天机

    6

    主题

    2837

    帖子

    2842

    积分

    声名显赫

    Rank: 7Rank: 7Rank: 7

    积分
    2842
    发表于 2018-8-10 07:24:47 | 显示全部楼层
    看起来不错
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|Archiver|手机版|小黑屋|任逍遥

    GMT+8, 2024-5-1 04:47 , Processed in 0.078886 second(s), 49 queries .

    Powered by 任逍遥 X3.4

    Copyright © 2001-2023, Rxiaoyao Cloud.

    快速回复 返回顶部 返回列表