分享
三行代码  ›  专栏  ›  技术社区  ›  Viewsonic

TypeScript-合并两个接口,并使其某些成员成为必需的

  •  1
  • Viewsonic  · 技术社区  · 2 周前

    我有以下两个接口 无法修改的 :

    interface User {
      username: string;
      email?: string;
      age?: number;
      country?: string;
    }
    
    interface Player {
      room: number;
      group?: string;
      device?: string;
    }
    

    我想把它们组合成一个界面: Member 同时使田野: User['email'] Player['group'] 强制性的(只有这两个)。

    我尝试了以下(只是作为一个起点(待定)):

    // please edit this code accordingly
    interface Member extends User, Player  {}
    

    然后,预期的结果是在以下方面出现错误:

    const member: Member = {
      username: 'bill.gates',
      // email: 'bill.gates@microsoft.com',
      age: 50,
      room: 5,
      // group: 'A',
    }
    

    自从 email group 未指定。

    给你一个 Playground .

    谢谢!

    1 回复  |  直到 2 周前
        1
  •  4
  •   ThomasThiebaud    2 周前

    你可以通过组合 Pick , Required Omit Utility Types .

    type Member = Required<Pick<User & Player, 'email' | 'group'>> & Omit<User & Player, 'email' | 'group'>;
    
    
    /*
    Type '{ username: string; age: number; room: number; }' is not assignable to type 'Member'.
      Type '{ username: string; age: number; room: number; }' is missing the following properties from type 'Required<Pick<User & Player, "email" | "group">>': email, group(2322)
    */
    const member: Member = {
      username: 'bill.gates',
      // email: 'bill.gates@microsoft.com',
      age: 50,
      room: 5,
      // group: 'A',
    }
    

    这是一个 working playground

        2
  •  1
  •   Jeppe Hasseriis    2 周前

    像这样定义成员:

    interface Member extends User, Player  {
        email: string;
        group: string;
    }