最近在学习typescript的过程中，我想到你可能会用ts开发node.js项目。在网上搜索后，其实很多开发者都实践过这个内容。在这里，我记录了构建自己的开发环境的简单过程。

打字稿开发：的好处

更严格的类型检查和语法检查。对ES6/ES2015/ES7的良好支持(部分)。编译后的js文件非常干净，它还支持多种代码规范。其他，请参考文档。准备

Node.js v6.9.1或任何新版本，旧版本暂时还没有测试。Tsc typescript编译器，使用npm安装：npm install -g typescript，目前是v2.0.10编辑器：vscode命令行终端：windows cmd特别提示和吐槽：安装Tsc可能需要翻墙(如果特别慢的话)，所以淘宝镜像也可以用。

建立node.js项目

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

在这里我设置了自己的项目目录结构：

testts |-build//编译后的js文件目录|-src//ts文件目录|-static//客户端静态文件| |-脚本| | |-main . js | |-style | |-style . CSS |。Html文件目录| |-index . html |-package . JSON |-tsconfig.json编辑tsconfig . JSON。

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

要获得这个文件，您可以在项目的根目录中使用tsc - init。将自动创建tsconfig.json。

编写所需的配置项目

默认情况下，tsc编译所有。目录中的ts文件。通过编写tsconfig.json，我们可以配置tsc的编译行为，以达到预期的结果：

{ '编译器选项' : { '模块' :' commonjs '，//指定生成哪个模块系统代码' target' :' es6 '，//目标代码类型' noImplicitAny': false，///当表达式和声明中存在隐式' Any '类型时报告错误。SourceMap': false，//用于调试' rootDir':/src '，//仅用于控制输出目录结构- outDir。OutDir':/build '，//重定向输出目录。Watch':true //在监视模式下运行编译器。当输出文件发生变化时，会对其进行监控和重新编译。}，“include”:[。/src/* */*]、“排除”: [“视图”、“静态”]}

“编译选项”是一个编译选项，请参考：

中文文档英文文档

“Module”用于指定使用哪个模块规范来设置编译后的js代码。选择Commonjs是因为它是node.js项目。(如果你感兴趣，可以尝试所有模块的所有可能值，检查编译后的js文件的差异，你会发现生成的代码还是很好很干净的。)

“目标”是编译后的js代码遵循的标准，可以是es3/es5/es6等。为了比较ts 2.0代码和es6代码之间的差异，这里使用了“es6”。

“RootDir”是重要的一点，它告诉编译器这个目录中的文件需要编译。如果设置了此选项并且。ts文件放在外面(比如根目录)？Tsc将提示如下错误：

复制的代码如下：“:”错误ts6059:file文件“d :/workplace/node WP/tests/index . ts”不在“rootdir”下“d :/workplace/node WP/tests/src”下。“rootdir”应该包含所有源文件。

此外，在构建的目录中，输出目录结构也将改变：

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

解决方法是使用包含和排除属性。根据文档描述，“包含”和“排除”属性指定了文件全局匹配模式的列表。指明需要包含的文件目录或文件以及需要过滤掉的文件或目录(您也可以使用“文件”配置项，但需要逐个输入，但无论如何设置“排除”，由“文件”属性明确指定的文件将始终包含在内。)，详见官方文档。

因此，通过增加‘。/src/**/* "指向“include”指向的数组，您可以指定下的所有文件。/src，我们确实需要编译它，其他目录将被排除在外。

“OutDir”指向编译后的js代码的输出位置。文档中还有‘OutFile’选项，可以按照一定的顺序规则将所有ts文件打包成一个文件。有关详细信息，请参考文档。在这里，我们首先使用outDir。

试试看

写完两个配置文件后，就可以开始写代码并编译了。让我们试一试：

英寸/src/server.ts，写一段简单的话：

接口ICache { useCache:boolean布尔值；[propname : string]: any；} const cache : icache={ usecache: true }；之后，输入：

D: 工作场所节点工作区测试tsc

编译后，server.js将在构建目录中生成为：

//server.jsconst缓存={ useCache: true }；使用。d.ts文件

既然我们要开发一个项目，显然不仅仅是这些代码。必须使用内置模块和第三方模块。但是，直接导入模块在。ts文件。例如：

这是由于typescript自身的机制，需要xx.d.ts声明文件来解释模块公开的方法和属性的类型和内容。我觉得有些麻烦。幸运的是，政府和社会已经准备了解决这个问题的计划。

在2.0以上的typescript版本中，只需要npm来获取类型声明文件。在项目目录下执行安装：

使用npminstall-save-dev @ types/node可以得到关于node.js v6.x的API的类型描述文件。之后，您可以成功导入所需的模块：

从“http”导入*作为http；完成后，您不仅可以正常使用http模块中的方法，还可以在vscode中获得相应的代码提示。

对于内置模块，安装一个@types/node模块可以整体解决模块声明文件的问题。那么，对于数量庞大的第三方模块，我们应该怎么做呢？官方和社区还提供了查找和安装的渠道：

键入明确键入的类型搜索会自动编译并自动重新启动服务

在解决了声明文件之后，实际上我们可以使用ts简单地开发node.js项目。但是每次写代码或者修改代码，都要先编译再启动，这是一件很小但是相当烦人的事情。为了效率，我们应该改进它。

首先让。ts文件将自动编译。这个已经在上面的tsconfig.json文件中设置好了，也就是‘watch’: true。此时，在命令行上执行tsc命令后，编译器将始终监视。ts文件，然后自动编译。

要自动重启节点服务器，我们可以使用supervisor模块或任何具有类似功能的解决方案。

全局安装supervisor模块npm install -g supervisor，然后使用supervisor。/build/server.js启动终端中的服务器，服务器端代码发生变化后自动重启服务器。

使服务更容易启动

因为以上两个命令，启动时可能需要附加一些参数，每次输入都比较麻烦。

您可以使用npm脚本来解决这个问题。在package.json文件的“脚本”中，我们设置了：

{ ' scripts ' : { ' dev ' : ' supervisor-wbuild。/build/server.js '，' build' :' TSC '，}}执行npm后运行dev，如果。中的js文件。/build目录更改，服务器将重新启动。

当执行npm运行构建时，将只编译ts文件，并监控ts更改。

用例子试试

从“http”导入*作为http；//=====================const server=http . CreateServer(函数(request:http。IncomingMessage，response:http。server response): void { console . log('创建服务器.');response.writeHead(200，{ ' Content-Type ' : ' text/plain ' })；response . write(‘Hello world，我们使用typescript进行开发。’);response . end()；});server.listen(3000，function(){ console.log('服务器在端口3000上侦听')；console.log('test . ');});补充：一个命令实现tsc编译和服务器重启

2017年5月3日更新：

感谢您对本文的支持。有朋友(@Ajaxyz)建议，有没有办法把ts编译监控和服务器重启合二为一的命令？

本文提出了一种简单的方法，利用大口来管理这两个过程。(如何使用大口，请参考大口API)

1.使用watch()监视ts文件的更改并重新启动服务器。

这样，需要使用(安装)大口和大口类型的脚本插件

请注意， gulf-typescript可能需要在项目目录中安装typescript，因此您可以在项目目录中运行命令行：

npm install typescript准备好gulf和插件后，需要编写一个gulpfile.js作为由gulp project执行的任务文件，例如下面的：

//gulf file . js let大口=require('大口')；let ts=require('大口型脚本')；let tsp=ts . create PROJECt(' tsconfig . JSON ')；//使用tsconfig.json文件配置tsclet exec=require(' child _ process ')。执行董事；让孩子；//目录常量常量路径={scripts : ['。/src/* */*。ts']，输出： '。/build '，}；//编译ts文件gull . task(' build-ts '，['restart']，function(){ return gull . src(path . scripts))。管道(tsp())。管道(大口。目的地(路径。输出))；});//监控ts文件gull . task(' watch-ts '，['build-ts']，function(){ gull . watch(path . scripts，[' build-ts '])；});//自动重新启动服务器。/build/server.js '，(error，stdout，stderr)={ console . log(` stdout 3360 $ { stdout } `))；console . log(` stderr : $ { stderr } `)；if(错误！==null){ console . log(` exec error : $ { error } `)；} });});//开发任务grave . task(' dev '，['build-ts '，' restart '，' watch-ts '])；这样，在开发的时候，可以直接在项目目录下运行gulp dev来启动编译和服务器。此后，gulp将监控ts文件的变化，然后编译ts文件并重新启动服务器。刷新页面，可以看到浏览器页面已经输出了新的结果。

另外需要注意的是，grave负责监控ts文件的变化，所以请在tsconfig.json中将' watch '设置为false，或者删除这个属性。

2.使用tsconfig.json监控ts文件更改并重新启动服务器

这样，首先打开tsconfig.json对ts文件进行监控，然后修改gulpfile.js文件，如下图：所示

//.安魂曲部分与上面的例子相同，但这里省略了let ts child。//监控TS文件，修改子流程serverChild//重新启动服务器子进程//编译ts文件gout . task(' build-ts '，function () {tschild=exec ('TSC '，(error，stdout，stderr)={ console . log(` TSC===stdout : $ { stdout } `)。console . log(` TSC====stderr : $ { stderr } `)；if(错误！==null){ console . log(` exec error : $ { error } `)；} });});//自动重新启动服务器。/build/server.js '，(error，stdout，stderr)={ console . log(` restart===stdout 3360 $ console . log(` restart====stderr : $ { stderr } `)；if(错误！==null){ console . log(` exec error : $ { error } `)；} });});//开发任务grave . task(' dev 2 '，['build-ts '，' restart '])；运行大口dev2的效果与前面的例子相同。

以上提供解决方案的方式和思路仅供参考。如果在实际环境中使用，需要进一步完善其功能。

标签

本文只是为typescript开发node.js项目搭建环境的一个简单的学习和记录。

起初，我只是想知道我是否能做到这一点。实际上，在node.js的稳定版本v6.9.1中已经支持了90%的ES6.因此，直接使用ES6开发node.js项目是一个不错的选择。

请原谅我的不完美，稍后会补充。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。