asp.net怎么生成json数据_什么！？TypeScript还可以mock数据！

TL;DR ts -> json-schema -> mock data

---

最近几个月开发，全面使用TypeScript，开了几个新工程，标配就是Typescript，完全使用下来的感受，真香！

有了类型推导，说什么王权富贵，怕什么戒律清规。TS的优点用过的人心里自然明白，还没上车的小伙伴，快刷卡上车。

TS和接口

TS可以让你在前端的代码里自由翱翔，不过到了和服务端定接口以及mock后，开始使用接口时候，你就会发现类型推导走不下去，以axios为例，如果不设置类型参数，你会得到一个any

const response = await axios.get('/api/user');
// response.data is any

强迫症比较强烈的小伙伴呢，会一一设置接口的出参，axios也提供泛型的方法

interface 

仿佛从一片黑暗中，又走回了光明，又可以愉快地写代码了。强迫症比较强烈的小伙伴，会想到两个问题

1. 接口返回的any转User是不安全，万一接口没按约定的来怎么办（是另一个问题不展开）
2. 什么！？为什么我要和服务端定义接口后，在mock系统里加一遍，这里还要用ts再写一遍！

针对第二个问题，TypeScript就是类型啊，用它生成mock数据应该是个很简单的事吧！？

怎么用TS mock

这里先介绍一个有趣的东西，JSON Schema，它用于描述JSON对象，现在是draft-07，但足够描述你需要的对象，例如上面的User类型可以如下表示

{
  

值得一提的是JSON Schema的实现也很丰富，详细可看

https://json-schema.org/implementations.html

话说回来，我这里实现的主要思路就是以下两步

ts -> json-schema -> 产生 mock 数据

使用到的库是

• typescript: ts compiler api
• typescript-json-schema: 将TS转为JSON-schema
• json-schema-faker: 根据JSON-schema mock数据，也可以用其它实现

代码如下，

import 

好了，到此你就可以得到想要的mock数据了。

广告

整理了下上面的实现，faker-ts，同时用ts.createWatchProgram监听文件变化，可以快速搭一个mock服务，有兴趣点个Star

cytle/faker-ts​github.com

下面是cli的用法，更多参考仓库的README

echo "interface IFoo { title: string; }" > foo.ts
npx faker-ts foo.ts IFoo # { "title": "dolore" }

当然，可以对你的任意TS文件使用faker-ts，wow~ ⊙o⊙，还可以搭配注释使用，可以定义

enum Gender {
  male,
  female,
}
interface User {
  /**
   * @description 用户名字
   */
  nickname: string;
  /**
   * @description 性别
   */
  gender: Gender;
  /**
   * @description 地址
   * @examples ["杭州", "上海", "北京"]
   */
  city: string;
}

输出为

{
  

更多可以参考 https://json-schema.org/understanding-json-schema/ ~

常规的mock工具与TS mock数据对比

常规的mock工具与TypeScript生成mock数据相比主要有这两个不足

1. 一般mock工具，都需要学习，有自己的规则，而ts是广泛被接受的DSL
2. 一般mock工具和代码存在gap，mock版本管理和代码分离
   1. 不好复用，不能和代码一起迭代，开发人员不太愿意管理mock
   2. 不好复用，不能用于编码，比如上面在ts里重新定义User接口

总结

如此，当定义了一个TS类型的时候，你可以同时在三个地方用到它，真香

1. 前端开发
2. 服务端开发(NodeJS)
3. mock接口数据