手把手教你使用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目录下),打印了我的笔记本电脑的信息

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指定输出不同的名称,现在的目录结构应该如下

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 

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

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

时间: 2019-05-05

TypeScript开发Node.js程序的方法

当我第一次发现 TypeScript 时,就把它用到了自己的 JavaScript 程序中.使用 TypeScript 有很多好处,现在你要让我在用原生 JavaScript 写任何东西的话,需要给我一个令人信服的理由. 在本文中,我将向你展示如何设置一个简单的开发环境,以便使用 TypeScript 编写 Node.js 应用程序. 首先在 TypeScript 中可能有一千种或更多种不同的方法去创建 Node.js 程序.我只是想展示自己喜欢的方式. 另外你可以在此处找到我的入门项目:htt

详解使用Typescript开发node.js项目(简单的环境配置)

最近在学习typescript的过程中,想到也许可以使用ts来开发node.js项目.在网上搜了一下,其实已经有很多开发者实践了这方面的内容.这里,我记录一下自己搭建开发环境的简单过程. 使用Typescript开发的好处: 较严格的类型检查和语法检查. 对ES6/ES2015/ES7(部分)支持比较好. 编译后的js文件很干净,也支持多种代码规范. 其他,请参见文档. 准备 node.js v6.9.1 或者任意的新版本,老版本暂时没有试验. tsc typescript编译器,使用npm安装

详解使用nvm安装node.js

我最近在研究node.js的路上,那么今天也算个学习笔记吧! 一.Windows系统 1.node.js下载应用程序,压缩,安装 http://www.jb51.net/softs/504128.html 2.nvm的安装路径下,找到settings.txt打开,在后面加上(添加淘宝镜像node) node_mirror: https://npm.taobao.org/mirrors/node/ npm_mirror: https://npm.taobao.org/mirrors/npm/ 3.

详解Wondows下Node.js使用MongoDB的环境配置

为了保存网站的用户数据和业务数据,通常需要一个数据库.MongoDB和Node.js特别般配,因为MongoDB是基于文档的非关系型数据库,文档是按BSON(JSON的轻量化二进制格式)存储的,增删改查等管理数据库的命令和JavaScript语法很像.如果你在Node.js里访问MongoDB的数据,会有我们是一家人的感觉,特别亲切. 我也准备使用MongoDB来作为我的数据库. MongoDB使用集合(collection)和文档(document)来描述和存储数据,collection就相当

详解把Node.js项目部署到阿里云服务器(CentOs)

最近用node.js开发了一个web项目,开发完打算先部署到我自己买的阿里云学生服务器上,让客户先试用下网站.不知道如何把node.js项目部署到阿里云服务器,在问了飞哥哥之后,在网上找了下教程,部署成功.把教程整合了一下,做下分享. 服务器 服务器选择了阿里云学生服务器:9.92一个月,适合用来个人开发测试. 配置: 系统:CentOS6.5 64位(Linux系统的一种) 配置环境配置服务器环境 1.在阿里云管理控制台把云服务器实例启动 2.登入服务器:用Putty 或 Xshell(我使用

详解从买域名到使用pm2部署node.js项目全过程

作为一个前端,对写好的项目怎么部署到服务器是一脸蒙圈的,但还是对这个很感兴趣,决定尝试一下,说干就干. 一.买域名和服务器 要部署项目肯定要买域名,这点是必不可少的,发现腾讯云上边有免费的服务器可用(只免费7天),于是就到腾讯云买了域名,又在腾讯云领了免费的服务器,当然这期间会让你实名认证. 买域名 领服务器 在腾讯云选择了CentOS服务器,接下来进行域名解析,然后对服务器进行设置(账号密码之类的) 域名解析 二.部署Node.js环境 (一)登录服务器,先更新一下(第一次使用服务器先更新下)

详解Node.js项目APM监控之New Relic

现在上一个项目,如果没有APM监控服务或应用的运行性能参数,等于是一架没有盲降系统的飞机正在盲降,结果会很悲催.出现了访问失效等问题时,都很难判定是性能瓶颈还是一个藏的深的bug,汇报的时候一顿眼晕,这样的结果肯定是要被人分分钟的各种撕. 目前还没有像样的给node.js项目应用的APM开源项目,暂且先羡慕嫉妒下给java用的PinPoint. 不用开源的就用专业的APM提供商的产品,先解决问题,国内有很多专业提供商,也是不错. 国外的New Relic也是被推荐的一家,集成进node.js特别

详解用node.js实现简单的反向代理

之前用node.js实现简单的反向代理,最近需要回顾,就顺便发到随笔上了 不多说直接上代码! const http = require('http'); const url = require('url'); const querystring = require('querystring'); http.createServer(function(oreq, ores) { console.log("服务已开启"); if (oreq) { if (oreq.url !== '/fa

详解Kotlin Android开发中的环境配置

详解Kotlin Android开发中的环境配置 在Android Studio上面进行安装插件 在Settings ->Plugins ->Browse repositores.. ->kotlin 安装完成后重启Android Studio就生效了 如图所示: 在Android Studio中做Kotlin相关配置 (1)在根目录 的build.gradle中进行配置使用,代码如下: buildscript { ext.kotlin_version = '1.1.2-4' repos