--- title: "Some neat things to know when working with React and TypeScript" url: "https://www.bekk.christmas/post/2019/21/some-neat-things-to-know-when-working-with-react-and-typescript" authors: ["Bendik Ibenholt"] published: "2019-12-21" updated: "2024-11-07T13:05:28Z" language: "en-US" type: "article" tags: ["React"] --- # Some neat things to know when working with React and TypeScript I started working with React and TypeScript about six months ago. Since then I’ve learned a lot, and there are a few things I wish I knew when I started out that would have saved me from messy solutions and some frustrating moments. Here are the ones I think are the most useful. ## In short TypeScript’s type inference can remove a lot of manual typing, and when values need to vary, union types let a variable hold more than one type. Discriminated unions build on that idea and are useful for typing components that accept different sets of props. - **For:** React developers using TypeScript - **Good to know beforehand:** Familiarity with React and basic TypeScript _AI-generated_ **Type inference** You don’t have to explicitly type _everything_, TypeScript will use the type of the initial value of a variable. It works for more complex types too. ``` const [season, setSeason] = React.useState({name:"Christmas", color:"red"});//in order to set the state you can do this:setSeason({name:"Easter", color: "yellow"}); ``` If you realise you need the type in retrospect, you can can go back and declare the type, _or_ you can use _typeof_ to declare the type based on the inference. ``` type Season = typeof season; ``` **Union types** When I started out with typescript and React I was mostly familiar with typed languages through Java so this was the first time I came across union types. If you haven’t come across it before it basically allows you to say that a variable can be one of several types. It’s useful if you want to avoid type inference but still want a variable to be able to have more than one type. For instance if you want to initialize a state with a null value ``` const [season, setSeason] = React.useState(null); ``` **Discriminated Unions** In the same vein as the tip above, here’s another tip for typing which incorporates union types. If you make a union type of several types that have one common literal type that you can use to tell the types apart you have what’s called a discriminated union type. Useful if you want your components accept different sets of props. ``` type NeatTrickProps = | { hasTheme: true; season: 'christmas' | 'easter'; } | { hasTheme: false; };export const NeatTrickBanner: FunctionComponent = props => { if (props.hasTheme) { return seasonBanner(props.season); } return (

No reason to celebrate

); };} ``` So that’s a few features I really wish I was familiar with when I started out using react and Typescript. If you want to read more I highly recommend these [cheatsheets](https://github.com/typescript-cheatsheets/react-typescript-cheatsheet) and the [official typescript docs](https://www.typescriptlang.org/docs/home.html) Happy holidays :-) ## Relevant resources recommended by the author - [React+TypeScript Cheatsheets](https://github.com/typescript-cheatsheets/react-typescript-cheatsheet) - [Official TypeScript docs](https://www.typescriptlang.org/docs/home.html)