React + Typescript Quick Adoption (Not With any 😅😅😅)

What would be your approach to type script adaptation if you have some old code base with JavaScript?

Find the atomic component where you need to adopt the typescript
change the file extension to. tsx
if you have prototypes i.e. well good.
declare a type/interface using those prop types
assign the interface/ type in the component

type ControlPanelProps = {
  name: 'string';
  onChange: (e: React.ChangeEvent<HTMLInputElement>, param1: string) => void;
};

const ControlPanel = ({ name, onChange }: ControlPanelProps): JSX.Element => {}

How I got the onChange Type:- React.ChangeEvent

if you have vs code Hover on the onChange menthod it will point you to write type.

PropType for children:- React.ReactNode

Typing useState


type Quote = {
  id?: string;
  content: string;
  source: string;
};
  const [quote, setQuote] = useState<Quote | undefined>();
  const [quotes, setQuotes] = useState<Quote[] | undefined>([]);

Below I tried to add possible scenarios in a component and how we can adopt typescript

I hope this single example with quick time give you a glance of it.

import React, { useState, useContext, RefObject } from 'react';
import { useSelector, useDispatch, Dispatch } from 'react-redux';
import { MyContext } from './MyContext'; // import your context
import { MyAction } from './actions'; // import your action type

interface ChildComponentProps {
 children: React.ReactNode;
  ref: RefObject<HTMLDivElement>;
  dispatch: Dispatch<MyAction>;
}

const ChildComponent = React.forwardRef<HTMLDivElement, ChildComponentProps>((props, ref) => {
  const { dispatch } = props;

  // useState
  const [count, setCount] = useState<number>(0);

  // Context API
  const contextValue = useContext(MyContext);

  // useSelector and useDispatch
  const value = useSelector((state: RootState) => state.value); // replace RootState with your state type
  const reduxDispatch = useDispatch<Dispatch<MyAction>>();

  // Form event handler
  const handleChange = (event: React.FormEvent<HTMLInputElement>) => {
    // handle change
  };

  return (
    <div ref={ref}>
      {/* rest of your component */}
    </div>
  );
});

export default ChildComponent;

I hope this helps, Feel free to reach out to me if you have any concerns also feel free to add your valuable comment on enhancing other scenarios.

Blog

React + Typescript Quick Adoption (Not With any 😅😅😅)

Ashutosh Sarangi

Join Our Newsletter. No Spam, Only the good stuff.

Related