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

35次阅读

共计 1605 个字符，预计需要花费 5 分钟才能阅读完成。

随着应用的庞大，项目中 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、编译
.\node_modules\.bin\tsc
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’;