随着应用的庞大,项目中 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.bintsc
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
![df9ac5fb89921d8b03bc56419c485cca.png](https://i-blog.csdnimg.cn/blog_migrate/0f6ab7794cf30ae75df69be8c3382061.jpeg)
如果能看到 Hello Koa,恭喜你,koa 的集成成功。一个简单的 web 服务就实现了。
目录结构如下:
![198f6dc51f1875e7a069b449ee59e931.png](https://i-blog.csdnimg.cn/blog_migrate/eca784f0cd886d9051554a7fc2dc8700.jpeg)