├── README.md
└── event-handler.png


/README.md:
--------------------------------------------------------------------------------
  1 | # Simple React Typescript Cheatsheet
  2 | 
  3 | - [Simple React Typescript Cheatsheet](#simple-react-typescript-cheatsheet)
  4 |   - [Typing props with inline type](#typing-props-with-inline-type)
  5 |   - [Typing props with Type](#typing-props-with-type)
  6 |   - [Typing props with default value](#typing-props-with-default-value)
  7 |   - [Typing props with children](#typing-props-with-children)
  8 |   - [Using Native HTML props to React Components](#using-native-html-props-to-react-components)
  9 |     - [1. Basic](#1-basic)
 10 |     - [2. Combine with your type](#2-combine-with-your-type)
 11 |     - [3. Overriding Native Props](#3-overriding-native-props)
 12 |     - [4. Extracting Props from Custom Components](#4-extracting-props-from-custom-components)
 13 |   - [Typing Event Handlers from native element](#typing-event-handlers-from-native-element)
 14 |   - [useState](#usestate)
 15 |   - [useCallback](#usecallback)
 16 |   - [useRef](#useref)
 17 |     - [Basic useRef](#basic-useref)
 18 |     - [useRef with HTML element](#useref-with-html-element)
 19 |     - [useRef with forwardRef](#useref-with-forwardref)
 20 |     - [Making a Read-Only Ref Mutable](#making-a-read-only-ref-mutable)
 21 |   - [useReducer](#usereducer)
 22 |   - [Context](#context)
 23 |   - [Polymorphic](#polymorphic)
 24 |   - [Types or Interfaces?](#types-or-interfaces)
 25 |   - [Resources](#resources)
 26 | 
 27 | 
 28 | ## Typing props with inline type
 29 | 
 30 | ```tsx
 31 | function Button(props: { children: React.ReactNode }) {
 32 |   return <button>{props.children}</button>;
 33 | }
 34 | ```
 35 | 
 36 | ## Typing props with Type
 37 | 
 38 | ```tsx
 39 | // you can use interface too
 40 | type ButtonProps = {
 41 |   className: string;
 42 |   children: React.ReactNode;
 43 | };
 44 | 
 45 | function Button(props: ButtonProps) {
 46 |   return <button className={props.className}>{props.children}</button>;
 47 | }
 48 | 
 49 | // with destructuring
 50 | function OtherButton({ className, ...props }: ButtonProps) {
 51 |   return <button className={className}>{props.children}</button>;
 52 | }
 53 | ```
 54 | 
 55 | ## Typing props with default value
 56 | 
 57 | ```tsx
 58 | type ButtonProps = {
 59 |   disabled?: boolean;
 60 |   className: string;
 61 |   children: React.ReactNode;
 62 | };
 63 | 
 64 | function Button({ disabled = true, ...props }: ButtonProps) {
 65 |   return (
 66 |     <button disabled={disabled} {...props}>
 67 |       {props.children}
 68 |     </button>
 69 |   );
 70 | }
 71 | ```
 72 | 
 73 | ## Typing props with children
 74 | 
 75 | ```tsx
 76 | type ButtonProps = {
 77 |   // accept everything React can render
 78 |   children: React.ReactNode;
 79 | };
 80 | 
 81 | function Button(props: ButtonProps) {
 82 |   return <button>{props.children}</button>;
 83 | }
 84 | ```
 85 | 
 86 | ## Using Native HTML props to React Components
 87 | 
 88 | ### 1. Basic
 89 | 
 90 | ```tsx
 91 | import React, { ComponentProps } from "react";
 92 | 
 93 | //ComponentProps<"button"> : get all type/props from native button element
 94 | 
 95 | function Button(props: ComponentProps<"button">) {
 96 |   return <button>{props.children}</button>;
 97 | }
 98 | ```
 99 | 
100 | ### 2. Combine with your type
101 | 
102 | ```tsx
103 | import React, { ComponentProps } from "react";
104 | 
105 | type ButtonProps = ComponentProps<"button"> & {
106 |   variant: "primary" | "secondary";
107 | };
108 | 
109 | function Button(props: ButtonProps) {
110 |   return <button {...props}>{props.children}</button>;
111 | }
112 | ```
113 | 
114 | ### 3. Overriding Native Props
115 | 
116 | ```tsx
117 | import React, { ComponentProps } from "react";
118 | 
119 | //remove onChange property from input with Omit<Type, Keys> and combine with new type
120 | type InputProps = Omit<ComponentProps<"input">, "onChange"> & {
121 |   onChange: (value: string) => void;
122 | };
123 | 
124 | function Input(props: InputProps) {
125 |   return <input {...props} />;
126 | }
127 | ```
128 | 
129 | ### 4. Extracting Props from Custom Components
130 | 
131 | Useful when author of some external library dont export the type definition
132 | 
133 | ```tsx
134 | import { ComponentProps } from "react";
135 | import { Navbar } from "some-ui-library";
136 | 
137 | type NavBarProps = ComponentProps<typeof NavBar>;
138 | ```
139 | 
140 | ## Typing Event Handlers from native element
141 | 
142 | Hover native html props in VSCode, you can copy paste the type definition
143 | 
144 | ```tsx
145 | type ButtonProps = {
146 |   other?: Boolean;
147 |   onClick?: React.MouseEventHandler<HTMLButtonElement>;
148 | };
149 | ```
150 | 
151 | ![event handler](event-handler.png "event handler")
152 | 
153 | ## useState
154 | 
155 | ```tsx
156 | // ❌ Typescript already know `text` type is string
157 | const [text, setText] = useState<string>("");
158 | // ✅ no need to tell typescript, only work with primitive value
159 | const [text, setText] = useState("");
160 | ```
161 | 
162 | ```tsx
163 | type Tag = {
164 |   id: number;
165 |   value: string;
166 | };
167 | 
168 | const [tags, setTags] = useState<Tag[]>([]);
169 | ```
170 | 
171 | ```tsx
172 | // data : Data | undefined
173 | const [data, setData] = useState<Data>();
174 | // data : Data | undefined
175 | const [data, setData] = useState<Data>(undefined);
176 | // data : Data | null
177 | const [data, setData] = useState<Data | null>(null);
178 | ```
179 | 
180 | ## useCallback
181 | 
182 | ```tsx
183 | function App(props: { id: number }) {
184 |   const handleClick = useCallback(
185 |     //⬇️ add type here
186 |     (message: string) => {
187 |       console.log("name");
188 |     },
189 |     [props.id]
190 |   );
191 | 
192 |   return (
193 |     <div>
194 |       <p>{message}</p>
195 |       <button onClick={() => handleClick("hello")}>button 1</button>
196 |       <button onClick={() => handleClick("hello")}>button 2</button>
197 |     </div>
198 |   );
199 | }
200 | ```
201 | 
202 | ## useRef
203 | 
204 | ### Basic useRef
205 | 
206 | ```tsx
207 | export const Component = () => {
208 |   // pass type if it doesn't have initial value
209 |   const id1 = useRef<string>();
210 |   // no need to pass type if it have initial value
211 |   const id2 = useRef("");
212 | 
213 |   useEffect(() => {
214 |     id1.current = "Random value!";
215 |   }, []);
216 | 
217 |   return <div></div>;
218 | };
219 | ```
220 | 
221 | ### useRef with HTML element
222 | 
223 | you can hover over the type of ref in the element to check what it accepts in your editor
224 | 
225 | ```tsx
226 | export const Component1 = () => {
227 |   // add null to initial value
228 |   const ref = useRef<HTMLAudioElement>(null);
229 | 
230 |   //(property) React.ClassAttributes<HTMLAudioElement>.ref?: React.LegacyRef<HTMLAudioElement> | undefined
231 |   return <audio ref={ref} />;
232 | };
233 | 
234 | ```
235 | 
236 | alternative using `ElementRef` type helper
237 | 
238 | ```tsx
239 | import { useRef, ElementRef } from "react";
240 | import { OtherComponent } from "./other-component";
241 | 
242 | // the easy alternative, you can use ElementRef
243 | const Component1 = () => {
244 |   const audioRef = useRef<ElementRef<"audio">>(null);
245 |   return <audio ref={audioRef}>Hello</audio>;
246 | }
247 | 
248 | // you can use ElementRef for component too
249 | type OtherComponentRef = ElementRef<typeof OtherComponent>;
250 | 
251 | const Component2 = () => {
252 |   const ref = useRef<OtherComponentRef>(null);
253 |  
254 |  return <OtherComponent ref={ref}>Hello</OtherComponent>;
255 | };
256 | 
257 | ```
258 | 
259 | ### useRef with forwardRef
260 | 
261 | ```tsx
262 | type InputProps = {
263 |   className: string;
264 | };
265 | 
266 | const MyInput = React.forwardRef<HTMLInputElement, InputProps>((props, ref) => {
267 |   return <input ref={ref} className={props.className} />;
268 | });
269 | // add displayName if you are using function expression, so its has a name in React Devtool
270 | MyInput.displayName = "MyInput";
271 | 
272 | function App() {
273 |   const input = React.useRef<HTMLInputElement>(null);
274 | 
275 |   useEffect(() => {
276 |     // focus to input element on first render
277 |     if (input.current) {
278 |       input.current.focus();
279 |     }
280 |   }, []);
281 | 
282 |   return <MyInput className="input-style" ref={input} />;
283 | }
284 | ```
285 | 
286 | ### Making a Read-Only Ref Mutable
287 | 
288 | ```tsx
289 | export const Component = () => {
290 |   const ref1 = useRef<string>(null);
291 |   // if you pass null to initial value
292 |   // this not allowed to change directly
293 |   ref1.current = "Hello";
294 | 
295 |   const ref2 = useRef<string>();
296 |   // if initial value is undefined this is allowed to change (mutable)
297 |   ref2.current = "Hello";
298 | 
299 |   return null;
300 | };
301 | ```
302 | 
303 | ## useReducer
304 | 
305 | You can use [Discriminated Unions](https://www.totaltypescript.com/discriminated-unions-are-a-devs-best-friend) for reducer actions. Don't forget to define the return type of reducer, otherwise TypeScript will infer it.
306 | 
307 | ```tsx
308 | import { useReducer } from "react";
309 | 
310 | const initialState = { count: 0 };
311 | 
312 | type ACTIONTYPE =
313 |   | { type: "increment"; payload: number }
314 |   | { type: "decrement"; payload: string };
315 | 
316 | function reducer(state: typeof initialState, action: ACTIONTYPE) {
317 |   switch (action.type) {
318 |     case "increment":
319 |       return { count: state.count + action.payload };
320 |     case "decrement":
321 |       return { count: state.count - Number(action.payload) };
322 |     default:
323 |       throw new Error();
324 |   }
325 | }
326 | 
327 | function Counter() {
328 |   const [state, dispatch] = useReducer(reducer, initialState);
329 |   return (
330 |     <>
331 |       Count: {state.count}
332 |       <button onClick={() => dispatch({ type: "decrement", payload: "5" })}>
333 |         -
334 |       </button>
335 |       <button onClick={() => dispatch({ type: "increment", payload: 5 })}>
336 |         +
337 |       </button>
338 |     </>
339 |   );
340 | }
341 | ```
342 | 
343 | ## Context
344 | 
345 | ```tsx
346 | import { createContext, useState } from "react";
347 | 
348 | type ThemeContextType = "light" | "dark";
349 | 
350 | const ThemeContext = createContext<ThemeContextType | null>(null);
351 | 
352 | //if you have proper default value, you dont need specify null
353 | //const ThemeContext = createContext<ThemeContextType>("light");
354 | 
355 | const useTheme = () => {
356 |   const theme = useContext(ThemeContext);
357 | 
358 |   if (!theme) {
359 |     throw new Error(
360 |       "useTheme has to be used within <ThemeContext.Provider>"
361 |     );
362 |   }
363 |   return theme;
364 | };
365 | 
366 | const App = () => {
367 |   const [theme, setTheme] = useState<ThemeContextType>("light");
368 | 
369 |   return (
370 |     <ThemeContext.Provider value={theme}>
371 |       <MyComponent />
372 |     </ThemeContext.Provider>
373 |   );
374 | };
375 | 
376 | 
377 | const SomeComponent = () => {
378 |    // since the value has been checked inside useTheme, no need checking null value
379 |    const theme = useTheme();
380 |    return <p>current theme: {theme}.</p>;
381 | };
382 | ```
383 | 
384 | ## Polymorphic
385 | 
386 | Imagine a `Button` component that renders a `<button>` element, but with your fancy button styles. If want to render the Button component as an a other element we might have an API like:
387 | 
388 | ```tsx
389 | <Button variantColor="primary" href="https://blog.makerx.com.au/" as="a">
390 |   Click me
391 | </Button>
392 | ```
393 | 
394 | This looks nice, but its not work realy well with typescript. here the alternative using `radix-ui/react-slot`
395 | 
396 | ```tsx
397 | 
398 | // Button.tsx
399 | import { Slot } from '@radix-ui/react-slot'
400 | 
401 | type ButtonProps = React.ComponentPropsWithoutRef<'button'> & {
402 |   variantColor: 'primary' | 'secondary' | 'danger'
403 |   asChild?: boolean
404 | }
405 | 
406 | export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>((props, forwardedRef) => {
407 |   const { variantColor, asChild, ...buttonProps } = props
408 |   const Component = (asChild ? Slot : 'button') as 'button'
409 | 
410 |   return (
411 |     <Component
412 |       {...buttonProps}
413 |       ref={forwardedRef}
414 |       className={clsx(
415 |           // ...
416 |       )}
417 |     />
418 |   )
419 | }
420 | 
421 | // App.tsx
422 | 
423 | function App() {
424 |   return (
425 |     <div>
426 |        {/* asChild must be true */}
427 |       <Button variantColor="primary" asChild>
428 |         {/* render button component as link */}
429 |         <a href="https://google.com">About</a>
430 |       </Button>
431 |     </div>
432 |   )
433 | }
434 | ```
435 | 
436 | ## Types or Interfaces?
437 | 
438 | `interface`s are different from `type`s in TypeScript, but they can be used for very similar things as far as common React uses cases are concerned. Here's a helpful rule of thumb:
439 | 
440 | - Always use `interface` for public API's definition when authoring a library or 3rd party ambient type definitions.
441 | 
442 | - Consider using `type` for your React Component Props and State, because it is more constrained.
443 | 
444 | Types are useful for union types (e.g. `type MyType = TypeA | TypeB`) whereas Interfaces are better for declaring dictionary shapes and then `implementing` or `extending` them.
445 | 
446 | ## Resources
447 | 
448 | - [React Total Typescript](https://www.totaltypescript.com/tutorials/react-with-typescript)
449 | - [Discriminated Unions are a Frontend Dev's Best Friend](https://www.totaltypescript.com/discriminated-unions-are-a-devs-best-friend)
450 | - [Other React TypeScript Cheatsheets
451 |   ](https://react-typescript-cheatsheet.netlify.app/)
452 | 


--------------------------------------------------------------------------------
/event-handler.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ibnumusyaffa/simple-react-typescript-cheatsheet/816d4f8eef95be74989f1c241dbb4719d65d0f6c/event-handler.png


--------------------------------------------------------------------------------