NO BS TS 20+


TypeScript

Updated Mar 14th, 2022

#20 – Typescript/React – Setup and Properties

npx create-react-app projName --template typescript

We now have tsx files instead of ts files. Everything else is about the same.

There is a ts config file

TS doesn’t get in the ay of us using React at all it really just helps out, and is a good replacement for things like prop types.

#21 – Typescript/React – Hooks

Great cheatsheet for hooks and how to use them is here.

useState: almost no difference for basic state.

There is a situation when starting with null. handle with:

useState<Payload | null>(null)

useReducer

interface Todo {
  id: number;
  done: boolean;
  text: string;
}

type ActionType = 
  | { type: "ADD", text: string}
  | { type: "REMOVE", id: number}


const [] = useReducer((state: Todo[], action: ActionType) => {
  switch(action.type) {
    case "ADD":
      return [
        ...state,
        {
          id: state.length,
          text: action.text,
          done: false,
        }
      ]
     case "REMOVE":
       return state.filter(({id}) => {
         id !== action.id
       })
     default:
       throw new Error()
  }
}, [])

Then iterate through existing todo items

<Heading title={"Todos"}>
{todos.map(todo => {
   <div key={todo.id}>
     {todo.text}
     <button onClick={() => {
       dispatch({
         type: "REMOVE",
         id: todo.id,
       })
     }}>Remove</button>
   </div>  
})}

Add an input field to add anew one (code not show here; see repo)

Excellent hinting

#22 – Typescript/React – Advanced Properties

prop drilling useState

create incrementer component

const Incrementer: React.FunctionComponent<{
  value: UseNumberValue;
  setValue: UseNumberSetValue;
}> = ({ value, setValue }) => (
  <Button onClick={() => setValue(value + 1)} title={`Add - ${value}`} />
);

render incrementer component

Alternative using utility types (Return type) and a custom hook

Part 2 of this video is about detailed HTML props

Link to the page with all of these here.

React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;

#23 – Typescript/React – Custom Hooks

Over my skis here

#24 – Typescript/React – Generic Components

saw React.ReactNode

extend

adding detailed HTML props

Support for children: React.propsWithChildren

generic event handlers

#25 – Typescript/React – useContext

Want a copy of current todos

create and AppWrapper component with two columns

Want to useContext to share the todo items

useTodosManager

Creating the provider

using the provider

consuming the context

#26 – Typescript/React – Global State

Looking back at episode 24

Uses useReducer but changing to use global state hook from React-use” open source hooks (createGlobalState). Don’t need to use something as heavy as redux or mobx. react-hooks-global-state package is another alternative.

create the global state

Add in the custom hook.

git rid of the useReducer and move it into

basic useEffect to set initial state

stack app side by side and see shared global state in action

#27 -Typescript/React – Redux Toolkit

using redux toolkit instead of custom hook implemented in previous video

yarn add redux toolkit. Also add react-redux

bring in provider and the store

With redux you have a global store and with redux toolkit you can create a slice

example: user slice, profile slice, todo slice, from the single global singleton store.

creating the actions (mutate stuff in place instead of a big switch statement)

creating a selector

using the store

Creating a second consumer

redux is monstrous toolkit, redux toolkit makes it easier.

No BS TS #28 – Typescript/React – Zustand

Replacement state manager for redux that is much lighter weight.