TypeScript Interface文件的批量产出

时间 2019-11-08

标签 typescript interface 文件批量产出繁體版

原文原文链接

有过TS开发经验的人都知道。TS中的interface的做用。有些状况下，做为function的类型依据，是很是有用的。node

好比有个有个处理用户数据的方法，须要在某个function内提取用户的用户头像和用户昵称。首先要定义用户数据结构的interface、git

interface IUserData {  
  nickName:string,  
  headerImage:string
}
export {IUserData}复制代码

以后再在某处方法内定义好参数类型es6

class Main{
    ......
    ......
    static getUserData(data:IUserData){
        data.nickName=.....
        data.headerImage=.....
    }
}

class UserD implements IUserData{
    protected nickName:string;
    protected headerImage:string;
    construct(){
    }
}
interface IFriendUserData extends IUserData{
    friendName:string,
}复制代码

这是一种很常见的使用interface的方法，并且也方便了类型的扩展。这种interface 的接口定义是必要的，目的除了类型上的区分，还能够起到扩展的目的。github

但另一种interface的定义。虽然不要，可是又显得不那么重要。ajax

当一个ajax的数据返回的格式以下：typescript

{    
   "apiname":"getusername",    
   "code":"123",    
   "result":{        
       "code":"123",        
       "data":{            
           "username":"shincat",
           "userinfo":"from changzhou",
           "userage":"30", 
           "list":[1,2,3,4] 
       } 
    }, 
   "history":[1,2,3,4,5] 
}复制代码

为了方便TypeScript 环境的类型识别，咱们须要专门为这个数据结构定义一套interface。目前的数据结构为3层，三种数据结构。npm

interface Iuserdata {
   readonly apiname?:string;
   readonly code?:string;
   readonly result?:IData5;
   readonly history?:Array<number>;};
interface IData5 {
   readonly code?:string;
   readonly data?:IData6;
};
interface IData6 {
   readonly username?:string;
   readonly userinfo?:string;
   readonly userage?:string;
   readonly list?:Array<number>;
};
export {Iuserdata,IData5,IData6}复制代码

以上便可。面对ajax请求返回，只须要使用Iuserdata参数类型json

const result:Iuserdata= await request.get(URLINK);
console.log(result.result.data.username);复制代码

以上接口定义是必要的，可是理论上不会存在须要被扩展的可能，因此又显得不是那么重要。可是有时候，当数据结构变得复杂时,好比：api

{    "apiname":"getusername",
    "code":"456",
    "result":{
        "code":"123",
        "data":{
            "username":"shincat",
            "userinfo":"from changzhou",
            "userage":"30",
            "list":["2"],
            "stylelist":[
                {
                    "a":1,
                    "b":{
                        "name":"",
                        "age":"",
                        "time":""
                    },
                    "c":{
                        "logtime":[
                            {
                                "beginAt":"2019-01-01",
                                "endAt":"2019-01-03"
                            }
                            ]
                      
                      },
                    "d":{
                        "raisein":[
                            {
                                "beginAt":"2019-01-01",
                                "endAt":"2019-01-03"
                            }
                            ]
                      
                      },
                    "e":{
                        "stlonein":[
                            {
                                "beginAt":"2019-01-01",
                                "endAt":"2019-01-03"
                            }
                            ]
                      
                      }
                    
                }
            ]
        }
    },
    "history":[{        "time":"34"    }]
}

复制代码

在typescript工程内咱们也得为他定义一套interface。这就比如是bash

需求一时爽，执行火葬场

很显然，这还不是相对极端的状况，可是咱们仍是得为这一套interface花掉太多的精力。一旦ajax返回的数据的数据结构发生变化，咱们可能又得重定义一套，很显然咱们在这里花掉了太多时间和精力，而牢牢是为了应付ajax的一次数据返回。因而咱们可能会很是想念es6 或者es5弱类型的无拘无束。或者你也能够直接用any类型，但这一点都不TS不是么？因此你须要以下这些interface。

interface Ickindex {
   readonly apiname?:string;
   readonly code?:string;
   readonly result?:IData0;
   readonly history?:Array<IData10>;
};
interface IData10 {
   readonly time?:string;
};
interface IData0 {
   readonly code?:string;
   readonly data?:IData1;
};
interface IData1 {
   readonly username?:string;
   readonly userinfo?:string;
   readonly userage?:string;
   readonly list?:Array<string>;
   readonly stylelist?:Array<IData2>;
};
interface IData2 {
   readonly a?:number;
   readonly b?:IData3;
   readonly c?:IData4;
   readonly d?:IData6;
   readonly e?:IData8;
};
interface IData8 {
   readonly stlonein?:Array<IData9>;
};
interface IData9 { 
  readonly beginAt?:string;
   readonly endAt?:string;
};
interface IData6 {
   readonly raisein?:Array<IData7>;
};
interface IData7 {
   readonly beginAt?:string;
   readonly endAt?:string;
};
interface IData4 {
   readonly logtime?:Array<IData5>;
};
interface IData5 {
   readonly beginAt?:string;
   readonly endAt?:string;
};
interface IData3 {
   readonly name?:string;
   readonly age?:string;
   readonly time?:string;
}; 
export {Ickindex,IData10,IData0,IData1,IData2,IData8,IData9,IData6,IData7,IData4,IData5,IData3}复制代码

const result:Ickindex= await request.get(URLINK);
console.log(result.result.data.stylelist[0].c.logtime[0].beginAt);复制代码

当有20-30个接口的时候，重复以上简直就是灾难，大概996门就是这么来的。

因而我写了一个jsonterface的npm包，经过一行j2i命令实现了批量的导出。

GIT地址

或者npm上搜索：jsontointerface

使用方法呢

npm install --save-dev jsontointerface复制代码

init初始化

j2i init
 或者
 npx j2i init复制代码

而后在你的项目目录下就会出现一个 j2i.json 的配置文件;
和一个j2i的目录，目录的大体结构

-root--
    |- j2i/
    |- node_modules/
    |- package.json
    |- j2i.json
复制代码

j2i.json 为json2interface的配置文件数据结构为：

{
    "files":{
        "filepath":"j2i",
        "filepathto":"D"
    },
    "options":{
        "readonly":true,
        "toD":true
    }
}复制代码

有一个名为 username.json的json文件，数据结构为：

{
    "apiname":"getusername",
    "code":"456",
    "result":{
        "code":"123",
        "data":{
            "username":"shincat",
            "userinfo":"from changzhou",
            "userage":"30",
            "list":["2"]
        }
    },
    "history":[{
        "time":"34"
    }]
}复制代码

将其放置在 j2i目录下。以后直接运行

j2i
或者
npx j2i
复制代码

根据以上j2i.json的配置文件的配置项，将在D目录下生成一个 Iuserdata.d.ts的文件。这个文件的内容为：

interface Ickindex {
   readonly apiname?:string;
   readonly code?:string;
   readonly result?:IData0;
   readonly history?:Array<IData2>;
};
interface IData2 {
   readonly time?:string;
};
interface IData0 {
   readonly code?:string;
   readonly data?:IData1;
};
interface IData1 {
   readonly username?:string;
   readonly userinfo?:string;
   readonly userage?:string;
   readonly list?:Array<string>;
};

 export {Ickindex,IData2,IData0,IData1}复制代码

同理。你能够在j2i目录里面放上100个json的文件。这些json文件能够经过你用postman等工具实现对服务端接口的一次访问就能够得到，并确保里面的数据结构是完整的，以后将其内容保存为一个json文件，放在j2i目录里面就能够啦~

后面的内容是我照抄个人git上的描述的，关于配置信息可在github或者npmjs上去查看，但愿对你们有帮助啦~也但愿你们能多多关注个人微信公众号啦。