位置: 编程技术 - 正文

详解使用Typescript开发node.js项目(简单的环境配置)(typescript的type)

编辑:rootadmin

推荐整理分享详解使用Typescript开发node.js项目(简单的环境配置)(typescript的type),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:地盘正针的详解使用,typescript ??,typescript ??,typescrips,地盘正针的详解使用,typescript typeof,天盘缝针的详解使用,天盘缝针的详解使用,内容如对您有帮助,希望把文章链接给更多的朋友!

最近在学习typescript的过程中,想到也许可以使用ts来开发node.js项目。在网上搜了一下,其实已经有很多开发者实践了这方面的内容。这里,我记录一下自己搭建开发环境的简单过程。

使用Typescript开发的好处:

较严格的类型检查和语法检查。 对ES6/ES/ES7(部分)支持比较好。 编译后的js文件很干净,也支持多种代码规范。 其他,请参见文档。

准备

node.js v6.9.1 或者任意的新版本,老版本暂时没有试验。 tsc typescript编译器,使用npm安装:npm install -g typescript,当前是v2.0. 编辑器:vscode 命令行终端:windows的cmd

特别提示和吐槽:安装tsc可能需要翻墙(如果特别慢的话),所以也可以使用淘宝镜像。

建立node.js项目

使用npm init在指定的目录中建好项目的目录。

在这里我建立了一个自己的项目目录结构:

编辑 tsconfig.json

在上面的目录结构中有一个tsconfig.json文件,用来设置ts的编译选项。

想要获取这份文件,可以在项目根目录下使用tsc --init,就会自动建立好一份.tsconfig.json。

编写需要的配置项

默认情况下,tsc会使用默认的编译配置编译目录中的所有.ts文件。通过书写tsconfig.json,我们可以配置tsc的编译行为,达到想要的结果:

配置文件注意点

"compilerOptions"是编译选项,具体详情,请参见:

中文文档英文文档

"module"是用来指定设置编译后的js代码,使用何种模块规范。由于是开发node.js项目,所以选择commonjs。(有兴趣的话,可以把所有module所有可能的值都试一遍,查看编译后的js文件的差别,会发现生成的代码还是很不错的,很干净。)

"target"是编译后的js代码遵循何种规范,可以是es3/es5/es6等等,这里为了对比ts 2.0代码和es6代码的不同,使用了"es6"。

"rootDir"是一个需要注意的地方,它会告诉编译器,此目录下的文件需要经过编译。那么,如果设置了这个选项,又在外部(比如根目录)放置了.ts文件,会怎么样呢?tsc会提示一条类似这样的错误:

并且,在build的目录中,输出的目录结构也会变化:

这显然不是我们想要的结果。

解决方案是使用include和exclude属性。按照文档说明,"include" 和 "exclude" 属性指定一个文件glob匹配模式列表。表明需要包含的文件目录或文件,以及需要过滤掉的文件或目录(也可以使用"files"配置项,不过需要一个一个文件录入,"files" 属性明确指定的文件却总是会被包含在内,不管 "exclude" 如何设置。),详见官方文档说明。

所以,添加"./src/**/*"到"include"所指向的数组,就可以指定./src下的所有文件,是我们真正需要被编译的,其他目录将会被排除。

"outDir" 指向了编译后的js代码输出的地方。在文档中也有"outFile"选项,可以把所有的ts文件按照一定顺序规则打包成一个文件,具体可以参考文档。在这里,我们优先使用outDir。

试验一下

在书写完2个配置文件之后,就可以开始撰写代码,并执行编译了。我们试验一下:

在./src/server.ts中,写一段简单的:

之后,在终端中输入:

D:workplacenodeWPtestTS>tsc

经过编译,会生成server.js到build目录中:

使用.d.ts文件

详解使用Typescript开发node.js项目(简单的环境配置)(typescript的type)

既然要开发一个项目,显然不会只有这些代码。肯定要用到内建模块和第三方模块。然而,直接导入模块,在.ts文件中是不行的。例如:

这是由于typescript自身的机制,需要一份xx.d.ts声明文件,来说明模块对外公开的方法和属性的类型以及内容。感觉有一些麻烦。好在,官方以及社区已经准备好了方案,来解决这个问题。

在TypeScript 2.0以上的版本,获取类型声明文件只需要使用npm。在项目目录下执行安装:

就可以获得有关node.js v6.x的API的类型说明文件。之后,就可以顺利的导入需要的模块了:

完成之后,不仅可以正常的使用http模块中的方法,也可以在vscode中获得相应的代码提示。

对于内建模块,安装一个@types/node模块可以整体解决模块的声明文件问题。那么,对于浩如烟海的第三方模块,该怎么办呢?官方和社区中也提供了查找和安装的渠道:

typings DefinitelyTyped TypeSearch

自动编译和自动重启服务

解决完了声明文件之后,其实我们已经可以使用ts简单的进行node.js项目的开发了。但是,每次写完或者修改代码,就要编译,然后再启动,是一件不大但是相当让人烦躁的事情。为了效率,我们应当改善它。

首先,要让.ts文件可以自动被编译。这在上文中的tsconfig.json文件中,已经被设置好了,就是"watch":true 。此时在命令行执行tsc命令后,编译器就会时时监控目录中.ts文件的变化,然后自动编译。

自动重启node服务器,我们可以使用 supervisor 模块解决,或者任何具有类似功能的解决方案都可以。

全局安装supervisor模块npm install -g supervisor,之后就可以在终端中使用supervior ./build/server.js启动服务器,并在服务器端代码改变之后,自动重启服务器。

让启动服务更简单

由于以上的2个命令,在启动时都可能需要附加一些参数,每次输入很麻烦。

可以使用npm script来解决。在package.json文件中的"scripts"中,我们设置:

执行npm run dev之后,如果./build目录中的.js文件发生改变时,就会重启服务器。

执行npm run build时,则只会编译ts文件并监控ts的改变。

使用例子来试验一下

补充:一个命令实现tsc编译和重启服务器

.5.3更新:

感谢大家对本文的支持。有朋友(@Ajaxyz)提出,有没有办法将ts编译监视和重启服务器合并为一个命令?

这里提出一个比较简易的方法,使用gulp来管理这2个流程。(如何使用gulp工作,请参考Gulp API)

1. 使用gulp的watch()来监控ts文件的变化并重启服务器。

这种方式,需要使用gulp和gulp-typescript插件(安装)

注意的一点是:gulp-typescript可能需要在项目的目录安装typescript,所以可以在项目的目录中,运行命令行:

准备好gulp和插件之后,需要书写一份gulpfile.js作为gulp项目需要执行的任务文件,例子如下:

这样,在开发时,直接在项目目录运行gulp dev,就可以启动编译和服务器了。此后,gulp会监视ts文件的改动,然后编译ts文件并重启服务器。刷新页面,就可以看到新结果已经输出在浏览器页面中了。

还有一点需要留意的是,由于gulp负责监视ts文件的变化,因此请在tsconfig.json将"watch"设置为false或者删掉这个属性。

2. 使用tsconfig.json监控ts文件变化并重启服务器

用这种方式,首先打开tsconfig.json对ts文件的监视,然后修改gulpfile.js文件,如下:

运行gulp dev2,效果和上一个例子一样。

以上,提供一种解决办法的方式和思路,仅供参考,如果用在实际环境中,还需要进一步完善功能。

结语

本文只是对搭建typescript开发node.js项目的环境做一个简单研究和记录。

最初这样想,也只是好奇可不可以这么做。实际上在node.js稳定版本v6.9.1中已经支持了%的ES6。因此,直接使用ES6开发node.js项目,是很好的选择。

不完善的地方,请见谅,后面会慢慢补充。

标签: typescript的type

本文链接地址:https://www.jiuchutong.com/biancheng/379556.html 转载请保留说明!

上一篇:浅谈node的事件机制(node解决了什么问题)

下一篇:详解Nodejs 通过 fs.createWriteStream 保存文件(nodejs例子)

  • 设备转产需要停止折旧吗
  • 进项税大于销项税需要交附加税吗
  • 零申报资产总计不能为零
  • 什么是非限制
  • 加计抵减附加税怎么做账务处理
  • 会计报废怎么处理
  • 跟个人租车可以到税务局开发票吗
  • 土建工程管理费取费基数
  • 小企业应收票据有哪些
  • 运输费用和保险费用会计分录
  • 投资资产包括哪些会计科目
  • 购买车位需要交哪些税
  • 营业账簿印花税怎么算
  • 银行和保险公司是什么关系
  • 职工教育经费怎么做账
  • 充电话费送的
  • 购买银行承兑汇票的会计分录
  • 欠发工资如何赔偿
  • 怎样破解wifi密码怎么办
  • mac上如何切换apple id
  • 鸿蒙密码锁设置密码的方法
  • 企业所得税申报错误怎么更改
  • 银行手续费发票税率
  • 荣耀x10的鸿蒙系统怎么开启
  • php网页运行原理
  • php缓存优化
  • win7系统网络连接出现红叉
  • 先开票后发货开票时确认收入
  • 利尼扬蒂野生动物保护区中的一只雄性豹子,博茨瓦纳 (© Karine Aigner/Tandem Stills + Motion)
  • 魅族路由器mini padavan
  • php消息实时推送完整示例
  • 个人独资企业和合伙企业的区别
  • 盛开的樱花和姬子的故事
  • 贷款的减值会计怎么做账
  • 树莓派能干什么
  • Android 10.0 framework中关于Activitity的生命周期的源码讲解
  • php经典面试题及答案
  • php递归函数详解
  • 转账支票适用范围
  • python tkinter ttk
  • 基于python语言
  • vscode主题插件护眼
  • tomcat结构图
  • 将自产产品用于建造厂房
  • 清包工一般计税如何开票
  • 公司购买食品如何入账科目
  • SQL2005中char nchar varchar nvarchar数据类型的区别和使用环境讲解
  • 三免三减半税收政策中的递延所得税
  • sqlserver行列转换多行多列
  • 跨年预收账款被税局要求确认收入怎么交增值税
  • 存货跌价准备转回和转销的区别
  • 企业搬迁安置费一般怎么赔
  • 旅行社代订机票发票报销
  • 银行承兑汇票能拆分背书吗
  • 关联企业有什么好处
  • sql作业怎么执行
  • WIN8系统安装教程
  • apple mac book
  • 在linux系统中,用来存放系统所需要的配置文件和子目录
  • Windows PC用iCloud多设备共享数据图文教程
  • windows更新过程中
  • macos 音量快捷键
  • neoDVDstd.exe - neoDVDstd是什么进程 有什么用
  • win8.1其他用户名登不进去
  • webpack中CommonsChunkPlugin详细教程(小结)
  • java timer
  • cmd命令如何进入d盘
  • perl中sub
  • jquery的选择器有哪些举例说明
  • 使用筷子就餐会不会传染乙肝病毒
  • linux的syslog配置
  • jquery日期插件
  • javascipt:void
  • javascript教程
  • jquery complete
  • boss直聘怎么注销账号
  • 广东省地方税务局发票查询
  • 冻结银行账户属于什么
  • 江苏预包装食品备案网上流程
  • 税费算在房价里
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设