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}複製代碼