从零开始学typescript构建一个rest风格web服务

Codeing_ls 发布于2019-08-23 14:28 / 332人阅读

摘要：随着应用的庞大，项目中的代码也会越来越臃肿，团队之间的协作也会遇到难题，如果不一直看文档，很难知道团队其他成员写的方法需要什么参数，返回结果又是什么。一个简单的服务就实现了。

随着应用的庞大，项目中 javascript 的代码也会越来越臃肿，团队之间的协作也会遇到难题，如果不一直看 api 文档，很难知道团队其他成员写的方法需要什么参数，返回结果又是什么。

解决的方案有很多，这里不比较各种方法的优劣，仅说下选择 typescript 的考虑：1、接受程序好，ts 文件中可以直接写 javascript 代码，平滑过渡；2、vs code 的提示够好。

下面开始一步一步地搭建 web 服务( windows环境 )

一、typescript 开发环境如何配置

1、初始化项目

yarn init -y

2、安装 typescript

yarn add typescript @types/node --dev

3、配置 typescript 编译环境

在项目根目录下新建文件 tsconfig.json

{
  "compilerOptions": {
    "target": "es2017",
    "outDir": "./dist",
    "module": "commonjs",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [         
       "es6"
    ],
    "noImplicitAny": false,
    "sourceMap": false,
    "allowJs": true
  },
  "include": [        
    "./src/**/*"
  ],
  "exclude": [ 
    "node_modules" 
  ] 
}

4、测试

新文件夹 src 并添加文件 server.ts，在文件中写下如下代码

console.log("Hello TypeScript");

5、编译

.
ode_modules.bin	sc

6、运行

node ./dist/server.js

如果能看到控制台输出

Hello TypeScript

恭喜你，typescript 环境配置成功！

二、集成 web 开发框架 koa

1、安装 koa 及 types

yarn add koa koa-router koa-static @types/koa @types/koa-router @types/koa-static

2、修改 server.ts 文件，输入如下内容

/*
 * @Description: 后台服务入口
 * @version: 0.1.0
 */
import * as Koa from "koa";
import * as koaStatic from "koa-static"
import { router } from "./router";    

const app = new Koa();    

/**
 * @name: 设置静态资源目录
 * @param : undefined
 * @return : undefined
 */
app.use(koaStatic("./www"));    
/**
 * @name: 使用路由
 * @param : undefined
 * @return : undefined
 */
app.use(router.routes());    
/**
 * @name: 服务端口
 * @param : undefined
 * @return : undefined
 */
const httpPort = 8080
app.listen(httpPort);    
console.log(`Http Server running on port ${httpPort}`);

3、新建路由文件夹 router 及文件 index.ts

/*
 * @Description: 后台路由组件
 * @version: 0.1.0
 */
import * as Router from "koa-router";    

const router = new Router();

router.get("/*", async (ctx) => {
  ctx.body = "Hell koa";
})

export { router }

4、编译、运行

打开浏览器，输入 http://localhost:8080

如果能看到 Hello Koa，恭喜你，koa 的集成成功。一个简单的 web 服务就实现了。
后面如果有机会就讲下如何操作数据库。

目录结构如下：

GPU云服务器云服务器从零开始学python 从零开始学机器学习从零开始学linux 从零开始学android

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100676.html

【趣味连载】攻城狮上传视频与普通人上传视频：（一）生成结构化数据

摘要：背景当知道要上传的视频资料从条变成条时，我就明白，绝对不能再人工处理了。背景当知道要上传的视频资料从20条变成100条时，我就明白，绝对不能再人工处理了。他们总是想当然的认为，录入一条数据需要1分钟，那录入20条数据就是20分钟，录入100条数据，不就是100分钟吗？我有时候，真的很想问问他们，没有考虑过人是会犯错的吗？数据越多，出错的可能就越大；但是数据本身，又是不允许出现纰漏的...

mindwind 2019-06-21 16:16 评论0 收藏0
前端每周清单半年盘点之 JavaScript 篇

摘要：前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点分为新闻热点开发教程工程实践深度阅读开源项目巅峰人生等栏目。背后的故事本文是对于年之间世界发生的大事件的详细介绍，阐述了从提出到角力到流产的前世今生。前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点；分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎...

Vixb 2019-08-21 12:04 评论0 收藏0
前端每周清单第 11 期：Angular 4.1支持TypeScript 2.3，Vue 2.3优化

摘要：斯坦福宣布使用作为计算机课程的首选语言近日，某位有年教学经验的斯坦福教授决定放弃，而使用作为计算机入门课程的教学语言。斯坦福官方站点将它们新的课程描述为是最流行的构建交互式的开发语言，本课程会用讲解中的实例。前端每周清单第 11 期：Angular 4.1支持TypeScript 2.3，Vue 2.3优化服务端渲染，优秀React界面框架合集为InfoQ中文站特供稿件，首发地址为...

warkiz 2019-08-20 16:15 评论0 收藏0