How to define an TypeScript interface of an function on a react class?

Question

I want to save a referral to SectionList on this.SectionList within my MessageDialog. I have tried to define the interface to allow SectionList on line 31, but that has no effect. What should I do?

TypeScript complains that: MessageDialog.tsx(132,38): error TS2339: Property 'SectionList' does not exist on type 'SkademeldingDialog'

 29 interface IComponentProps {
 30   navigation: NavigationScreenProp<any, any>;
 31   SectionList: any; // I tried to add SectionList here, but that did not work.
 32 }
 33
 34 interface IDispatchToProps {
 35   requestHendelsesvelger: RequestHendelsesvelgerInterface;
 36   requestProsessguide: RequestProsessguideInterface;
 37 }
 38
 39 type Props = IComponentProps & IDispatchToProps;

121 class MessageDialog extends React.Component<Props> {

128   public render() {
129
130     return (
131       <SectionList
132         ref={(sectionlist) => { this.SectionList = sectionlist; }}
137       >
138       </SectionList>

WayneC · Accepted Answer · 2017-12-14 09:37:48Z

1

The Props type is to type this.props in your component not the component instance itself, you shouldn't add the SectionList there. It should be a property on the class, that way it will exist on the MessageDialog type:

class MessageDialog extends React.Component<Props> {
  private sectionList: SectionList;
  public render() {

    return (
      <SectionList
        ref={(sectionlist) => { this.sectionList = sectionlist; }}
      >
      </SectionList>

edited Dec 14, 2017 at 9:37

answered Dec 14, 2017 at 9:32

WayneC

5,7402 gold badges35 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

martins Over a year ago

That did almost work! :-) MessageDialog.tsx(127,24): error TS2314: Generic type 'SectionList' requires 1 type argument(s).. If I do private sectionList: any, then I get no warnings. Any idea how I can get the type correct?

martins Over a year ago

I'll try to add DefinitelyTyped. Looks like it has typing for SectionList.

WayneC Over a year ago

You would have to add the correct type args, Without seeing SectionList I cant say what they would be. eg private sectionList: SectionList<Type>

Collectives™ on Stack Overflow

How to define an TypeScript interface of an function on a react class?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related