React components not extendable as props interfaces are private in .d.ts files
See original GitHub issueIssue Description
React components not extendable as props interfaces are private in .d.ts
files:
// SystemMessage.d.ts
// here props interface is not exported
interface SystemMessageProps<TMessage extends IMessage> {
currentMessage?: TMessage;
containerStyle?: StyleProp<ViewStyle>;
wrapperStyle?: StyleProp<ViewStyle>;
textStyle?: StyleProp<TextStyle>;
}
export default class SystemMessage<TMessage extends IMessage = IMessage> extends Component<SystemMessageProps<TMessage>> {
// GiftedChat.d.ts
// only class definition is used
import SystemMessage from './SystemMessage';
// only class is exported from definition file
export { ..., SystemMessage, ... };
Steps to Reproduce / Code Snippets
import { SystemMessageProps } from 'react-native-gifted-chat'; // TS2305: Module '"node_modules/react-native-gifted-chat/lib"' has no exported member 'SystemMessageProps'.
interface Props extends SystemMessageProps {
currentMessage: SomeOtherCompatibleType;
}
export class SystemMessage extends React.Component<Props> {
render() {
const { currentMessage, containerStyle } = this.props; // TS2339: Property 'containerStyle' does not exist on type 'Readonly<Props> & Readonly<{ children?: ReactNode; }>'.
return (
...
);
}
}
Expected Results
Props interfaces exported in .d.ts
files.
Additional Information
- react-native-gifted-chat version: 0.9.7
Issue Analytics
- State:
- Created 4 years ago
- Comments:6 (3 by maintainers)
Top Results From Across the Web
Extend TypeScript 2.5.2 Component Props definition in a ...
Solved it by copying index. d. ts from node_modules\@types\react-bootstrap-table into Typings\react-bootstrap-table and edit the file there.
Read more >TypeScript Types or Interfaces for React component props
When writing React components with TypeScript, you have two options when it comes to typing its props. You can use either type aliases...
Read more >Useful Patterns by Use Case - React TypeScript Cheatsheets
Strategy: extend React.ComponentPropsWithoutRef<'button'>. // usage function App() { // Type '"foo"' is not assignable to type '"button" | "submit" ...
Read more >How to Build a React Component with TypeScript Interfaces
This guide walks through how to build React components that utilize TypeScript interfaces. This illustrates the power of using TypeScript ...
Read more >React with TypeScript: Best Practices - SitePoint
The output is still similar to a non-TypeScript React project. ... the .tsx file extension; the tsconfig.json; the react-app-env.d.ts.
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
done on the latest version: v0.9.8
It seems, I can’t reopen the issue, if I’m not the one who closed it: https://stackoverflow.com/a/21333938/2109067 I can create new issue, if you okay with that, or just cook-up a PR.