面试题：TypeScript接口与GraphQL类型系统的复杂类型映射

Question

在GraphQL中有复杂类型如对象类型（Object Type）和列表类型（List Type），请描述在TypeScript里如何使用接口和类型别名来准确映射GraphQL中的这些复杂类型。例如，假设GraphQL有一个包含嵌套对象和列表的查询类型，如何在TypeScript中定义相应的类型结构，并处理可能的类型转换和验证。

Answer 1

1. 使用接口映射对象类型
   • 在GraphQL中，如果有一个对象类型，比如一个User对象类型，它可能包含name（字符串）和age（数字）等字段。在TypeScript中可以这样用接口来定义：

   interface User {
       name: string;
       age: number;
   }
   

2. 使用类型别名映射列表类型
   • 假设GraphQL中有一个查询返回User对象的列表。在TypeScript中可以用类型别名来定义这个列表类型：

   type UserList = User[];
   

3. 处理嵌套对象和列表的复杂查询类型
   • 假设GraphQL有一个复杂的查询类型，比如一个Company对象，它包含一个name字段，并且有一个employees字段是User对象的列表。可以这样定义：

   interface User {
       name: string;
       age: number;
   }
   
   interface Company {
       name: string;
       employees: User[];
   }
   

4. 类型转换和验证
   • 类型转换：
     • 如果从GraphQL获取的数据类型不完全匹配TypeScript定义的类型，可以使用类型断言。例如，如果从GraphQL查询返回的数据是any类型，并且你知道它应该是Company类型，可以这样转换：

     const dataFromGraphQL: any = { name: 'Acme Inc', employees: [{ name: 'John', age: 30 }] };
     const company: Company = dataFromGraphQL as Company;
     

   • 验证：
     • 可以使用第三方库如io - ts来进行运行时类型验证。首先安装io - ts：

     npm install io - ts
     

     • 然后定义类型验证器：

     import { Type, type, string, number } from 'io - ts';
     
     const UserType: Type<User> = type({
         name: string,
         age: number
     });
     
     const CompanyType: Type<Company> = type({
         name: string,
         employees: UserType.array
     });
     
     const dataFromGraphQL = { name: 'Acme Inc', employees: [{ name: 'John', age: 30 }] };
     const result = CompanyType.decode(dataFromGraphQL);
     if (result.isLeft()) {
         console.error('Validation failed:', result.left);
     } else {
         const company: Company = result.right;
         console.log('Valid company:', company);
     }