手把手教你使用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 相关文章推荐
控制打印时页眉角的代码
Feb 08 Javascript
JS取文本框中最小值的简单实例
Nov 29 Javascript
JS获取select的value和text值的简单实例
Feb 26 Javascript
利用js实现禁止复制文本信息
Jun 03 Javascript
sso跨域写cookie的一段js脚本(推荐)
May 25 Javascript
Angular的$http与$location
Dec 26 Javascript
JS实现移动端整屏滑动的实例代码
Nov 10 Javascript
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
Apr 17 jQuery
详解react-redux插件入门
Apr 19 Javascript
Vue $emit $refs子父组件间方法的调用实例
Sep 12 Javascript
vue如何实现自定义底部菜单栏
Jul 01 Javascript
基于小程序请求接口wx.request封装的类axios请求
Jul 02 Javascript
微信小程序上线发布流程图文详解
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
全新的PDO数据库操作类php版(仅适用Mysql)
2012/07/22 PHP
9个实用的PHP代码片段分享
2015/01/22 PHP
php 修改上传文件大小限制实例详解
2016/10/23 PHP
PHP判断是手机端还是PC端 PHP判断是否是微信浏览器
2017/03/15 PHP
PHP实现打包下载文件的方法示例
2017/10/07 PHP
PHP判断当前使用的是什么浏览器(推荐)
2019/10/27 PHP
解决FLASH需要点击激活的代码
2006/12/20 Javascript
转自Jquery官方 jQuery1.1.3发布,速度提升800%,体积保持20K
2007/08/19 Javascript
jQuery UI Dialog控件中的表单无法正常提交的解决方法
2010/12/19 Javascript
jquery lazyload延迟加载技术的实现原理分析
2011/01/24 Javascript
jquery动感漂浮导航菜单代码分享
2020/04/15 Javascript
JavaScript实现简单的tab选项卡切换
2016/01/05 Javascript
javascript设计模式之Adapter模式【适配器模式】实现方法示例
2017/01/13 Javascript
原生JS实现左右箭头选择日期实例代码
2017/03/14 Javascript
浅谈angular2 组件的生命周期钩子
2017/08/12 Javascript
详解小程序输入框闪烁及重影BUG解决方案
2018/08/31 Javascript
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
2019/02/14 jQuery
vue中实现上传文件给后台实例详解
2019/08/22 Javascript
微信小程序单选框自定义赋值
2020/05/26 Javascript
[00:33]2016完美“圣”典风云人物:BurNIng宣传片
2016/12/10 DOTA
pytorch + visdom 处理简单分类问题的示例
2018/06/04 Python
使用python对文件中的单词进行提取的方法示例
2018/12/21 Python
python实现Dijkstra算法的最短路径问题
2019/06/21 Python
python命令行工具Click快速掌握
2019/07/04 Python
带你彻底搞懂python操作mysql数据库(cursor游标讲解)
2020/01/06 Python
flask 框架操作MySQL数据库简单示例
2020/02/02 Python
django model object序列化实例
2020/03/13 Python
CSS3 实现时间轴动画
2020/11/25 HTML / CSS
来自美国主售篮球鞋的零售商店:KICKSUSA
2017/11/28 全球购物
北京捷通华声语音技术有限公司Java软件工程师笔试题
2012/04/10 面试题
实习生体会的自我评价范文
2013/11/28 职场文书
商务英语应届生自我鉴定
2013/12/08 职场文书
舞蹈毕业生的自我评价
2014/03/05 职场文书
学校政风行风评议心得体会
2014/10/21 职场文书
如何优化vue打包文件过大
2022/04/13 Vue.js
nginx lua 操作 mysql
2022/05/15 Servers