reactjs - React.FunctionalComponent üzerinde TypeScript ile statik enum declare etmek

Statik özelliklere sahip bir React.FunctionalComponent’im var, yani:

import MyAwesomeComponent from './MyAwesomeComponent';

...

<MyAwesomeComponent mode={MyAwesomeComponent.modes.superAwesome} />

Statik özellikler anahtar-değer haritalarıdır:

MyAwesomeComponent.modes = {
    superAwesome: 'super-awesome',
    almostAwesome: 'almost-awesome',
    regular: 'regular',
}

Böyle bileşenler için .d.ts dosyasını nasıl yazabilirim?

Enum oluşturmayı denedim ve sonra bunu StaticProps olarak dışa aktarmaya eklemeyi denedim:

enum modes {
    superAwesome = 'super-awesome',
    almostAwesome = 'almost-awesome',
    regular = 'regular',
}

interface MyAwesomeComponentProps {
    mode: modes,
}

interface StaticProps {
    modes: Record<modes, modes>,
}

declare const MyAwesomeComponent: React.FC<MyAwesomeComponentProps> & StaticProps;
export default MyAwesomeComponent;

Ama tire içeren mod-değerlerinde başarısız oluyor, yani 'super-awesome'

Böyle bileşenleri nasıl yazabilirim ki camelCase anahtarlarını kullanabileyim ve imleci üzerine getirdiğimde tireli değeri görebileyim?

GÜNCELLEME: Çözüm bulundu! Teşekkürler, aleksey-l!

UPD2: Bazı bileşenlerim fonksiyon olarak tanımlanmıştır, yani:

declare namespace MyAwesomeComponent {
    declare enum modes {
        superAwesome = 'super-awesome',
        almostAwesome = 'almost-awesome',
        regular = 'regular',
    }
}

interface MyAwesomeComponentProps {
    mode: MyAwesomeComponentProps.modes,
}

declare function MyAwesomeComponent(props: PropsWithChildren<MyAwesomeComponentProps): JSX.Element;

export default MyAwesomeComponent;

Ve @typescript-eslint/no-unsafe-assignment ve @typescript-eslint/no-unsafe-member-access eslint hatalarını almaya başlıyorum

<MyAwesomeComponent mode={MyAwesomeComponent.modes.superAwesome} />

Cevap #1

Record<modes, modes>, hem anahtarlar hem de değerler olarak mode değerlerine ('super-awesome' | 'almost-awesome' | 'regular') sahip bir tür üretir. Aradığınız şey, typeof operatörü ile sorgulanabilen enum nesnesinin gerçek türüdür:

interface StaticProps {
    modes: typeof modes,
}

Oyun alanı

Sadece referans için başka bir seçenek - normal tip takma adını kullanmak:

type Modes = {
    superAwesome: 'super-awesome',
    almostAwesome: 'almost-awesome',
    regular: 'regular',
}

interface MyAwesomeComponentProps {
    mode: Modes[keyof Modes],
}

interface StaticProps {
    modes: Modes,
}

Oyun alanı