-
Notifications
You must be signed in to change notification settings - Fork 75
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Double Props definition when working with TypeScript #22
Comments
You are quite right about doubling the efforts when adding types for TS. There are a few reasons for such a situation:
I have a pattern of the component class that could be useful and satisfies IDE's intellisense: import React from 'react';
import PropTypes from 'prop-types';
interface PrimaryButtonProps {
text: string;
onClick?: () => void;
}
/**
* Button is generated by Webcodesk. Replace this comment with a valuable description.
*/
class PrimaryButton extends React.Component<PrimaryButtonProps, any> {
static propTypes: PropTypes.InferProps<PrimaryButtonProps> = {
/**
* Label of the button.
*/
text: PropTypes.string.isRequired,
/**
* Triggered when the user clicks on the button
*/
onClick: PropTypes.func,
};
static defaultProps: PrimaryButtonProps = {
text: 'Button',
};
// constructor(props: PrimaryButtonProps) {
// super(props);
// }
handleButtonClick = (e: React.MouseEvent<HTMLElement>): void => {
if (e) {
e.stopPropagation();
e.preventDefault();
}
if (this.props.onClick) {
this.props.onClick();
}
};
render() {
return (
<button onClick={this.handleButtonClick}>{this.props.text}</button>
);
}
}
export default PrimaryButton; |
Hi, thanks for the explanation. Sounds reasonable. Maybe it makes sense to add this example (and the one in the other issue regarding the *.funcs.ts type check stuff) to the User Guide or maybe to the a readme in the TypeScript Base Package repository as an kind of documentation to make it easier to work with typescript and speed up the learning curve. Actual all Examples and documentations are just available in JS. Feel free to close the issue or keep it open as reminder for extending the documentation, if you like. |
Sure, I'll do that. Thanks. |
Hi,
when working with TypeScript Components, it is needed to define the props definition twice:
Interface
and generic React ComponentReact.Compoennt<PropsType>
) for type checking in the codeIt would be nice when for TypeScript compoenents the TypeScript Props definition could be used to show and reflect the definition in the Webcodesk UI. That would make maintenance easier.
The text was updated successfully, but these errors were encountered: