手把手教你使用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 相关文章推荐
如何实现浏览器上的右键菜单
Jul 10 Javascript
jquery垂直公告滚动实现代码
Dec 08 Javascript
Extjs 4.x 得到form CheckBox 复选框的值
May 04 Javascript
javascript从定义到执行 你不知道的那些事
Jan 04 Javascript
js控件Kindeditor实现图片自动上传功能
Jul 20 Javascript
JavaScript 程序错误Cannot use 'in' operator to search的解决方法
Jul 10 Javascript
简单实现jquery隔行变色
Nov 09 jQuery
深入理解 JS 垃圾回收
Jun 03 Javascript
基于webpack4+vue-cli3项目实现换肤功能
Jul 17 Javascript
Vue路由模块化配置的完整步骤
Aug 14 Javascript
解决vue+elementui项目打包后样式变化问题
Aug 03 Javascript
vue实现单一筛选、删除筛选条件
Oct 26 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
分享PHP-pcntl 实现多进程代码
2016/09/30 PHP
浅谈PHP中pack、unpack的详细用法
2018/03/12 PHP
PHP获取类私有属性的3种方法
2020/09/10 PHP
ASP 过滤数组重复数据函数(加强版)
2010/05/31 Javascript
Js sort排序使用方法
2011/10/17 Javascript
深入理解JavaScript系列(4) 立即调用的函数表达式
2012/01/15 Javascript
jquery操作cookie插件分享
2014/01/14 Javascript
返回上一页并自动刷新的JavaScript代码
2014/02/19 Javascript
JS实现的一个简单的Autocomplete自动完成例子
2014/04/16 Javascript
jquery实现动静态条形统计图
2015/08/17 Javascript
jquery+CSS3实现淘宝移动网页菜单效果
2015/08/31 Javascript
JS+CSS实现类似QQ好友及黑名单效果的树型菜单
2015/09/22 Javascript
易被忽视的js事件问题总结
2016/05/14 Javascript
Node.js获取前端ajax提交的request信息
2017/02/20 Javascript
利用js的闭包原理做对象封装及调用方法
2017/04/07 Javascript
JS实现unicode和UTF-8之间的互相转换互转
2017/07/05 Javascript
自适应布局meta标签中viewport、content、width、initial-scale、minimum-scale、maximum-scale总结
2017/08/18 Javascript
vue 组件高级用法实例详解
2018/04/11 Javascript
Vue引入Stylus知识点总结
2020/01/16 Javascript
vue中解决微信html5原生ios虚拟键返回不刷新问题
2020/10/20 Javascript
Python HTMLParser模块解析html获取url实例
2015/04/08 Python
使用Python的Tornado框架实现一个Web端图书展示页面
2016/07/11 Python
python绘制简单折线图代码示例
2017/12/19 Python
python之pandas用法大全
2018/03/13 Python
Python3用tkinter和PIL实现看图工具
2018/06/21 Python
Python如何使用argparse模块处理命令行参数
2019/12/11 Python
Django REST framwork的权限验证实例
2020/04/02 Python
浅谈numpy中np.array()与np.asarray的区别以及.tolist
2020/06/03 Python
详解纯CSS3制作的20种loading动效
2017/07/05 HTML / CSS
您在慕尼黑的跑步商店:Lauf-bar
2019/10/11 全球购物
文秘专业大学生求职信
2013/11/10 职场文书
承诺书样本
2014/08/30 职场文书
幼儿园教师节演讲稿
2014/09/03 职场文书
刑事附带民事诉讼答辩状
2015/05/22 职场文书
详解CSS伪元素的妙用单标签之美
2021/05/25 HTML / CSS
日本官方排名前10的动漫,名侦探柯南上榜,第一是一部创造历史的动漫
2022/03/18 日漫