配置TS + node 的开发环境

2019-06-12 admin

直接配置ts的开发环境还是挺麻烦的,这里我总结了一套开发模板,可以在用的时候可以考虑直接clone这个项目, 项目地址https://github.com/fish-node/… 以这个项目 为基础模板来开发就行。

$ tree
.
├── README.md
├── jest.config.js
├── package.json
├── src
│   ├── index.ts
│   ├── math.ts
│   └── server.ts
├── test
│   ├── math.test.ts
│   └── server.test.ts
├── tsconfig.json
└── tslint.json

ts-node

因为ts是建立在js的基础之上的,但是node又不能直接运行ts代码,实际使用是往往需要使用tsc将ts代码编译成js代码,这无疑是很麻烦的。

而ts-node则包装了node,它可以直接的运行ts代码,使用起来很方便,它的官方仓库在这里 https://github.com/TypeStrong… ,基本用法请自行查看它的readme。

我这里就是把ts-node写到package.json,大家在npm install之后,就可以通过

$ npx ts-node src/index.ts

这种方式来运行ts代码,很方便。

然后我们知道node中有个nodemon,可以在开发时自动的重启我们的node程序,而在ts-node中,对应的就是ts-node-dev

$ npx ts-node-dev src/index.ts

示例代码

在src目录下,我写了三个基本的ts代码

  • math.ts就是最基本的ts的用法
  • 然后server.js展示了如何使用ts编写一个http服务器
  • index.ts则展示了ts中的模块化的使用

测试框架

然后我使用Jest 作为测试框架,在test目录下展示了用Jest + Ts 编写我们的测试程序。 运行测试文件的话,可以使用

$ npm run test

@types

@types/node @types/jest 是ts中类型声明文件,它可以给js编写的模块赋予类型系统,让我们享受类型系统的好处。

配置文件

  • .editorconfig是我们配置IDE的阅读配置文件
  • tslint.json使我们的代码检查配置文件 这个文件主要是继承了官方推荐的代码风格。不过为了调试方便,把’no-console’这个条件设置为false了

tsconfig.json

然后重点是我们的ts配置文件。

一般来说,json文件是不支持注释的,但是ts官方为了方便,对这个文件单独做了加强,使得我们可以使用注释,注释语法和js中的一样。

{
    "compilerOptions": {
        "target": "es2018",
        "module": "commonjs",
        "outDir": "./dist/",
        "rootDir": "./src/",
        "strict": true,
        "moduleResolution": "node",
        "esModuleInterop": true,
        "experimentalDecorators": true
    },
    "exclude": ["./test"]
}

其中的target就是编译后js代码的版本,因为我们是node环境,没必要考虑浏览器的兼容问题,所以大家还是尽量的使用更新的版本吧。

而module选项则是我们的模块管理机制,因为我们的ts-node目前还不指出es的模块管理机制,参考这个问题https://github.com/TypeStrong… ,所以我们还是继续使用commonjs规范。

然后rootDir就是我们的源代码目录,outDir就是我们的编译后代码的目录。同时我们设置了exclude这个选项,把我们的测试文件排除在外。

[转载]原文链接:https://segmentfault.com/a/1190000019458509

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-67136.html

文章标题:配置TS + node 的开发环境

相关文章
为什么要选择Nodejs?Nodejs有什么好处?
什么?JavaScript还能用作服务器编程! Caleb Madrigal是来自美国密尔沃基市的一名软件顾问。四年前,他在听说“将JavaScript用作服务器端语言”这样的说法时,认为那是一个荒唐的想法。有那么多服务器端语言可供选择,为...
2015-11-12
js性能优化 如何更快速加载你的JavaScript页面
确保代码尽量简洁 不要什么都依赖JavaScript。不要编写重复性的脚本。要把JavaScript当作糖果工具,只是起到美化作用。别给你的网站添加大量的JavaScript代码。只有必要的时候用一下。只有确实能改善用户体验的时候用一下。 ...
2015-11-12
10个强大的纯CSS3动画案例分享
我们的网页外观主要由CSS控制,编写CSS代码可以任意改变我们的网页布局以及网页内容的样式。CSS3的出现,更是可以让网页增添了不少动画元素,让我们的网页变得更加生动有趣,并且更易于交互。本文分享了10个非常炫酷的CSS3动画案例,希望大家...
2015-11-16
Node.js 2014这一年发生了什么
Node.js 的 2014 年充满了不幸和争议. 这一年 Noder 们经历了太多的伤心事, 经历了漫长的等待, 经历了沉重的分裂之痛. 也许 Noder 们不想回忆14年 Node.js land 发生的事情, 但正因为痛才更有铭记的价...
2015-11-12
v-charts | 饿了么团队开源的基于 Vue 和 ECharts 的图表工具
在使用echarts生成图表时,经常需要做繁琐的数据类型转化、修改复杂的配置项,v-charts的出现正是为了解决这个 痛点。基于Vue2.0和echarts封装的v-charts图表组件,只需要统一提供一种对前后端都友好的数据格式 设置简...
2018-05-24
从2014年的发展来展望JS的未来将会如何
<font face="寰�杞�闆呴粦, Arial, sans-serif ">2014骞达紝杞�浠惰�屼笟鍙戝睍杩呴€燂紝鍚勭�嶈��瑷€灞傚嚭涓嶇┓锛屼互婊¤冻鐢ㄦ埛涓嶆柇鍙樺寲鐨勯渶姹傘€傝繖浜涜��...
2015-11-12
12个你未必知道的CSS小知识
虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过。 1.CSS的color属性并非只能用于文本显示 对于CSS的color属性,相信所有Web开发人员...
2015-11-12
ajax为什么令人惊异?ajax的优缺点
使用Ajax的最大优点,就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作,并避免了在网络上发送那些没有改变的信息。 Ajax不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。就像DHT...
2015-11-12
HTML5的5个不错的开发工具推荐
HTML5规范终于在今年正式定稿,对于从事多年HTML5开发的人员来说绝对是一个重大新闻。数字天堂董事长,DCloud CEO王安也发表了文章,从开发者和用户两个角度分析了HTML对两个人群的优势。其实,关于HTML5的开发工具,我们以往的...
2015-11-12
JavaScript教程:JS中的原型
Keith Peters 几年前发表的一篇博文,关于学习没有“new”的世界,其中解释了使用原型继承代替构造函数。两者都是纯粹的原型编码。 标准方法(The Standard Way) 一直以来,我们学习的在 JavaScript 里创建对...
2015-11-12
回到顶部