I work with React using TypeScript.
Recently, I encountered an issue with exporting. I'm creating an interface that encapsulates components from Material-ui.
Here is a simplified example:
Wrapping.tsx
import { default as Component, ComponentProps as MProps }from '@material-ui/core/SomeComponent';
export interface MyProps extends MProps {}
export default MyComponent: React.FC<MyProps> = props => {
// Some rendering code here
}
index.ts
import MyComponent from './wrapping'
import MyProps from './wrapping'
export default MyComponent;
export MyProps;
Usage.tsx
import MyComponent, { MyProps } from '@wrapping';
// Warning: 'MyProps' has been declared but not used.
export default MyUsage: React.FC<MyPorps> = props => {
let data: MyProps = {
// The variable 'data' is showing error because 'MyProps' is any type.
// Error message: 'MyProps' refers to a value, but is being used as a type here.ts(2749)
}
}
I am puzzled as to why 'MyProps' defaults to the 'any' type and seems different when used with 'let data' and 'import { MyProps }'.
Is there an issue in my code?