Comments (10)
Not sure if it's of any help but personally I've relied on reactstrap and react-bootstrap typings for guidance. I prefer reactstrap approach 🙂
Example
// USAGE: <Button type="type" label="label" /> => <button type="type">label</button>
import * as React from "react";
// tslint rule - all interface types must start with `I` (disable if needed)
interface IButtonProps<T> extends React.HTMLProps<T> {
label?: string;
type?: string;
};
/*
*
* <T> can be any HTML* interface but using the equivalent of the rendered html element is recommended.
* <li> => HTMLLIElement, <div> => HTMLDivElement e.t.c
*
* With vscode you get the added benefit of auto-suggestion for <T>.
* Go no try it - type `HTML` in a js/ts file and see what happens :)
*
* If you navigate to the interface definition of any HTML* interface,
* you'll find some html attributes already defined.
* This, together with extending `React.HTMLProps`, saves you the trouble of
* redefining html attributes like type for <button>, href for <a>, size, width e.t.c
*
* But don't get too drunk on DRY. I personally don't mind repeating them as I find
* that it provides better developer experience making it easier to deprecate/maintain props
*
* Some html tags mostly html5 tags like aside, article e.t.c don't have HTML* interfaces defined,
* so for such maybe use the generic HTMLElement interface instead
*
* Sometimes If you try changing some props to required(by omitting the `?` from `?:`),
* ts complains that you're incorrectly extending one of the interfaces,
* most likely `React.HTMLProps`.
*/
// WORKAROUNDS FOR ABOVE ISSUE
//a. Override the prop twice
interface IButtonProps<T> extends React.HTMLProps<T> {
label?: string;
type: any; // now this is required but we don't just want `any` type
};
// so we make props an interface
export interface ButtonProps extends IButtonProps<HTMLButtonElement> {
type: string; // and redefine it here again
};
//b. exclude properties from the type and define them yourself
// Eventually you should be able to use
interface IButtonProps<T> extends Omit<React.HTMLProps<T>, "prop"> {
[prop]: type;
}
// see links below for Omit reference
// If all is well
export type ButtonProps = IButtonProps<HTMLButtonElement>;
/*
* Not entirely sure if there's a different approach for stateless functional component but,
* At the time of writing reactstrap uses classes for everything.
* Compare e.g. reactstrap Col and it's type definition see links below
*
*/
declare class Button extends React.Component<ButtonProps> { };
export default Button;
// Try playing around with namespaces too!
Hopefully that sheds some light on the subject.
DISCLAIMER: I am not a typescript god/guru 😄. All things above are based on research and experimentation. Any corrections regarding this approach are totally welcome.🙂
Omit StackOverflow reference
Reactstrap Col definition
Reactstrap Col type definition
Thanks for this awesome repo 🎉🎉🎉
from react.
thanks.. yeah well I will just put in a link to this issue and hope people jump in haha. its ridiculous this stuff isn't documented, companies use this for production!
from react.
Anyone willing to take this or should I take it? :)
from react.
Will take this and propose a PR later in the evening
from react.
This is my example: https://github.com/Attrash-Islam/infinite-autocomplete/blob/master/infinite-autocomplete.d.ts
I export all the needed public functions that the developer work with and with adding this file into "typings" entry in the package.json file
from react.
I'm sorry for delaying this, but I will try my best soon 🙏
from react.
take your time, we're all busy :)
from react.
Sorry, I can't get to this, any one is welcomed to send a PR
from react.
dts-gen is also helpful, as well as this SO answer: https://stackoverflow.com/questions/12687779/how-do-you-produce-a-d-ts-typings-definition-file-from-an-existing-javascript
from react.
handled by @arvindcheenu :) #254
from react.
Related Issues (20)
- [Basic] useReducer: type safe dispatcher call HOT 2
- "Props: One or the Other but not Both" does not work HOT 2
- [Question] QUESTION_TITLE_HERE
- [Advanced] Wrapping/Mirroring a Component with ref forwarding
- facing errors
- not working
- Gene Piki wants to pay 0 USD to have this issue fixed
- JSX.Element is Deprecated HOT 11
- [Bug] The logo text is overflowing in small devices it should be truncate like mobile navigation. HOT 5
- Update CSS So that website can be accessible from any device of any width -- Solved HOT 8
- [Basic] Add resources to basic/recommended/talks.md HOT 3
- [Basic] Want to Fix Navbar Text Issue Without Truncating And Decreased Footer Logo Size Responsively For all Devices HOT 3
- Table of Content HOT 2
- Linked article on defaultProps docs is paywalled HOT 3
- add as a contributor? HOT 7
- [Basic] Linting page links are not working HOT 6
- CLASS METHODS AND CLASS PROPERTIES TITLES INTERCHANGED HOT 3
- [Advanced] ISSUE_TITLE_HERE
- [Advanced] Restrict useage of child component only as a child of a particular component HOT 3
- [Basic] Provide some docs on `memo` HOT 1
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 react.