TypeScript error with v4.0.0-alpha.8

The following code worked perfectly fine in alpha.7, but is broken in alpha.8. Can’t tell if it’s React signatures that have changed or MUI’s:

export interface ChartHeaderProps {
    onChange: (event: React.ChangeEvent<HTMLSelectElement>) => void;
}

export const ChartHeader = ({onTimePeriodChange}: ChartHeaderProps) => {
    return (
        <div className={classes.rhs}>
            <FormControl className={classes.formControl}>
                <Select
                    name="period"
                    value={timePeriod}
                    onChange={onChange}
                >
                    ...
                </Select>
            </FormControl>
        </div>
    )
};

Now I am getting the following TypeScript error:

Type ‘(event: ChangeEvent<HTMLSelectElement>) => void’ is not assignable to type ‘(event: ChangeEvent<{ name?: string | undefined; value: unknown; }>, child: ReactNode) => void’

I got past the error by changing the interface as follows, but that is a fairly complex signature for something so simple.

export interface ChartHeaderProps {
    onTimePeriodChange: (event: ChangeEvent<{ name?: string | undefined; value: unknown; }>, child: ReactNode) => void;
}

And it doesn’t solve the problem. In the actual event handler, I am no longer able to use event.target.value, I get yet another TypeScript error:

Type ‘unknown’ is not assignable to type ‘(prevState: string) => string’

P.S.

There was one more TypeScript related error with makeStyles:

TS2571: Object is of type 'unknown`

I got around that one by adding the following import:

import { Theme } from '@material-ui/core/styles';

and then supplying the Theme type to makeStyles:

const useStyles = makeStyles((theme: Theme) => ({
    ...
}));

[nareshbhatia]

Curious, why is https://unpkg.com/@material-ui/core@4.0.0-alpha.8/Select/SelectInput.d.ts defines onChange as

onChange?: (
    event: React.ChangeEvent<{ name?: string; value: unknown }>,
    child: React.ReactNode,
  ) => void;

Why not just

  onChange?: (
    event: React.ChangeEvent<HTMLSelectElement>,
    child: React.ReactNode,
  ) => void;

If I patch SelectInput.d.ts with this definition, all problems go away. But I am sure there’s a reason for why it is this way!

[nareshbhatia]

@eps1lon, that was super helpful! I am now able to type this a lot better. One type cast needed, but I fully understand why.

// ChartHeader.tsx
export interface ChartHeaderProps {
    onTimePeriodChange: (event: React.ChangeEvent<{ value: unknown }>) => void;
}

// AnalyzePage.tsx (consumes ChartHeader)
const handleTimePeriodChange = (event: React.ChangeEvent<{ value: unknown }>) => {
    setTimePeriod(event.target.value as string);
};

Here’s the source for anyone who hits this issue in the future.