Skip to content
This repository was archived by the owner on Nov 27, 2023. It is now read-only.

error TS2324: Property 'children' is missing in type #95

Closed
nojaf opened this issue Apr 29, 2016 · 3 comments
Closed

error TS2324: Property 'children' is missing in type #95

nojaf opened this issue Apr 29, 2016 · 3 comments

Comments

@nojaf
Copy link

nojaf commented Apr 29, 2016

I tried to compile this

import React, { Component } from 'react'
import classNames from 'classnames'

class Button extends Component {

  buttonTypeRender(){
    let style = 'button'
    let props = this.props
    style += ` ${classNames(props)}` + ` ${props.className}`
    if (props.type === 'link')
      return <a {...props} className={style} href={this.props.to}>{this.props.children}</a>
    else
      return <button {...props} className={style} type={props.type} desabled={this.props['is-disabled']}>{this.props.children}</button>
  }

  render () {
    return this.buttonTypeRender()
  }

}

Button.propTypes = {
  children: React.PropTypes.any.isRequired,
  type: React.PropTypes.oneOf(['submit', 'button', 'link', '']),
  className: React.PropTypes.string,
  to: React.PropTypes.string
}

Button.defaultProps = {
  type: 'link',
  className: '',
  to: '#'
}

export default Button

The result was this:

declare module 'bulma-react' {
    import * as React from 'react';

    export interface ButtonProps {
        children: any;
        type?: any;
        className?: string;
        to?: string;
    }

    export default class Button extends React.Component<ButtonProps, any> {
    }
}

Which seems fine to me but when I did a little test I couldn't compile it

/// <reference path="../tsd.d.ts" />
/// <reference path="../../react-bulma.d.ts" />


import {Component} from "react";
import Button from "bulma-react";

class BulmaApp extends Component<any, any> {
    render(){
        return (<Button>test</Button>);
    }
}

I got

?>tsc bulma-react-tests.tsx --jsx react --pretty

10         return (<Button>test</Button>);
                   ~~~~~~~~

bulma-react-tests.tsx(10,17): error TS2324: Property 'children' is missing in type 'IntrinsicAttributes & IntrinsicClassAttributes<Button> & ButtonProps & { children?: ReactElement<...'.

I'm using typescript 1.8.2.
Am I missing something here?

@KnisterPeter
Copy link
Owner

You have to manually set children in the generated types to be optional. Or even better in the PropTypes.
This is a problem between react and typescript. It is not solvable by the generator.

I've had this problem as well.

@nojaf
Copy link
Author

nojaf commented Apr 30, 2016

Ok, thanks

@KnisterPeter
Copy link
Owner

Just for the reference microsoft/TypeScript#4833

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants