[@types/react] Booleanish prop definitions cause issues when destructuring props

[cascornelissen]

• I tried using the @types/react package and had problems.
• I tried using the latest stable version of tsc. https://www.npmjs.com/package/typescript
• I have a question that is inappropriate for StackOverflow. (Please ask any appropriate questions there).
• Mention the authors (see Definitions by: in index.d.ts) so they can respond.
  • Authors: @fregante

A couple of projects we're working on contain React components that allow any available HTML attribute to be passed to them. We use React.HTMLProps to extend the component-specific props for this.

import React from 'react';

interface Props extends React.HTMLProps<HTMLDivElement> {}

export default class Example extends React.Component<Props> {
    render() {
        const { ...props } = this.props;
        
        return <div {...props}/>;
    }
}

The types for a few props (like contentEditable) have been changed in #40658 (released as version 16.9.4) which breaks this with the following error:

TS2322: Type '{ accept?: string | undefined; acceptCharset?: string | undefined; action?: string | undefined; allowFullScreen?: boolean | undefined; allowTransparency?: boolean | undefined; alt?: string | undefined; ... 354 more ...; key?: string | ... 1 more ... | undefined; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.   Type '{ accept?: string | undefined; acceptCharset?: string | undefined; action?: string | undefined; allowFullScreen?: boolean | undefined; allowTransparency?: boolean | undefined; alt?: string | undefined; ... 354 more ...; key?: string | ... 1 more ... | undefined; }' is not assignable to type 'HTMLAttributes<HTMLDivElement>'.     Types of property 'contentEditable' are incompatible.       Type 'boolean | "true" | "false" | "inherit" | undefined' is not assignable to type 'boolean | undefined'.

The changes in #40658 resulted in the contentEditable prop having a type of 'boolean | "true" | "false" | "inherit" | undefined' while the HTMLDivElement > HTMLElement > ElementContentEditable has a type of 'boolean | undefined'

[schabluk]

Same here using "react": "^16.12.0" and "@types/react": "16.9.17":

interface ListProps extends React.HTMLAttributes<HTMLDivElement> {
  children: React.ReactNode
}

Types of property 'contentEditable' are incompatible.
  Type 'boolean | "inherit" | "false" | "true" | undefined' is not assignable to type 'boolean | undefined'.
    Type '"inherit"' is not assignable to type 'boolean | undefined'.  TS2322

3 |
4 | export function List({ children, ...rest }: ListProps) {
5 |   return <div {...rest}>{children}</div>
  |           ^
6 | }
7 |

[fregante]

I guess HTMLDivElement > HTMLElement > ElementContentEditable also needs to be updated to match the type

[rodoabad]

@fregante what would be the correct type?

[fregante]

I haven’t checked but my guess is that ElementContentEditable also needs to have the same booleanish prop.

[krisquigley]

Same here using "react": "^16.12.0" and "@types/react": "16.9.17":

interface ListProps extends React.HTMLAttributes<HTMLDivElement> {
  children: React.ReactNode
}

Types of property 'contentEditable' are incompatible.
  Type 'boolean | "inherit" | "false" | "true" | undefined' is not assignable to type 'boolean | undefined'.
    Type '"inherit"' is not assignable to type 'boolean | undefined'.  TS2322

3 |
4 | export function List({ children, ...rest }: ListProps) {
5 |   return <div {...rest}>{children}</div>
  |           ^
6 | }
7 |

This fixed my issue, thanks!

[orta]

Hi thread, we're moving DefinitelyTyped to use GitHub Discussions for conversations the @types modules in DefinitelyTyped.

To help with the transition, we're closing all issues which haven't had activity in the last 6 months, which includes this issue. If you think closing this issue is a mistake, please pop into the TypeScript Community Discord and mention the issue in the definitely-typed channel.