Error on typings using JSS Text with Typescript

Question

I'm getting an error on the fields property when using Typescript from this tutorial

class Profile extends React.Component<Props, State> {
  constructor(props: any){
    super(props);
  }
  render(){
    const {fields} = this.props;
    return(
    <div>
      <p>Profile Component</p>
      <Text field={fields.heading} />
    </div>
    )
  }
}

The Typescript compiler gives the following error:

[ts] Type 'string' has no properties in common with type '{ value?: string; editable?: string; }'. [2559]
Text.d.ts(4, 5): The expected type comes from property 'field' which is declared here on type 'IntrinsicAttributes & TextProps & { children?: ReactNode; }'
(JSX attribute) TextProps.field: {
    value?: string;
    editable?: string;
}
The text field data.

Which is actually in line with the Text.d.ts from JSS:

/** The text field data. */
field: {
    value?: string;
    editable?: string;
};

When I actually use the format that typescript wants <Text field={{value: fields.heading}} /> I get the following error:

Objects are not valid as a React child (found: object with keys {value}). If you meant to render a collection of children, use an array instead.

Updating the Text.d.ts to field: string; actually works, but that's not the typing specified by JSS.

Answer 1

The interface used in the example was off, the interface for fields should be an object with value.

interface IFields {
  heading: {
      value?: string;
  };
}