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.
Top comments (0)