深圳幻海软件技术有限公司 欢迎您!

手把手教你使用TypeScript开发Node.js应用

2023-02-26

为什么要使用TypeScript?为了减少代码编写过程中出现的错误,以及更好的维护你的项目,本文将手把手教你配置一个简单的开发环境来编写Node.js的应用程序,创建这样的一个开发环境有很多方式,这只是其中一种,希望对你有所帮助!手把手教你使用TypeScript开发Node.js应用首先配置pac

为什么要使用TypeScript?

为了减少代码编写过程中出现的错误,以及更好的维护你的项目,本文将手把手教你配置一个简单的开发环境来编写Node.js的应用程序,创建这样的一个开发环境有很多方式,这只是其中一种,希望对你有所帮助!

手把手教你使用TypeScript开发Node.js应用

首先配置package.json

因为要在项目中使用Webpack,所以首先得创建一个package.json文件,我们可以使用npm init来生成 

 
 "name": "start",  
 "version": "1.0.0",  
 "description": "",  
 "main": "index.js",  
 "scripts": {  
 "test": "echo "Error: no test specified" && exit 1"  
 },  
 "author": "",  
 "license": "ISC"  

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.

后面用到其他的在添加

开始

我们在项目的根目录创建一个src目录,添加一个main.js和information-logger.js文件,我们先使用Javascript来创建: 

// src/information-logger.js  
const os = require('os');  
const { name, version} = require('../package.json');  
module.exports = {  
 logApplicationInformation: () =>  
 console.log({  
 application: {  
 name,  
 version,  
 },  
 }),  
 logSystemInformation: () =>  
 console.log({  
 system: {  
 platform: process.platform,  
 cpus: os.cpus().length,  
 },  
 }),  
};  
// src/main.js  
const informationLogger = require('./information-logger');  
informationLogger.logApplicationInformation();  
informationLogger.logSystemInformation(); 
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.

我们先运行一下:node main.js(先到src目录下),打印了我的笔记本电脑的信息:

Webpack

首先***件事就是要配置Webpack的依赖项,记得用下面的命令,带上 -d,因为我们只在开发环境下 :

npm i -D webpack webpack-cli 
  • 1.

我们没用到webpack-dev-server,安装完成后我们创建webpack.config.js的配置文件。

'use strict';  
module.exports = (env = {}) => {  
 const config = {  
 entry: ['./src/main.js'],  
 mode: env.development ? 'development' : 'production',  
 target: 'node',  
 devtool: env.development ? 'cheap-eval-source-map' : false,  
 };  
return config;  
}; 
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.

最开始我们没那么多的配置需要配置。我们要使用它,先改一下package.json :

“scripts”:{   
 “start”:“webpack --progress --env.development”,  
 “start :prod”:“webpack --progress”   
 }, 
  • 1.
  • 2.
  • 3.
  • 4.

然后我们就可以通过任一命令(npm start)来构建应用程序,它会创建一个dist/main.js,我们可也使用webpack.config.js指定输出不同的名称,现在的目录结构应该如下:

nodemon

为什么不用webpack-dev-server,是因为没法用,所以可以使用nodemon来解决,它可以在我们开发期间重新启动Node.js的应用程序,一样我们先来安装,依然需要 -d 。

npm i -D nodemon-webpack-plugin 
  • 1.

然后重新配置webpack.config.js 。

// webpack.config.js  
'use strict';  
const NodemonPlugin = require('nodemon-webpack-plugin');  
module.exports = (env = {}) => {  
 const config = {  
 entry: ['./src/main.js'],  
 mode: env.development ? 'development' : 'production',  
 target: 'node',  
 devtool: env.development ? 'cheap-eval-source-map' : false,   
 resolve: { // tells Webpack what files to watch.  
 modules: ['node_modules', 'src', 'package.json'],  
 },   
 plugins: [] // required for config.plugins.push(...);  
 };  
if (env.nodemon) {  
 config.watch = true 
 config.plugins.push(new NodemonPlugin());  
 }  
return config;  
}; 
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.

Webpack 监视配置将在我们更改文件时重建应用程序,nodemon在我们构建完成重新启动应用程序,需要重新配置下package.json 。

"scripts": {  
 "start": "webpack --progress --env.development --env.nodemon",  
 "start:prod": "webpack --progress --env.nodemon",  
 "build": "webpack --progress --env.development",  
 "build:prod": "webpack --progress",  
 "build:ci": "webpack"  
 }, 
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.

使用TypeScript

先安装依赖项:

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

ts-loader(ts加载器)

因为要用ts-loader Webpack插件来编译我们的TypeScript,所以得让Webpack知道我们是使用了ts-loader插件来处理TypeScript文件的,更新之前的webpack.config.js 

// webpack.config.js  
 'use strict';  
const NodemonPlugin = require('nodemon-webpack-plugin');  
module.exports = (env = {}) => {  
 const config = {  
 entry: ['./src/main.ts'],  
 mode: env.development ? 'development' : 'production',  
 target: 'node',  
 devtool: env.development ? 'cheap-eval-source-map' : false,  
 resolve: {  
 // Tells Webpack what files to watch   
 extensions: ['.ts', '.js'],  
 modules: ['node_modules', 'src', 'package.json'],  
 },  
 module: {  
 rules: [  
 {  
 test: /.ts$/,  
 use: 'ts-loader',  
 },  
 ],  
 },  
 plugins: [], // Required for config.plugins.push(...);  
 };  
if (env.nodemon) {  
 config.watch = true 
 config.plugins.push(new NodemonPlugin());  
 }  
return config;  
}; 
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.

tsconfig.json

TypeScript的配置文件:

// tsconfig.json  
 
 "compilerOptions": {  
 "target": "esnext",  
 "module": "esnext",  
 "moduleResolution": "node",  
 "lib": ["dom", "es2018"],  
 "allowSyntheticDefaultImports": true,  
 "noImplicitAny": true, 
  "noUnusedLocals": true,  
 "removeComments": true,   
 "resolveJsonModule": true,  
 "strict": true,  
 "typeRoots": ["node_modules/@types"]  
 },  
 "exclude": ["node_modules"],  
 "include": ["src/**/*.ts"]  

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.

然后更改下之前创建的js文件扩展名:

// information-logger.ts  
import os from 'os';  
import { name, version } from '../package.json';  
export class InformationLogger {  
 static logApplicationInformation(): void {  
 console.log({  
 application: {  
 name,  
 version,  
 },  
 });  
 }  
static logSystemInformation(): void {  
 console.log({  
 system: {  
 platform: process.platform,  
 cpus: os.cpus().length,  
 },  
 });  
 }  
 
// main.ts  
import { InformationLogger } from './information-logger';  
InformationLogger.logApplicationInformation();  
InformationLogger.logSystemInformation(); 
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.

现在目录结构应该是这样的

总结

我们可以使用多种方式来创建TypeScript的Nodejs应用,不必拘泥于这一种,而且可能会有人并不赞同,因为TypeScript比纯Javascript更需要花费更多精力,不过在新项目中,你仍然可以尝试这种方式,如果你有什么好的建议,欢迎在评论区留下你的意见!