DEV Community

Ashutosh Sarangi
Ashutosh Sarangi

Posted on β€’ Edited on

2 1 1 1 1

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?

  1. Find the atomic component where you need to adopt the typescript
  2. change the file extension to. tsx
  3. if you have prototypes i.e. well good.
  4. declare a type/interface using those prop types
  5. 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 => {}

Enter fullscreen mode Exit fullscreen mode

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.

This is how you will get hint from the Vs code

  1. 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>([]);

Enter fullscreen mode Exit fullscreen mode

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;

Enter fullscreen mode Exit fullscreen mode

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.

Image of Timescale

πŸš€ pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applicationsβ€”without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more β†’

Top comments (0)

The best way to debug slow web pages cover image

The best way to debug slow web pages

Tools like Page Speed Insights and Google Lighthouse are great for providing advice for front end performance issues. But what these tools can’t do, is evaluate performance across your entire stack of distributed services and applications.

Watch video