Photo by Joshua Aragon on Unsplash
当我第一次发现 TypeScript 时，就把它用到了自己的 JavaScript 程序中。使用 TypeScript 有很多好处，现在你要让我在用原生 JavaScript 写任何东西的话，需要给我一个令人信服的理由。
在本文中，我将向你展示如何设置一个简单的开发环境，以便使用 TypeScript 编写 Node.js 程序。
首先在 TypeScript 中可能有一千种或更多种不同的方法去创建 Node.js 应用程序。我只是想展示自己喜欢的方式。
另外你可以在此处找到我的入门项目：https://github.com/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，即可免费获取，学习不怕从零开始，就怕从不开始。
网友评论