QQ登录

只需一步,快速开始

NodeJs笔记:使用 typeScript 开发的搭配

依梦瑶 发表于 2019-5-23 15:41:02 | 显示全部楼层 |阅读模式

上几周时间都在学习 angular4 中,由于我现在的开发主要是在后端程序,而对前端的开发只保留了学习编程初期时的一些知识,所以我前端方面的开发并不是很深入,只是了解了 JavaScript 一些皮毛,掌握 JQuery 的基本使用,平时用的前端开发也是应付着去做,遇到难点就找别人写案例来用,而近几年大部分的时间也都是花在后端的开发上了。

而这几年新出的前端知识也没有去深入的研究。之所以这几个月花时间去接触 angular 包括了从第1版到第4版的相关基本知识,也是因为 angularJS 可以作为很好的前端模板引擎结合 JQuery 的页面特效的一个组合,还有就是 angular2 之后采用了 TypeScript 新的语言,在 TypeScript 代码中看到后台编程的一些影子,它是  javaScript 的升华。所以借学习 TypeScript 的机会再回过头来看如何在 Node 中用它来开发。

一、配置环境

1.1、建立 node 项目

使用终端工具,在项目的根目录(注意是空目录)中执行“npm init -y”命令创建一个“package.json”的文件,文件中的基本信息为:

  1. {
  2.   "name": "nodejs",
  3.   "version": "1.0.0",
  4.   "description": "",
  5.   "main": "index.js",
  6.   "scripts": {
  7.     // npm run start
  8.     "start": "node ./build/hello",
  9.     "test": "echo "Error: no test specified" && exit 1"
  10.   },
  11.   "keywords": [],
  12.   "author": "",
  13.   "license": "ISC"
  14. }
复制代码

接着引入 node 的运行定义文件,引入的命令是“npm i @types/node –save”。

npm 不加配置的话是原生镜像地址,会涉及翻墙的问题,使用以下淘宝镜像可解决:

  1. npm install @types/node --registry=http://registry.npm.taobao.org
  2. npm install typescript --registry=http://registry.npm.taobao.org
复制代码

1.2、创建“tsconfig.json”

node 本身是不认 typeScript 语言的,所以要将 typeScript 编译成 javaScript,所以在项目的根目录就要创建一个“tsconfig.json”,这个文件是用来告诉编译器如何将 typeScript 编译成 javaScript。

  1. {
  2.   // 编译器的配置
  3.   "compilerOptions": {
  4.     // 指定生成哪个模块系统代码
  5.     "module": "commonjs",
  6.     // 目标代码类型
  7.     "target": "es5",
  8.     // emitDecoratorMetadata 和 experimentalDecorators 是与装饰器相关的
  9.     // 在编译的时候保留装饰器里面的原数据
  10.     "emitDecoratorMetadata": true,
  11.     "experimentalDecorators": true,
  12.     // 在表达式和声明上有隐含的'any'类型时报错。
  13.     "noImplicitAny": false,
  14.     // 用于debug
  15.     "sourceMap": false,
  16.     // 仅用来控制输出的目录结构--outDir。
  17.     "rootDir": "./src",
  18.     // 编译完后要放在哪个文件夹里面
  19.     "outDir": "./build",
  20.     // 在监视模式下运行编译器。会监视输出文件,在它们改变时重新编译。
  21.     "watch": true,
  22.     // 开发的时候要使用 es6 的语法
  23.     "lib": ["es6"]
  24.   },
  25.   "include": [
  26.     "./src/**/*"
  27.   ],
  28.   // 排除编译的时候哪些个文件要排除掉
  29.   "exclude": [
  30.     "node_modules"
  31.     "views",
  32.     "static"
  33.   ]
  34. }
复制代码

在编辑完“tsconfig.json”之后,如果你使用的也是 WebStorm 编辑器,通过“setting”来设置让 IDE 知道要使用这个配置文件作为配置来编译 TypeScript 。

1.png

图1:配置步骤

二、测试项目的正常启动

2.1、在“src/hello.ts”中输入代码

  1. import * as http from 'http';
  2. const server = http.createServer((req, res)=>{
  3.     res.end('Hello Node!');
  4. });
  5. server.listen(3000);
复制代码

2.2、在终端中输入启动服务命令

  1. node build/hello.js
复制代码

2.3、在浏览器中输入“http://localhost:3000/”运行后的效果

2.png

图2、运行后的效果

三、简单的路由

3.1、引入“express”依赖库

  1. npm install express --save
复制代码

3.2、在入口的 TS 文件里面输入代码

  1. // 入口
  2. import * as express from 'express';
  3. const app = express();
  4. app.get('/', (req, res) => res.end('This is Home!'));
  5. app.get('/users', (req, res) => res.end('This is User!'));
  6. const port = 3000;
  7. const host = 'localhost';
  8. const serv = app.listen(port, host, () => {
  9.     console.log(`server start, address: http://${host}:${port}`);
  10. });
复制代码

3.3、简单的传参路由

  1. // 入口
  2. import * as express from 'express';
  3. import * as path from 'path';
  4. import * as  bodyParser from 'body-parser';
  5. const app = express();
  6. // parse application/json
  7. app.use(bodyParser.json());
  8. // 静态资源文件,例如图片、CSS、JavaScript 文件等
  9. app.use(express.static(path.join(__dirname, 'static')));
  10. app.get('/', (req, res) => res.end('This is home!'));
  11. app.get('/users', (req, res) => {
  12.     res.json(users);
  13. });
  14. app.get('/users/:id', (req, res) => {
  15.     res.json(users.find((user)=>user.id == req.params.id));
  16. });
  17. const serv = app.listen(3000, ()=>{
  18.     const host = serv.address().address;
  19.     const port = serv.address().port;
  20.     console.log(`server start, address: http://${host}:${port}`);
  21. });
  22. export class User {
  23.     constructor(public id: number,
  24.                 public name: string) {}
  25. }
  26. const users: User[] = [
  27.     new User(1, '张三'),
  28.     new User(2, '李四'),
  29.     new User(3, '王五'),
  30. ];
复制代码
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

精华推荐
  • 探究!做设计之前的“构思”

    探究!做设计之前的“构思”

  • 汉字之美!中文字体设计原则

    汉字之美!中文字体设计原则

  • 一支互联网雪糕的诞生

    一支互联网雪糕的诞生

  • 设计灵感来自何处?

    设计灵感来自何处?

  • 自行车停靠架和旧自行车变废为宝家居创意作品大全

    自行车停靠架和旧自行车变废为宝家居创意作

  • 造车生死局:要么转型,要么死

    造车生死局:要么转型,要么死

  • 从欠8千万到年赚8亿

    从欠8千万到年赚8亿

  • 一座非典型五线小城的日常

    一座非典型五线小城的日常

QQ客服热线
QQ:1090281100 周一至周日:09:00 - 21:00
WeChat:duzhe1069
Email:kaixin1069@vip.qq.com

优创意logo

勿要吝啬你无形资产,请为创新续源,知识、点子、灵感、经验、需求等均是创新源泉,你不经意的一句话将是另一个人的灵感。明天的明天,还有明天,我们应该把握今天,每一个今天,都有一个新的事物在出现,今天的漠视明天的落后,不浪费每一个学习的时刻,学习助力非凡。

技术支持 Discuz! X3.4 - 3.5 beta © 2001-2019 Comsenz Inc.

小黑屋|手机版|优创意 ( 粤ICP备16085288号-1 )|申请友链

粤公网安备 44011102001144 号 GMT+8, 2020-10-27 23:57 , Processed in 0.094602 second(s), 29 queries , Gzip On.

快速回复 返回顶部 返回列表