JSON数据如何变成Typescript接口

刚开始使用Typescript的时候，编辑器或IDE时不时的就会在代码下面给你划很多红线，告诉你这个地方有错误，那个地方不匹配，甚至有时候代码都按预期运行正确了，可错误提示就是不消失。此时，有些同学就会用“any”大法来解围，其实这是非常不正确的做法，个人认为这根本不能算是一种解决方案，最起码不是正确的解决方案。其实这个问题的根源在于typescript的类型检查，这也是ts区别于js的最大的不同，在ts中区别类型的最常用的就是接口。

什么是接口

通俗的讲，接口就是一种约定，是数据交换者之间对于使用的数据类型的约定。如果使用货币来解释文章开头的问题的话，大概是这么一种情景：在js中，你拿100块钱去超市买东西，收银员根本不会去检查这个100元到底是真是假，等到发现是假币时，收银员大概会骂句娘；在ts中，同样的100块，收银员会非常在意它的真假，如果他认为钱有问题就会提示你，不要忽悠我。那么收银员凭什么去辨别钱的真钱？水印，金线，图案等等共同标识了这张钱是真的还是假的。你可以想像，这100元就是交易双方定义的接口，水印，金线，图案等就是接口上的标识。

如何定义接口

先上数据

先来看一段数据，这个我最近项目中后台返回的json数据中截取的一部分

乍一看很复杂，实际比这个更复杂，字段更多，但是再复杂也不怕，从最外层开始，我们一步步把它定义出来。

总的来看，就这5个字段，但里面的any显然不是我们想要的。

profitLogs

这个字段中，数组子元素中的数据类型是不确定的，可能是字符串，数字，布尔值，因此这里使用联合类型

snapshots

这段数据里，balance 和 baseCurrency很简单，一个是数字，一个是字符串。symbols字段的特点是，它的key不固定，但key的类型总是一个字符串，value简单就是 number 类型。tradeStatus字段的特点是，它上面的这两个字段可能有，也可能没有。因此定义后就像这样：

task

这个字段中比较特殊只有fee这个字段，它的长度是固定的，因此使用tuple来定义，其它的也很简单。

定义后的好处

接口定义好以后，编辑器自然就知道这个数据长什么样了，首先它可以提示你这个字段上都有哪些属性可以用，再次一旦数据类型不匹配时，它也会提示。如图：

很明确知道res上有哪些字段

提示这种数据类型上可以使用哪些方法

再也不会忘记一些比较特殊的数据类型是什么样子了

改变数据类型时，编辑器会告诉你有可能会发生错误。

最后，这里只是为了演示，实际中数据一大我们压根没有必要手动的定义，一切可以交给机器来做，请参照：《JSON 转 TypeScript Interface》