专职C++

不能停止的脚步

  C++博客 :: 首页 :: 联系 :: 聚合  :: 管理
  163 Posts :: 7 Stories :: 135 Comments :: 0 Trackbacks

常用链接

留言簿(28)

我参与的团队

搜索

  •  

最新评论

阅读排行榜

评论排行榜

typescript的开发工具

  1. 现在typescript应用越来越多了,它最大的优势,就是可读性强。增加了很多语法检查,减少了代码误错率。
  2. 目前,我接解触的typescript工具主要有vscode, visual stduio 2017webstorm

vscode

它的优点非常突出。首先是免费开源。每月都会有更新,功能越来越强大。用它来开发typescript工程,完全够用。像layabox和erget这两个游戏引擎的ide,就是基于vscode定制的。而且,它本身就是基于node开发,所以算是node的自扩展工具。它是typescript首选工具

visual studio 2017

在我心中,visual studio是宇宙无敌第一工具,能开发很多应用,手机跨平台应用不在话下,还有云应用。但是它太大了,离线英文安装包达30G,如果全部安装的话,我的120G的SSD小硬盘,完全不够用。试着用它开发typescript或js,比vscode强大不少。但是,它太大了,跑不起…

webstorm

这是一个基于instllij的开发工具,功能也很全面,对于typescript还有专门的支持。它是收费的,不便宜。体积也比vscode大很多。显示效果,没有vscode高大尚。

最后,各方考虑,还是推荐vscode

正题

创建node工程

  1. //比如在d:\tmp创建一个目录 ts1
  2. mkdir d:\tmp\ts1
  3. cd d:\tmp\ts1
  4. npm init //按提示完成后,这完成node工程创建

增加typescript支持

  1. //如果没有安装typescript,则用命令 npm install typescript -g 安装
  2. tsc -v //可以看到当前的版本
  3. //在d:\tmp\ts1目录下面,输入
  4. tsc --init
  5. //完成后,就会生成一个tsconfig.json的文件
  6. //最后
  7. code . //用vscode打开当前目录
  8. //在vscode,新建一个index.ts,
  9. //增加下面一行
  10. console.log('hello typescripit');
  11. //在命令行下,输入tsc后,就会得到一个index.js,
  12. //然后输入下面命令
  13. node .
  14. //就可以运行了
  15. //或者在vscode下,按下ctrl_+ shift + b,会弹出任务菜单项,选择Tsc编译,
  16. //然后再配置vscode运行,就可以按F5调试并运行了。

一些问题解决

增加代码提示

好像从vscode 1.8后,就不使用了typing了,改使用@types了。在编写typescript的时候,如果要用到node自带的fs,或http等模块,用import后会有错误提示,那是因为没有安装@types

  1. //在命令提示符下:
  2. npm install @types/node@6.x //我这里用的是node 6.x
  3. //完成后,就可以愉快的使用node的模块的代码提示了

划分目录

默认的情况下,ts和js都是在一起的,生成发布版本的时候,就会有些乱了。所以,将所有生成的代码,放到别的目录。 
打开tsconfig.js 
找到compilerOptions中的outDir,增加./build,这样就会将代码生成到build里面了,然后修改package.json,修改main为build/index.js就可以运行了。 
默认的情况下, 
“allowJs”: true, /* Allow javascript files to be compiled. */ 
表示会把代码js文件,一起编译到build下 
这样代码,就会好多了:)

去除同名js

在没有划分目录的情况下,基于ts生成的js和ts是在同一个目录的,结果在vscode文件列表都会显示,这个vscode设置一下就可以了。 
Vscode->File->首选项->设置 
增产加 “*/.js”: { “when”: “$(basename).ts” },就可以了,下面是具体配置的例子

  1. "files.exclude": {
  2. "**/.git": true,
  3. "**/.svn": true,
  4. "**/.hg": true,
  5. "**/CVS": true,
  6. "**/node_modules":true,
  7. "**/typings":true,
  8. "**/logs":true,
  9. "**/*.js": { "when": "$(basename).ts" },
  10. "**/**.js": { "when": "$(basename).tsx" },
  11. "**/.DS_Store": true
  12. },
posted on 2017-12-23 12:15 冬瓜 阅读(1363) 评论(0)  编辑 收藏 引用 所属分类: javascript

只有注册用户登录后才能发表评论。
网站导航: 博客园   IT新闻   BlogJava   知识库   博问   管理