Giter VIP home page Giter VIP logo

Comments (10)

m8r1x avatar m8r1x commented on March 29, 2024 2

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.

tsiq-swyx avatar tsiq-swyx commented on March 29, 2024 1

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.

 avatar commented on March 29, 2024 1

Anyone willing to take this or should I take it? :)

from react.

 avatar commented on March 29, 2024 1

Will take this and propose a PR later in the evening

from react.

 avatar commented on March 29, 2024

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.

 avatar commented on March 29, 2024

I'm sorry for delaying this, but I will try my best soon 🙏

from react.

tsiq-swyx avatar tsiq-swyx commented on March 29, 2024

take your time, we're all busy :)

from react.

 avatar commented on March 29, 2024

Sorry, I can't get to this, any one is welcomed to send a PR

from react.

swyxio avatar swyxio commented on March 29, 2024

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.

swyxio avatar swyxio commented on March 29, 2024

handled by @arvindcheenu :) #254

from react.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.