There are missing props in the TypeScript type declaration file for ListItem, and also these types should ideally be generics.
Expected Behavior
It should be possible to use the ContainerComponent and ContainerProps props of the ListItem component from TypeScript. Also, I expected that ListItem and MenuItem would be generic types to account for the fact that any additional props are passed to the component specified by the component prop, but they're not. To be specific, in this file, the interface is currently defined like this:
export interface MenuListProps ...
whereas I would have expected to see something like this:
export interface MenuListProps<TContainerComponentProps = {}> ...
Current Behavior
This TypeScript (.tsx) code does not compile:
<ListItem ContainerComponent="div" ContainerProps={{className: 'demo'}}>an item</ListItem>
Steps to Reproduce (for bugs)
Create the following test component in TypeScript:
import React from 'react'
import { ListItem, ListItemProps } from 'material-ui/List'
const Test: React.SFC<{}> = () => {
return <ListItem ContainerComponent="div" ContainerProps={{className: 'demo'}}>an item</ListItem>
}
export default Test
Notes
The priority here is adding ContainerComponent and ContainerProps to the type declaration. Making it generic (e.g. MenuListProps<TContainerComponentProps = {}>) is arguably a best practice and would be nice, but might not be so practically useful in this case. If it were a class component it might be more helpful, but as far as I can tell, TypeScript does not provide a way to alias generic functions that would be any more concise than my current solution of using a typecast:
const MyMenuItem = MenuItem as React.ComponentType<MenuItemProps & MyComponentProps>
...
render() {
return <MyMenuItem component={MyComponent} somePropToMyComponent="demo">an item</MyMenuItem>
}
Your Environment
| Tech |
Version |
| Material-UI |
1.0.0-beta.32 |
| React |
16.2.0 |
| browser |
Chrome 64 |
| TypeScript |
2.7.1 |
There are missing props in the TypeScript type declaration file for ListItem, and also these types should ideally be generics.
Expected Behavior
It should be possible to use the
ContainerComponentandContainerPropsprops of theListItemcomponent from TypeScript. Also, I expected thatListItemandMenuItemwould be generic types to account for the fact that any additional props are passed to the component specified by thecomponentprop, but they're not. To be specific, in this file, the interface is currently defined like this:whereas I would have expected to see something like this:
Current Behavior
This TypeScript (.tsx) code does not compile:
Steps to Reproduce (for bugs)
Create the following test component in TypeScript:
Notes
The priority here is adding
ContainerComponentandContainerPropsto the type declaration. Making it generic (e.g.MenuListProps<TContainerComponentProps = {}>) is arguably a best practice and would be nice, but might not be so practically useful in this case. If it were a class component it might be more helpful, but as far as I can tell, TypeScript does not provide a way to alias generic functions that would be any more concise than my current solution of using a typecast:Your Environment