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


Posted in Javascript onMay 06, 2019

为什么要使用TypeScript?

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

手把手教你使用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" 
}

后面用到其他的在添加

开始

我们在项目的根目录创建一个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();

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

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

Webpack

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

npm i -D webpack webpack-cli

我们没用到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; 
};

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

“scripts”:{  
 “start”:“webpack --progress --env.development”, 
 “start :prod”:“webpack --progress”  
 },

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

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

nodemon

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

npm i -D nodemon-webpack-plugin

然后重新配置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; 
};

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" 
 },

使用TypeScript

先安装依赖项

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

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

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; 
};

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"] 
}

然后更改下之前创建的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();

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

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

总结

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript new fun的执行过程
Aug 05 Javascript
javascript 二进制运算技巧解析
Nov 27 Javascript
JavaScript中圆括号()和方括号[]的特殊用法疑问解答
Aug 06 Javascript
js对列表中第一个值处理与jsp页面对列表中第一个值处理的区别详解
Nov 05 Javascript
js判断元素是否隐藏的方法
Jun 09 Javascript
JavaScript实现定时隐藏与显示图片的方法
Aug 06 Javascript
详解微信小程序入门五: wxml文件引用、模版、生命周期
Jan 20 Javascript
jQuery实现动态添加节点与遍历节点功能示例
Nov 09 jQuery
Vue2.5学习笔记之如何在项目中使用和配置Vue
Sep 26 Javascript
vue中el-upload上传图片到七牛的示例代码
Oct 19 Javascript
vue 中使用print.js导出pdf操作
Nov 13 Javascript
vue使用transition组件动画效果的实例代码
Jan 28 Vue.js
微信小程序上线发布流程图文详解
May 06 #Javascript
ES6的解构赋值实例详解
May 06 #Javascript
3分钟读懂移动端rem使用方法(推荐)
May 06 #Javascript
Vue动态组件和异步组件原理详解
May 06 #Javascript
微信小程序按钮点击跳转页面详解
May 06 #Javascript
详解vue中移动端自适应方案
May 05 #Javascript
解决ie11 SCRIPT5011:不能执行已释放Script的代码问题
May 05 #Javascript
You might like
php函数与传递参数实例分析
2014/11/15 PHP
php递归遍历多维数组的方法
2015/04/18 PHP
php类常量用法实例分析
2015/07/09 PHP
用JS操作FRAME中的IFRAME及其内容的实现代码
2008/07/26 Javascript
根据鼠标的位置动态的控制层的位置
2009/11/24 Javascript
jQuery 顺便学习下CSS选择器 奇偶匹配nth-child(even)
2010/05/24 Javascript
第三篇Bootstrap网格基础
2016/06/21 Javascript
微信小程序 开发工具快捷键整理
2016/10/31 Javascript
在JS中a标签加入单击事件屏蔽href跳转页面
2016/12/16 Javascript
javascript 中的继承实例详解
2017/05/05 Javascript
jquery仿京东商品放大浏览页面
2017/06/06 jQuery
Angular实现点击按钮控制隐藏和显示功能示例
2017/12/29 Javascript
vue 使用ref 让父组件调用子组件的方法
2018/02/08 Javascript
详解Vue项目在其他电脑npm run dev运行报错的解决方法
2018/10/29 Javascript
bootstrap table实现合并单元格效果
2018/12/24 Javascript
React 使用Hooks简化受控组件的状态绑定
2019/03/18 Javascript
layui中的switch开关实现方法
2019/09/03 Javascript
使用layui的layer组件做弹出层的例子
2019/09/27 Javascript
jsonp格式前端发送和后台接受写法的代码详解
2019/11/07 Javascript
JS获取当前时间的年月日时分秒及时间的格式化的方法
2019/12/18 Javascript
python中stdout输出不缓存的设置方法
2014/05/29 Python
python交易记录整合交易类详解
2019/07/03 Python
Pytorch中index_select() 函数的实现理解
2019/11/19 Python
Django基于客户端下载文件实现方法
2020/04/21 Python
python神经网络编程实现手写数字识别
2020/05/27 Python
Spartoo英国:欧洲最大的网上鞋店
2016/09/13 全球购物
波兰办公用品和学校用品在线商店:Dlabiura24.pl
2020/11/18 全球购物
什么是岗位职责
2013/11/12 职场文书
预备党员2014全国两会学习心得体会
2014/03/10 职场文书
实习推荐信
2014/05/10 职场文书
房屋租赁授权委托书范本
2014/09/20 职场文书
2016年学校禁毒宣传活动工作总结
2016/04/05 职场文书
MySQL Innodb索引机制详细介绍
2021/11/23 MySQL
十大最帅动漫男主 碓冰拓海上榜,第一是《灌篮高手》男主角
2022/03/18 日漫
victoriaMetrics库布隆过滤器初始化及使用详解
2022/04/05 Golang
java中如何截取字符串最后一位
2022/07/07 Java/Android