Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
355 views
in Technique[技术] by (71.8m points)

TypeScript 类型定义基础问题

如下 {workbooks: Site} 这个类型错在哪里

一.返回数据类型:
image

{

"pagination": {
    "pageNumber": "1",
    "pageSize": "100",
    "totalAvailable": "17"
},

"workbooks": {
"workbook": [
{
    "project": {
    "id": "fd43940e-9581-11ea-b965-a72ac3f8c8fb",
    "name": "默认值"
},

    "owner": {
    "id": "5a328439-9b3d-4197-ab4c-f334839061f7",
    "name": "admin"
},
    "tags": {},
    "dataAccelerationConfig": {
    "accelerationEnabled": false
},

    "id": "14def8ac-ae8b-42ee-8c22-723827f5022e",
    "name": "工作簿 1",
    "description": "",
    "contentUrl": "1",
    "webpageUrl": "http://111.*.*.*:63192/#/workbooks/3",
    "showTabs": "true",
    "size": "1",
    "createdAt": "2020-07-30T01:46:11Z",
    "updatedAt": "2020-08-07T09:43:07Z",
    "encryptExtracts": "false",
    "defaultViewId": "6a2188bf-33d8-4343-a934-a6b74bbe5f6f"
},

... ...

]
}
}

二.定义type类型:

export type Site = {
    workbooks: {
        workbook: [
            {
                project:{
                    id: string;
                }
            }
        ]
    }
}

三.Angular8 代码中使用:
image

.pipe(map(
    (worksboodsRes: {workbooks: Site}) => {
        console.log(worksboodsRes)
            return worksboodsRes.workbooks.workbook[0].project.id = sitesId;
    }
));

image

关于 `Rxjs filter` :

mergeMap((sitesId: string) => {
const headersProject = new HttpHeaders().append('X-Tableau-Auth', tokenQ)
const hdrProject = { headers: headersProject };
return this.http.get(this.uri_tableau + 'api/3.9/sites/' + sitesId + '/workbooks', hdrProject)


.pipe(filter((item: Workbook)=>{
    console.log(item)
    return item.project&&item.project.id === sitesId
}))
})

打印  item 如下结构:

image

修改后:

image

image

image


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

这样定义

export type Site = {
    workbooks: {
        workbook: {
            project:{
                id: string;
            }
          }[];
    }
}

type Workbook = {
    project:{
        id: string;
    }
};
export type Site = {
    workbooks: {
        workbook: Workbook[]
    }
}

补充个使用Array.filter过滤的以及ts类型定义


    type WorkBook = {
      project:{
        id:string;
        name:string;
      },
      owner:{
        id:string;
        name:string;
      },
      tags:{[key:string]:string};
      dataAccelerationConfig:{
        accelerationEnabled:boolean;
      },
    
      id: string;
      name:string;
      description: string;
      contentUrl: string;
      webpageUrl: string;
      showTabs:string;
      size: string;
      createdAt: string;
      updatedAt: string;
      encryptExtracts:string;
      defaultViewId: string;
    };
    
    type WorkBookQuerResult = {
      pagination: {
        pageNumber: string;
        pageSize: string;
        totalAvailable: string;
      },
      workbooks:{
        workbook:WorkBook[];
      }
    }
    
    let dataResult:WorkBookQuerResult = {
      "pagination": {
        "pageNumber": "1",
        "pageSize": "100",
        "totalAvailable": "17"
      },
    
      "workbooks": {
        "workbook": [
          {
            "project": {
              "id": "fd43940e-9581-11ea-b965-a72ac3f8c8fb",
              "name": "默认值"
            },
    
            "owner": {
              "id": "5a328439-9b3d-4197-ab4c-f334839061f7",
              "name": "admin"
            },
            "tags": {},
            "dataAccelerationConfig": {
              "accelerationEnabled": false
            },
    
            "id": "14def8ac-ae8b-42ee-8c22-723827f5022e",
            "name": "工作簿 1",
            "description": "",
            "contentUrl": "1",
            "webpageUrl": "http://111.*.*.*:63192/#/workbooks/3",
            "showTabs": "true",
            "size": "1",
            "createdAt": "2020-07-30T01:46:11Z",
            "updatedAt": "2020-08-07T09:43:07Z",
            "encryptExtracts": "false",
            "defaultViewId": "6a2188bf-33d8-4343-a934-a6b74bbe5f6f"
          },
        ]
      }
    };
    
   
    
    function filterWith(workbookList:WorkBook[],siteId:string){
      return workbookList.filter((someworkbook:WorkBook)=>{
        if(someworkbook.project.id===siteId){
          return true;
        }
        return false;
      });
    }
    
    let requiredSiteId = 'fd43940e-9581-11ea-b965-a72ac3f8c8fb';
    let resultWorkBookList = filterWith(dataResult.workbooks.workbook,requiredSiteId);
    
    console.log('resultWorkBookList:',resultWorkBookList);

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

2.1m questions

2.1m answers

60 comments

57.0k users

...