Comments (3)
You are quite right about doubling the efforts when adding types for TS. There are a few reasons for such a situation:
- As far as TS has only a compile-time type checking, I'd like to keep the run-time testing also. That is, we have to write PropTypes for the
propTypes
property. - Additionally, I'd like to have a single source of truth of the prop types for Webcodesk in different languages (TS or JS).
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;
from webcodesk-srv.
Hi,
thanks for the explanation. Sounds reasonable.
Just took me a while to write the component in the right way to get this UI Props working. But the issue with the non updating props panel was here more the reason, why it took a while.
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.
from webcodesk-srv.
Maybe it makes sense to add this example
Sure, I'll do that. Thanks.
from webcodesk-srv.
Related Issues (20)
- hook function error in component preview open HOT 3
- How does this compare to Webflow? HOT 2
- Add auto incremental suffix to the name when add a new instance
- Expand all sections while the first opening.
- Upgrade npm dependencies HOT 4
- Losing recent changes in etc files
- Adding props to a component are not directly reflected HOT 7
- Are there type definitions for TypeScript for *.funcs.ts files HOT 5
- Renaming of Pages, Flows maybe also Templates HOT 3
- Make a tree view of the instances under the page in the left navigation panel HOT 1
- Manipulating props in funcs of an unset control HOT 5
- Missing a way to record "onApplicationStart" flows HOT 2
- Settings Properties are not shown in some cases HOT 1
- Add new property type: `oneOfType`
- Set the first value as the default in property with type PropTypes.oneOf HOT 1
- Property definition with reusable propTypes HOT 1
- How to build for relative paths
- Documentation questions
- Path does not exist
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from webcodesk-srv.