reactjs - Chữ ký chỉ mục Enum trong TypeScript/React

Có vẻ như tôi không thể tìm ra cách gõ chữ ký chỉ mục đúng cách ở đây. Tôi có một enum và cần lặp qua nó để hiển thị một số JSX trên màn hình. Tôi có thể đoán nó đang nói gì với tôi nhưng tôi không thể giải quyết trong mã của mình. Cả hai câu lệnh Category[el] đều là vấn đề.

export enum Category {
    All = 'ALL',
    Employee = 'EMPLOYEE',
    Gear = 'GEAR',
    Room = 'ROOM',
    Other = 'OTHER',
}

Hàm đơn giản của tôi để hiển thị một số JSX là:

    const renderCategories = (): ReactElement | ReactElement[] => {
        return Object.keys(Category).map(el => {
            return (
                <Option key={el} value={Category[el]}>
                    <span>{` (${someOtherData.filter((e) => e.type === Category[el].length})`}</span>
                </Option>
            );
        });
    };

TS nói với tôi:

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'typeof Category'.
  No index signature with a parameter of type 'string' was found on type 'typeof Category'.

Câu trả lời #1

Trường hợp sử dụng này khá phổ biến khi sử dụng Object.keys vốn luôn suy diễn mỗi khóa là string, điều này không tương thích với khóa kiểu enum hoặc một đối tượng có kiểu cụ thể.

Nhưng Typescript vẫn cho phép chúng ta ép kiểu mỗi khóa này thành một kiểu, có nghĩa là chúng ta chỉ đơn giản là ép trở lại kiểu của enum ở trên.

Đây là đoạn trích phản ánh giải thích nêu trên:

export enum Category {
  All = 'ALL',
  Employee = 'EMPLOYEE',
  Gear = 'GEAR',
  Room = 'ROOM',
  Other = 'OTHER',
}

// A common type to detect the enum type

type EnumType = typeof Category;
type EnumKeyType = keyof EnumType;

// Then cast back to our desired type

someOtherData.filter((e) => e.type === Category[el as EnumKeyType].length) // cast `el as EnumKeyType`

Câu trả lời #2

Bạn có thể thêm chữ ký chỉ mục sau vào enum:

export enum Category {
    All = 'ALL',
    Employee = 'EMPLOYEE',
    Gear = 'GEAR',
    Room = 'ROOM',
    Other = 'OTHER',
    [key: string]: string,
}