Question

我正在用TypeScript编写一些代码，并且想要创建一个接口，该接口允许在其他函数中双向进行类型检查。

我想编写仅接受有效团队角色的函数，以及仅接受有效团队成员姓名的其他函数。在我的角度组件中，我想在HTML模板中显示TeamMemberName，但是基于TeamMemberRole进行逻辑处理。

我当前的解决方案有效，但是令人费解，我不知道该如何简化。有什么建议么？我应该使用接口，类，keyof运算符吗？

export type TeamMemberName = 'Kathy' | 'Bob' | 'Sally';
export type TeamMemberRole = 'Manager' | 'Secretary' | 'Engineer';

@Injectable({
  providedIn: 'root'
})
export class TeamMemberService{

  constructor() { } 

  public getRole(name: TeamMemberName) : TeamMemberRole {
    switch (name) {
      case "Kathy": {
        return "Manager";
        break;
      }
      case "Bob": {
        return "Secretary";
        break;
      }
      case "Sally": {
        return "Engineer";
        break;
      }
      default: {
        throw new Error("Not a recognized Team Member.");
      }
    }
  }

  public getName(name: TeamMemberRole ) : TeamMemberName{
    switch (name) {
      case "Manager": {
        return "Kathy";
        break;
      }
      case "Secretary": {
        return "Bob";
        break;
      }
      case "Engineer": {
        return "Sally";
        break;
      }
      default: {
        throw new Error("Not a recognized Team Role.");
      }
    }
  }
}

Answer 1

就目前而言，您仅定义了表示TeamMemberName和TeamMemberRole的类型。

接下来，您需要的是存储这些类型数据的对象，让我们创建一个类型来表示此类对象：

export interface TeamMember {
    name: TeamMemberName;
    role: TeamMemberRole;
}

现在我们有了一个表示所需数据结构的类型，让我们将一些测试对象放入TeamMemberService：

private teamMembers: TeamMember[] = [
    { name: 'Kathy', role: 'Manager' },
    { name: 'Bob', role: 'Engineer' },
    { name: 'Sally', role: 'Secretary' }
];

例如，现在，当调用getRole方法时，我们可以执行以下操作：

getRole(name: TeamMemberName) : TeamMemberRole {
   const member = this.teamMembers.find(member => member.name === name);

   if(!member) {
      throw new Error('Not a recognized Team Member.');
   }

   return member.role;
}

我想指出的是，将类型限制为成员名称的预设值可能是不现实的，并且您可能要考虑使其成为字符串。

注意：这只会返回第一匹配项。如果要退回所有匹配的员工，请考虑使用array.filter()而不是array.find()，并按照注释中的建议将退还类型更改为TeamMemberRole[]。

Answer 2

假设团队成员的姓名和角色之间是一一对应的，那么下面使用Map的代码段应该可以正常工作。

(super on-event modified-events)

导出类型TeamMemberRole ='经理'| “秘书” | “工程师”；

@Injectable（{ providerIn：'root' }）导出类TeamMemberService {

export type TeamMemberName = 'Kathy' | 'Bob' | 'Sally';

}

双向类型检查

2 个答案: