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

? And why I’m starting my post like this? I read too many self-help books I guess.

consider using type for your React Component Props and State, for consistency and because it is more constrained. - 

Always use interface for public API’s definition when authoring a library or 3rd party ambient type definitions, as this allows a consumer to extend them via declaration merging if some definitions are missing - 

type level can also be extended by using the intersection syntax 

notice the type annotation User & { posts: Post[ ] } this is the syntax for intersecting two interface / type

you can also do something like this, making it more readable

In the end, it depends if you want to use 

as a rule of thumb is to use them consistently within your code. Whether you use only 

.Using them both will have no issue except for your code consistency.

When do we use type vs interface? Which should we use? When do we use type and interface? And why I’m starting my post like this? I read too many self-help books I guess.

TS Basic: Type VS Interface

What if our data is coming from an API? How do we make sure we have type-safe on our 

 function that fetching simple data and returning it to the client as json.

Let us say we already know what properties we wanted from our API.

Already Typescript will suggest ( if we hover ) to use 

We assign the typescript interface to the data itself.

 this is the best way to use if we don’t really know what result in our API when we fetch is going to be. 

But casting allows us to make anyone become a 

this would give us errors because the object doesn’t include the appropriate properties.

 syntax, and is probably what you should do in most cases.

What if our data is coming from an API? How do we ensure we have type-safe on our `async` function data? 

TS Basic: Typing Promises and Async Request

ComponentProps are typically used when you want to create a component using a native html element like 

Can also use ComponentProps to get the props of a component ( reference 

https://www.totaltypescript.com/react-component-props-type-helper

Here are some basic type and useful prop types when using Typescript in React.

TS for React: Prop Types

Literal types allow you to define exact values that a variable or property can take on.

by combining literals into a union, you can express a more useful concept

This feature provides more PRECISE TYPE CHECKING and helps enforce STRICTER constraints on the values that can be assigned.

literal types can also be used in combination with union types to create more complex constraints.

Using literal types, you can define and enforce specific values, making your code more EXPLICIT and catching potential errors at compile-time.

Literal Types allow you to SPECIFY that a variable or parameter MUST HAVE A PARTICULAR value

TS Basic: Literal Types

Sometimes you will have information about the type of value that TS can’t know about. Type assertions are used to explicitly specify the type of a value when the TS compiler is unable to infer it automatically.

They are simply a way to provide hints to the TS compiler for type checking during the compilation process

TS Basic: Type Assertion

Interface declaration is another way to name an object type.

TS is only concerned with the structure of the value we passed. It only cares that it has the expected properties. - Being concerned only with the structure and capabilities of type is why we call TS a structurally typed type system

Interface can also be extended to create a new interface based on the existing one.

 are most commonly used to define the structure of objects, they can also be applied to describe other types, such as function type and array type

TS Basic: Interfaces

Type aliases are a way of creating a custom name for your type variables, functions and objects for reusability and readability.

Type aliases can make your code more expressive and allow you to create reusable types that can simplify your type annotation throughout your codebase.

Note that aliases are only aliases - you cannot use type aliased to create different distinct "version" of the same type.

Tags