reactjs - Varför måste jag typa event.target som HTMLInputElement

Jag har en kodbas som använder Material Ui med vissa temadöljningar. Jag sätter upp min SettingContext och SettingsProvider och jag stöter på syntax som jag inte riktigt förstår.

Ta följande:

const initialState: SettingsContextProps = {
  ...defaultSettings,

  onToggleMode: () => {},
  onChangeMode: () => {},

 
  onToggleContrast: () => {},
  onChangeContrast: () => {},


  onChangeColor: () => {},


};

typen SettingsContextProps är uppsatt så här:

export type SettingsContextProps = {
    

  
    onToggleMode: VoidFunction;
    onChangeMode: (event: React.ChangeEvent<HTMLInputElement>) => void;
  

    onToggleContrast: VoidFunction;
    onChangeContrast: (event: React.ChangeEvent<HTMLInputElement>) => void;
  

    onChangeColor: (event: React.ChangeEvent<HTMLInputElement>) => void;


  };

När jag sätter upp min leverantör försöker jag förstå syntaxen och jag har svårt. Varför använder jag denna typomvandling event.target as HTMLInputElement).value as ThemeMode

export function SettingsProvider({ children, defaultSettings }: SettingsProviderProps) {
  const [settings, setSettings] = useState(defaultSettings);

  const onToggleMode = () => {
    setSettings({
      ...settings,
      themeMode: settings.themeMode === 'light' ? 'dark' : 'light',
    });
  };

  const onChangeMode = (event: ChangeEvent<HTMLInputElement>) => {
    setSettings({
      ...settings,
      themeMode: (event.target as HTMLInputElement).value as ThemeMode,
    });
  };

  const onToggleContrast = () => {
    setSettings({
      ...settings,
      themeContrast: settings.themeContrast === 'default' ? 'bold' : 'default',
    });
  };

  const onChangeContrast = (event: ChangeEvent<HTMLInputElement>) => {
    setSettings({
      ...settings,
      themeContrast: (event.target as HTMLInputElement).value as ThemeContrast,
    });
  };


    const onChangeColor = (event: ChangeEvent<HTMLInputElement>) => {
        setSettings({
            ...settings,    
            themeColorPresets: (event.target as HTMLInputElement).value as ThemeColorPresets,
        })

och slutligen de typer de kastar som

  export type ThemeMode = 'light' | 'dark';
  export type ThemeContrast = 'default' | 'bold';
  export type ThemeColorPresets = 'default' | 'purple' | 'cyan' | 'blue' | 'orange' | 'red';

Vad gör raden themeColorPresets: (event.target as HTMLInputElement).value as ThemeColorPresets?

Svar #1

Försök att ändra event.target till event.currentTarget, eftersom target inte alltid är det element som har lyssnaren