question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

React components not extendable as props interfaces are private in .d.ts files

See original GitHub issue

Issue 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:closed
  • Created 4 years ago
  • Comments:6 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
xcarpentiercommented, Jun 27, 2019

done on the latest version: v0.9.8

0reactions
ankhzetcommented, Jun 27, 2019

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.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found