Property does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<DatePicker> & Readonly<{ children?: ReactNode; }> …'

6
votes

I'm trying to use React with TypeScript and Material-UI's components. Unfortunately, I'm getting the errors like this:

Property 'openToYearSelection' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly<{ children?: ReactNode; }> ...'.

import * as React from 'react';
import DatePicker from 'material-ui/DatePicker';

interface IState {
  birthday: any,
}

export default class SampleForm extends React.Component<IProps, IState> {
  constructor(props: any) {
    super(props);

    const { record = {} } = this.props;

    this.state = {
      birthday: record.birthday || null,
    };
  }

  public birthdayPicker() {
    const { birthday } = this.state;

    return (
      <DatePicker
        defaultDate={birthday}
        hintText="Birthday"
        openToYearSelection={true}
      />
    );
  }

  public render() {
    return (
      <form style={styles.root}>
        {this.header()}
        {this.firstName()}
        {this.lastName()}
        {this.birthdayPicker()}
        {this.phoneNumber()}
        {this.actionButtons()}
      </form>
    )
  }
}

What's the right way to use Material-UI with TypeScript and React?

2
reactjstypescriptmaterial-ui
Are you using the @types/material-ui package? And is your material-ui version on a 0.x version or on v1-beta? – CRice
Hi @CRice, I'm using @types/material-ui and I set material-ui to "^0.20.0". I tried to update @types/material-ui/index.d.ts file with properties (please take a look at my answer below). However, I guess it's kind of hardcoding and it's not an appropriate solution. – digitalCoffee
I think that solution is fine, I've done the same for many other packages. The @types/material-ui package definitely missing some of the properties, and I don't think you can externally augment that interface. FWIW, when material-ui v1 drops, the types will be included right in the repo (so no need for @types), and hopefully then should be kept up to date. – CRice
@CRice, sounds good! Thanks for the help. – digitalCoffee
Try adding // @ts-expect-error above the line that is erroring – Caleb Lawrence

2 Answers

1
votes

I've resolved this problem by adding missing properties to namespaces in node_modules/@types/material-ui/index.d.ts file. It worked for me. I don't think that it's a good solution and I'm wondering if there're some better approaches. 

namespace DatePicker {
    export interface DatePickerProps {
        defaultDate?: Date;
        disableYearSelection?: boolean;
        ..
0
votes

If it's a third party library you can add this above the line that is erroring out and it'll ignore the error and let you build:

// @ts-expect-error