用 TypeScript 开发 Node.js 程序

Photo by Joshua Aragon on Unsplash

当我第一次发现 TypeScript 时，就把它用到了自己的 JavaScript 程序中。使用 TypeScript 有很多好处，现在你要让我在用原生 JavaScript 写任何东西的话，需要给我一个令人信服的理由。

在本文中，我将向你展现如何设置一个简单的开发环境，以便使用 TypeScript 编写 Node.js 程序。

首先在 TypeScript 中可能有一千种或者更多种不同的方法去创立 Node.js 应用程序。我只是想展现自己喜欢的方式。

另外你可以在此处找到我的入门项目： toxsickcoder/node-typescript-starter。里面有少量不会在本文中探讨的额外功能。

Package.json

就像我之前说过的，有很多方法可以做到这一点。我喜欢将 Webpack 用于 TypeScript 项目。但首先要做的是从创立一个?package.json?开始。

你可以用?npm init?命令生成?package.json，也可以复制粘贴下面的代码并进行更改。

1//?package.json

2{

3″name”:”node-typescript”,

4″version”:”0.0.1″,

5″author”:”Freek?Mencke”,

6″homepage”:”https://medium.com/@freek_mencke”,

7″license”:”MIT”,

8″scripts”:?{},

9″dependencies”:?{},

10″devDependencies”:?{}

11}

让我们从 JavaScript Node.js 项目的简单 Webpack 配置开始。完成基本设置后，将增加 TypeScript。

程序

如前所述，我们将从 JavaScript 程序开始，稍后将其转换为 TypeScript。首先创立一个带有main.js?和?information-logger.js?文件的?src/?目录，其中包含少量 Node.js 功能：

1//?src/information-logger.js

2constos?=require(‘os’);

3const{?name,?version}?=require(‘../package.json’);

4module.exports?=?{

5logApplicationInformation:()=>

6console.log({

7application:?{

8name,

9version,

10},

11}),

12logSystemInformation:()=>

13console.log({

14system:?{

15platform:?process.platform,

16cpus:?os.cpus().length,

17},

18}),

19};

20//?src/main.js

21constinformationLogger?=require(‘./information-logger’);

22informationLogger.logApplicationInformation();

23informationLogger.logSystemInformation();

这段脚本会将少量系统信息输出到控制台。运行?node main.js?后，可以看到以下输出：

1{?application:?{?name:?’node-typescript’,?version:?’0.0.1′?}?}

2{?system:?{?platform:?’linux’,?cpus:8}?}

Webpack

在使用 Webpack 之前，需要做的第一件事就是安装必要的依赖项。不要不记得使用?-D?标志，它代表 devDependencies。

1npm?i?-D?webpack?webpack-cli

你可能注意到我没有安装?webpack-dev-server?。这由于我们正在创立一个 Node.js 应用程序。后面我会使用?nodemon，它有相同的用途。

webpack.config.js

下一步是创立一个?webpack.config.js?文件，通过它告诉 Webpack 应该如何解决我们的代码。

1//?webpack.config.js

2’use?strict’;

3module.exports?=(env?=?{})?=>{

4constconfig?=?{

5entry:?[‘./src/main.js’],

6mode:?env.development??’development’:’production’,

7target:’node’,

8devtool:?env.development??’cheap-eval-source-map’:false,

9};

10returnconfig;

11};

如你所见，从 Webpack 开始并不需要太多配置。唯一需要的两个选项是?entry?和?target。我们用?entry?字段公告程序的入口点，告诉 Webpack 在 Node.js 中使用?target?字段。

可以用?mode?字段告诉 Webpack 它应该关注编译速度（开发）还是混淆和缩小（生产）。为了帮助调试，需要在开发模式中运行，用?devtool?字段来指示我们想要源映射。这样，假如出现错误，可以很容易地在代码中找到它出现的位置。

要使用 Webpack，需要创立少量 npm 命令：

1//?package.json

2…

3″scripts”:?{

4″start”:”webpack?–progress?–env.development”,

5″start:prod”:”webpack?–progress”

6},

7…

现在可以通过运行这些命令来构建程序。它将创立一个目录?dist/，其中包含输出文件main.js?。可以用 webpack.config.js 中的 output configuration 指定一个不同的名称。

我们的项目现在应该是这样的：

1dist/

2main.js

3node_modules/

4src/

5information_logger.js

6main.js

7package-lock.json

8package.json

9webpack.config.js

nodemon

你可能已经注意到，在运行启动命令后，Webpack 会在构建应用程序后中止。它不会监视我们对的文件所所做的改动。因为我们正在使用 Node.js，所以无法用?webpack-dev-server。

幸运的是可以用?nodemon?来处理这个问题。它是专门为这个目的而开发的工具：在开发期间重新启动 Node.js 应用程序。

让我们从安装?nodemon-webpack-plugin开始。不要不记得?-D?标志，由于它是一个 devDependency。

1npm?i?-D?nodemon-webpack-plugin

让我们创立一个新的?nodemon?标志，并将插件增加到的?webpack.config.js?中。

1//?webpack.config.js

2’use?strict’;

3constNodemonPlugin?=require(‘nodemon-webpack-plugin’);

4module.exports?=(env?=?{})?=>{

5constconfig?=?{

6entry:?[‘./src/main.js’],

7mode:?env.development??’development’:’production’,

8target:’node’,

9devtool:?env.development??’cheap-eval-source-map’:false,

10resolve:?{//?tells?Webpack?what?files?to?watch.

11modules:?[‘node_modules’,’src’,’package.json’],

12},

13plugins:?[]//?required?for?config.plugins.push(…);

14};

15if(env.nodemon)?{

16config.watch?=true;

17config.plugins.push(newNodemonPlugin());

18}

19returnconfig;

20};

当我们传递 nodemon 标志时，需要设置 Webpack?watch?config，并增加?nodemon?插件。当我们更改文件时，Webpack?watch?config 将会重建程序。?nodemon?插件会在重建完成后重新启动程序。

我们还需要升级 npm 命令。我还创立了少量没有?nodemon标志的构建命令，。

1//?package.json

2…

3scripts:?[

4″start”:”webpack?–progress?–env.development?–env.nodemon”,

5″start:prod”:”webpack?–progress?–env.nodemon”,

6″build”:”webpack?–progress?–env.development”,

7″build:prod”:”webpack?–progress”,

8″build:ci”:”webpack”

9],

10…

我们完成了 Node.js 程序的基本 Webpack 设置。下一步是增加 TypeScript！

TypeScript

现在让我们增加 TypeScript！首先安装需要的依赖项。

因为这是一个 Node.js 项目，我们还需要安装相关的支持。我正在研究 Node.js 的 LTS 版本，也就是10 版。这就是我安装?^ 10.0.0?版的起因。

1npm?i?-D?typescript?ts-loader?@types/node@^10.0.0

ts-loader

我们将用?ts-loader?Webpack 插件来编译 TypeScript。

我们需要将?entry?文件的后缀更改为?.ts?并告诉 webpack 它还必需解析?.ts?文件（默认情况下，Webpack仅适用于?.js?文件）。

1//?webpack.config.js

2…

3const?config?=?{

4entry:?[‘./src/main.ts’],

5mode:?env.development??’development’:’production’,

6target:’node’,

7devtool:?env.development??’cheap-eval-source-map’:false,

8resolve:?{

9//?Tells?Webpack?what?files?to?watch??????

10extensions:?[‘.ts’,’.js’],

11modules:?[‘node_modules’,’src’,’package.json’],

12},

13module:?{

14rules:?[

15{

16test:/\.ts$/,

17use:’ts-loader’,

18},

19],

20},

21plugins:?[],//?Required?for?config.plugins.push(…);

22};

23…

tsconfig.json

假如现在尝试运行我们的程序，它将会崩溃。由于还缺少 tsconfig.json 文件。所以先创立一个。

1//?tsconfig.json

2{

3″compilerOptions”:?{

4″target”:”esnext”,

5″module”:”esnext”,

6″moduleResolution”:”node”,

7″lib”:?[“dom”,”es2018″],

8″allowSyntheticDefaultImports”:true,

9″noImplicitAny”:true,

10″noUnusedLocals”:true,

11″removeComments”:true,

12″resolveJsonModule”:true,

13″strict”:true,

14″typeRoots”:?[“node_modules/@types”]

15},

16″exclude”:?[“node_modules”],

17″include”:?[“src/**/*.ts”]

18}

如上所示，我更喜欢严格的 tsconfig 文件，你可以不必这样做。我喜欢把自己的目标代码语法版本设定的很高（?esnext?或者?es2018），由于 Node.js 对新的 JavaScript 功能支持的非常好。

程序

我们依然需要将 JavaScript 文件的扩展名从?.js?改为.ts。让我们这样做并尝试运行项目。

运行项目后，可以立即看到我们在创立的测试应用程序中犯了“错误”。我们无法对 package.json 中的?name?字段进行解构，由于它可能已经被定义了或者者我们覆盖了它。所以需要做少量改动。

1//?information-logger.ts

2importosfrom’os’;

3import{?name,?version?}from’../package.json’;

4exportclassInformationLogger{

5staticlogApplicationInformation():void{

6console.log({

7application:?{

8name,

9version,

10},

11});

12}

13staticlogSystemInformation():void{

14console.log({

15system:?{

16platform:?process.platform,

17cpus:?os.cpus().length,

18},

19});

20}

21}

22//?main.ts

23import{?InformationLogger?}from’./information-logger’;

24InformationLogger.logApplicationInformation();

25InformationLogger.logSystemInformation();

假如你遵循了前面所有步骤，那么现在项目结构应该是这样的：

1dist/

2main.js

3node_modules/

4src/

5information-logger.ts

6main.ts

7package-lock.json

8package.json

9tsconfig.json

10webpack.config.js

我们已准备好用 TypeScript 编写 Node.js 程序了！

最后的注意事项

我确信在 TypeScript 中有数千种不同的方法来编写 Node.js 应用程序。我所写下的绝不是你必需要照样做的方式，这只是你可以做到的方式中的一种。

剩下来的步骤可能是增加 TSLint 集成，增加 Dockerfile，设置 CI 管道……一切尽在你的掌握之中。

多年编程经验，今年1月整理了一批2019年最新WEB前台教学视频，不管是零基础想要学习前台还是学完在工作想要提升自己，这些资料都会给你带来帮助，从HTML到各种框架，帮助所有想要学好前台的同学，学习规划、学习路线、学习资料、问题解答。只需加入WEB前台学习交流qun：296212562，就可免费获取，学习不怕从零开始，就怕从不开始。