How to use Typescript, React and PropTypes es6 way.

I had come across to many places where people wants to use PropTypes even though they use typescript, but imanige you are developing an npm React Typescript, onces you compile Typescript. All that bitch*ng errors go away an people can use your libary as they f want. So if you want to add them proptypes and force them props to have some sort of value this is what you need to do.

So first thing you need to do is… well not really you can have a create-react-app, your own starter pack or any, but I’ll use one that I made so start the project how ever you feel is best for you I’ll just do:

$ git clone git@github.com:EnetoJara/-eneto-react-init.git

Once it is down loaded I’ll cd ./-eneto-react-init.git && rm -rf ./.git && npm i

I ran those three commants.

1. - get into the project.
2. - remove my git instance.
3. - install npm dependencies.

Once done that next thing I’ll do is create a new component:

$ mkdir -p ./src/components/test && touch ./src/components/test/{test-component.tsx,index.ts}

let open the file we just create in my case was *test-component.tsx*

so I’ll just paste the following:

import * as React from "react";

export interface testProps {
    isLoading: boolean;
    name: number;
    oneMore?: string;
}

export class Test extends React.Component<testProps, any> {

    public constructor (props: testProps) {
        super(props);

        this.state = {
            propOne: "",
            propTwo: ""
        };
    }
    
    public render (): React.ReactElement<testProps> {
        const { propOne, propTwo } = this.state;
        return (
            <div>
                component
                {propOne}
                {propTwo}
            </div>
        );
    }
}

Now let’s add them proptypes npm i -D prop-types press enter and install and of course add them at your component such as:

import * as React from "react";
import * as PropTypes from "prop-types";
export interface testProps {
    isLoading: boolean;
    name: number;
    oneMore?: string;
}

export class Test extends React.Component<testProps, any> {

    public constructor (props: testProps) {
        super(props);

        this.state = {
            propOne: "",
            propTwo: ""
        };
    }

    public render (): React.ReactElement<testProps> {
        const { propOne, propTwo } = this.state;
        return (
            <div>
                component
                {propOne}
                {propTwo}
            </div>
        );
    }
}

Test.propTypes = {
    isLoading:  PropTypes.bool.isRequired,
    oneMore: PropTypes.number.isRequired,
    name: PropTypes.string
}

but as you can see the ugly error There is no propTYpes property on Test or something like that. to fix it is pretty easy.

run the next command on the terminal: npm i -D @types/prop-types once it is install lets make quite a few changes.

We need to modified our props quite a bit: so instead of been:

export interface testProps {
    isLoading: boolean;
    name: number;
    oneMore?: string;
}

let’s change them to:

import * as React from "react";
import * as PropTypes from "prop-types";
// also add the line at the buttom
import { Validator, Requireable } from "prop-types";
export interface TestProps {
    isLoading: Validator<NonNullable<boolean>>;
    oneMore: Validator<NonNullable<string>>;
    name: Requireable<string>;
}

The last thing we need to change is the following. Let us add a public static property call propTypes to the test class:

import * as React from "react";
import * as PropTypes from "prop-types";
import { Validator, Requireable } from "prop-types";
export interface TestProps {
    isLoading: Validator<NonNullable<boolean>>;
    oneMore: Validator<NonNullable<string>>;
    name: Requireable<string>;
}

export class Test extends React.Component<testProps, any> {
    public state: testState;
    // we add the line at the bottom
    public static propTypes: testProps;

    public constructor (props: testProps) {
        super(props);

        this.state = {
            propOne: "",
            propTwo: ""
        };
    }

    public render (): React.ReactElement<testProps> {
        const { propOne, propTwo } = this.state;
        return (
            <div>
                component
                {propOne}
                {propTwo}
            </div>
        );
    }
}

Test.propTypes = {
    isLoading:  PropTypes.bool.isRequired,
    oneMore: PropTypes.number.isRequired,
    name: PropTypes.string
}

As you might noticed name was not mandatory at the begining, thats why it had ‘?’ but once you add

Requireable<string>;

you need to remove it.

Well yow bros! here you have itm this is how you add the propTypes to yow typescript components.

Also if you prefer them es7 way and stuff. Instead of doing all this, the only thing is to go like

export class MyStuff extends Component {
   public static propTypes = {
        name: PropTypes.string;
   }
}

but as I dont like how they look, I had to f* almost die