Sometimes you don’t really know what error your backend or API is providing so Typescript will question the type on your 

 block your using so this are the different types you can use.

 as type is available as the errors type but this is discourage due to the loss of type safety.

 keyword is also available but also may loss of type safety and makes a runtime error if your assumption is incorrect

if you have a strong idea of the error’s origin and certain that specific type of error will be thrown you can use the 

 forces type narrowing. Before you can access any properties or call any methods on caught error, you must first check its type.

checks whether an object belongs to a particular class or its subclasses

Sometimes you don’t really know what error your backend or API is providing so Typescript will question the type on your try...catch block your using so this are the different types you can use.

TS Basic: Typing Errors in Try-Catch

Type utilities you can use to transform types or make them more reusable. These are set of built-in generic types.

creates a new type by excluding specific properties from an existing type

creates a new type by selecting a specific properties from an existing type

create an object type with specific keys and values

this utility can be used to map the properties of a type to another type

 meaning the properties of the type cannot be reassigned.

https://www.typescriptlang.org/docs/handbook/utility-types.html

TS Basic: Utilities

Narrowing refers to the process of refining the type of a variable or expression based on certain condition. It’s allow us to filter more specific assertions about the type of a value enabling better type checking.

In a nut shell this is a condition statement that compares the type of a variable incase of that variable has different kind

it is useful for quickly distinguishing between different primitive type like string, number, boolean, undefined and null

refers to a type narrowing that occurs when you use a truthy or falsy value in conitional statement.

a type narrowing that occurs when you use equality or inequality operators to compare value.

you can also define your own type guards using type pedantic

custom type guard allows you to define your own logic for narrowing based on your specific requirements. Especially useful when working with complex data structure

TS Basic: Narrowing

Context API is a feature added in React 16.3 that allows to share states across the entire application.

Less prop drilling ( passing props down manually at every level )

particularly useful for managing global data that needs to be shared between multiple components

It can be useful as well to store data retrieved from external sources such as API or databases and make it available to all components.

is a component wrapped in the component tree that is responsible for providing the data ( state ) to its child components

 props, which is the data you want to share

typically you want to wrap your top-level component or a higher-level component with the context provider to make the data available to all its children components. Such as 

A component that consumes the data provided by the Context Provider.

will automatically re-render whenever the data it consumes changes to ensure it is up to date.

 accepts any kind of value ( even an object ).

Theming - change the appearance of your application from light to dark? put it into context so all its child components can update

Current Account - need to know the current logged-in user, and you need it for your components to use if the user has permission on the specific component

Routing - rerouting your user if it’s logged-in account has expired, or maybe you just want to redirect them to another part of your site.

Managing States - or you only want to pass some state to a lower component or maybe parent component?

https://react.dev/learn/passing-data-deeply-with-context#use-cases-for-context

How to use React Context API ( Theme toggling)

Let’s create a Theming Context that toggles our app theme from dark to light mode.

 - custom hooks that access theme and toggleTheme function.


 - component that will wrap in our application that will provide the theme state and the toggleTheme function

Use the Theme in our MainContent component

https://codesandbox.io/s/react-context-api-5pjh9p

Context API is a feature added in Reacy 16.3 that allows to share states across the entire application.

Tags

TS Basic: Typing Errors in Try-Catch

TS Basic: Utilities

TS Basic: Narrowing

Learning React Context API