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

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

使用Typescript开发的好处:

较严格的类型检查和语法检查。

对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 //客户端静态文件 | |---scripts | | |---main.js | |----styles | | |---style.css | |----assets |---views //html文件目录 | |---index.html |---package.json |---tsconfig.json

编辑 tsconfig.json

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

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

编写需要的配置项

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

{ "compilerOptions": { "module": "commonjs", //指定生成哪个模块系统代码 "target": "es6", //目标代码类型 "noImplicitAny": false, //在表达式和声明上有隐含的'any'类型时报错。 "sourceMap": false, //用于debug "rootDir":"./src", //仅用来控制输出的目录结构--outDir。 "outDir":"./build", //重定向输出目录。 "watch":true //在监视模式下运行编译器。会监视输出文件,在它们改变时重新编译。 }, "include":[ "./src/**/*" ], "exclude":[ "views", "static" ] }

配置文件注意点

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

中文文档
英文文档

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

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

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

复制代码 代码如下:


"error TS6059: File 'D:/workplace/nodeWP/testTS/index.ts' is not under 'rootDir' 'D:/workplace/nodeWP/testTS/src'. 'rootDir' is expected to contain all source files."


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

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

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

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

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

试验一下

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

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

interface ICache{ useCache:boolean; [propName:string]:any; } const cache:ICache = {useCache:true};

之后,在终端中输入:

D:\workplace\nodeWP\testTS>tsc

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

//server.js const cache = { useCache: true };

使用.d.ts文件

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

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

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wyzwds.html