Typescript the “what no body teaches you" series episode 1

Required Dependencies

For this fist episode I am going to show you how to do a Generic Component. For this component All you’ll need is to have install

$ npm i react react-dom && npm i -D @types/react

Let’s start with `import React from "react";`

Next the first thing is to define a generic type that will be useful for any html component

type HTML = keyof JSX.IntrinsicElements;

now we are going to the auto competition of all them html components, let’s use that into our components.

interface GenericProps<H=HTMLElement> extends React.HTMLAttributes<H> {
    html: keyof JSX.IntrinsicElements;
}

The component would be some sort of small and it looks like this:

const Generic: React.FC<GenericProps> = props=> {
   const { html: Tag, …attributes } = props;
   return <Tag {…attributes} />;
};

we just set them default props and export it and we is done.

Generic.defaultProps = {
   tag: "section",
};
export default Generic;

if you did it as I did you. have some like this

now to use it you have to pass a prop call html which is any html tag.

<Generic html="a" />