DEV Community 👩‍💻👨‍💻

satish-rajnale
satish-rajnale

Posted on

Getting Started with TypeScript<T> in React

First : Open the terminal and run this command

npx create-react-app my-app --template typescript
# or
yarn create react-app my-app --template typescript

Enter fullscreen mode Exit fullscreen mode
You will be get a up and running react app with typescript configurations with this template.

Now you can make changes to your App.tsx file.

Note : in your tsconfig.json file strict mode is set true, while it is a good practice to have it true you might get a lot errors and feel more restrict if not used proper ways around typescripting your app.

const App: React.FC = () => {
  // App body
};
Enter fullscreen mode Exit fullscreen mode

Note : You must have installed a dependancy @types/node & @types/react. Check your package.json file

Defining a state with type

const [task, setTask] = useState < string > '';
// <string | null> throws error that value cannot be null;
const [todoList, setTodoList] = useState < Array < string >> [];
// null does not work Array<string |null> it shows error that string[] cannot be null
Enter fullscreen mode Exit fullscreen mode

Input and onchange handler

<input type="text" value={task} onChange={handleChange} />
Enter fullscreen mode Exit fullscreen mode
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
  // you have to specify what event type
  setTask(event.target.value);
};
Enter fullscreen mode Exit fullscreen mode

So apparently typescript needs the event type also which is provided by our browser (Js) events and React extends those events & puts them in the React.syntheticEvent variable. Typescript wants the event provided by React.

Lets create a useReducer component with typescript and react.
1.Defining our action types & initial state

import { useReducer } from 'react';

const initialState = {
  counter: 100,
};

type ACTIONTYPES =
  | { type: 'increment'; payload: number }
  | { type: 'decrement'; payload: number };
Enter fullscreen mode Exit fullscreen mode

2.Count reducer

function counterReducer(state: typeof initialState, action: ACTIONTYPES) {
  switch (action.type) {
    case 'increment':
      return {
        ...state,
        counter: state.counter + action.payload,
      };
    case 'decrement':
      return {
        ...state,
        counter: state.counter - action.payload,
      };
    default:
      throw new Error('Bad action');
  }
}
Enter fullscreen mode Exit fullscreen mode
  1. UseReducer component
export default function UseReducerComponent() {
  const [state, dispatch] = useReducer(counterReducer, initialState);
  return (
    <div>
      <div>{state.counter}</div>
      <div>
        <button onClick={() => dispatch({ type: 'increment', payload: 56 })}>
          Increment
        </button>
        <button onClick={() => dispatch({ type: 'decrement', payload: 26 })}>
          decrement
        </button>
      </div>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

And that is how you create a simple reusable type based component in react.
<> By Satish Rajnale </>

Top comments (0)

We are hiring! Do you want to be our Senior Platform Engineer? Are you capable of chipping in across sysadmin, ops, and site reliability work, while supporting the open source stack that runs DEV and other communities?

This role might just be for you!

Apply now