时间戳

首页 > 解决方案 > 双向类型检查

angular - 双向类型检查

问题描述

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

我想编写只接受有效团队角色的函数，以及只接受有效团队成员姓名的其他函数。在我的 Angular 组件中，我想在 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.");
      }
    }
  }
}

标签： angulartypescript

解决方案

就目前而言，您只定义了代表 aTeamMemberName和 a 的类型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[]

推荐阅读