DEV Community: Taric Ov

TypeScript (2): Handling Nullable Types (5 quick ways)

Taric Ov — Sun, 03 Mar 2024 16:44:30 +0000

Null-able types are all about typing a variable value that can either hold a valid value of a specific type or be NULL or UNDEFINED.

How to handle them in typescript? so writing robust and error-free TypeScript code.

Declare Null-able Types: [using the union operator (|)]:


   let name: string | null;
   let age: number | undefined;

Checking for Nullable Values: [use type guards]


   if (name !== null) {
       console.log(name.toUpperCase());
   }

Optional typing: [use Optional chaining]:


   console.log(age?.toFixed(2));

Assigning Nullable Values: [assigned null or undefined explicitly]:


   name = null;
   age = undefined;

Nullish Coalescing Operator (??):

- It returns the right-hand operand if the left-hand operand is null or undefined.


   let result: string;
   let nullableValue: string | null = null;

   // Using nullish coalescing operator
   result = nullableValue ?? "Default Value";
   console.log(result); // Output: "Default Value"

By understanding how to handle nullable types in TypeScript, you can write more robust and error-resistant code that gracefully handles nullable values.

Article on Linkedin: https://www.linkedin.com/posts/taricov_typescript-developercommunity-softwareengineering-activity-7170098531318284288-hoIj?utm_source=share&utm_medium=member_desktop

(1) TypeScript: Create Optional Types From Old Types?

Taric Ov — Sat, 20 Jan 2024 15:58:36 +0000

Here's a quick tip on how to use already-existing types to create a new type with optional properties without changing the original type:

type ToptionalProps<T> = { [K in keyof T]?: T[K] };

// Example Interface:

interface Tuser {
  id: number;
  name: string;
  email: string;
}

type ToptionalUser = ToptionalProps<Tuser>;

// Equivalent to: type ToptionalUser = { id?: number; name?: string; email?: string };

// ==== And you can play around and Pick and Omit like so: =====

type TnameAndIdUser = Omit<Tuser, "email">
type TomittedOptionalProps<T> = { [K in keyof T]?: T[K] };

type ToptionalUser2 = TomittedOptionalProps<TnameAndIdUser>;

const newUser: ToptionalUser2 = {email: "newuser@gmail.com"}
// Error 'email' does not exist in type 'TpickedOptionalProps<x>';

With this trick, you can now easily create a type where all properties of the original type become optional.

Ts Playground:

typescriptlang.org

Do We Really Hate Bugs? A Call For Peace… CringyAI And Moving Things #2

Taric Ov — Tue, 20 Jun 2023 00:35:38 +0000

This is the 2nd edition of a light-weight tech-comic newsletter ⎯ CringyAI and Moving Things shares thought-provoking ideas about tech and AI .. for more visit: https://bit.ly/cringyai

While bugs really move and infect plants, skin, and code .. they have much of a role in our lives that should make us take them seriously, … I mean differently! 😅

Of all sorts of bugs 🐞 the one in the code could really make you lose a lot of money 🤣 and you can not kill them by using pesticides, but rather by having a peaceful-mind that never runs outta patience, digging deep and reviewing the codebase that you earlier celebrated its release … what the bug!

With AI, we reached the point where we are, now, developing AI that is capable of killing real bugs:

"AI-controlled robotic laser can target and kill cockroaches" - newscientist.com

If you ask me, I couldn't let this get past my imagination 👉 This is StarWars In The Field lol 😂
but how about a bug in the AI?
could we have a robot w/ laser? but it has a bug in their codebase … re-appearing in the news headlines again but this time it reads:

"Uncontrolled AI robot chasing framers with a green laser beam" - thatisinmymind.me

but wait? what about the poor farmers.. and how could they self-defend themselves against the out-of-control robot?

for that we should continue with what the news could read:

"…and while farmers are making their way out of the field, they keep releasing more bugs to distract the raged robot." 😂

That's a fair fight, bugs vs bugs and we live in the margin.

But seriously, if we could ever take anything seriously in this publication 😆 .. why we do not enjoy bugs?

We all know a bug could be the feature u r about to discover, it could be your app's competitive edge, or it could be your best selling point.

Is it just because they r not intended? Or just cuz they feel off?

Cuz I know as everybody knows that not all bugs r hated, like..

- ..imagine a switch button that toggles on/off but it fills the whole width of your screen so the switcher travels onChange from edge to edge .. wouldn't that be playful and inviting for more session duration avgs and lesser bounce rates .. pllllllllllz 🙃

How about a website that is built w/ unintentional components, full of bugs..

- ..man, I'd stay there, forever, adventuring for 👉 from where the sidebar could show and come in for me 😂😂

Wait! ✋

- …how about an app for developers that rewards (The Best Generated Bug) and we r battling 🙃🤣🤣

That's enough for today 😁

How About A Game.. That Plays You? *CringyAI And Moving Things #1

Taric Ov — Fri, 16 Jun 2023 13:43:39 +0000

This is the 1st edition of a light-weight tech-comic newsletter ⎯ CringyAI and Moving Things shares thought-provoking ideas about tech and AI .. for more visit: https://bit.ly/cringyai

How about a game where you can free-talk to other NPC (non-player character) and they argue and discuss your choices/decisions in the game 🫤

So the characters (NPCs) could be for example chatgpt-based trained agents or better? DRL models (deep reinforcement learning) 🧐

That makes it an open-ended game where you could easily get stuck lol 👽

TypeScript: Any…? Does Have Any Benefits in Your Code?

Taric Ov — Wed, 14 Jun 2023 12:30:00 +0000

The `<any>` type in TypeScript is a dangerous "escape hatch" from the type system.

We all know that Typescript is a powerful tool for:

type safety, and
catching errors early in the development process.

However, there is one type that can be detrimental to your codebase if used carelessly - the infamous any type.

"Any..?" vs "I like to be specific about things!"

Imagine that you are at the grocery and you go over the cheese section:

_ "do you have cheese today guyz??"
= "definitely!!" - says the seller
_ "gimme some"
= "of what?"
_ "any..!"

and you repeat that in the fruits, meats, beauty… etc sections .. what you will end up with?

Things you have never desired and you may have paid (incurred) high cost for them.

let's see some of both UNdesired results and how high it could cost you using <any> in your codebase.

The Pitfalls of Using the `any` Type:

Using any may seem tempting at times, but it comes at a cost. Here are some reasons why you should think twice before reaching for the any type:

Type Safety Leakage:

Accessing members on an any-typed value bypasses TypeScript's type checking, creating a potential source of bugs and reducing the benefits of static typing.


 let data: any = 42;
 data.foo(); // No type checking, potential runtime error

Loss of IntelliSense:

When using any, you lose the benefits of TypeScript's powerful IntelliSense, making code exploration and auto-completion less effective.


 let user: any = getUser();
 user. // No IntelliSense, decreased productivity

Lack of Documentation:

any type erases valuable information about the expected data shape, making it harder for other developers (including your future self) to understand and maintain the code.


 function processResponse(data: any) {
 // Missing documentation about the expected structure of the data
 // Other developers need to rely on external documentation or guesswork
 }

Compiler Warnings and Errors:

The use of any suppresses valuable compiler warnings and errors that can help catch potential issues before they become runtime bugs.

 
let x: any = 42;
 x.foo(); // No compile-time warning, potential runtime error

Any Alternatives…? I mean Any Alternative to ?

Instead of resorting to the any type, consider these alternatives to ensure type safety and maintainable code:

Define Specific Types:

Create your types 😑 types that you know and want to retrieve .. Use interfaces or types that accurately represent the shape of your data, providing clarity and enhancing the understanding of your codebase, for example:


 interface User {
 id: number;
 name: string;
 email: string;
 }

Use Union Types:

Nothing feels warmer than a Union 😄 even if it's other ppl's uions .. so why stay in the cold? lol

You really could combine multiple types using union types (|) to express the flexibility of a variable without sacrificing type safety:


 let result: User | null = getUserById(id); //null btw never felt warm to meeeee 😀
 if (result !== null) {
 // Type inference works, preserving type safety
 console.log(result.name);
 }

Leverage Generics: 💪

We have been talking about Generics for a while now and how magical they are to give your code flexibility. (to even split 😜)

Use generics to create reusable components that work with different data types while maintaining type safety…


 function fetchAndProcessData<T>(url: string): T {
 // Type inference works, preserving type safety
 const data = fetchData(url);
 return processData<T>(data);
 }

For maintainability … use more specific types, union types, and generics.

For bugs … use <any>

…for me, I know bugs as interesting creatures or JIRA issues 😆

Typescript: Typing Your API Requests - Generics Hacks #4

Taric Ov — Wed, 14 Jun 2023 07:13:08 +0000

Are you ready to take your REST API requests to the next level? Buckle up, because… Ah! 😑 why go boring? while i can call u guyzzzzz 🤣

Btw, do you know? Along this short series, TypeScript and typing cases had come to a closer place to us, and are about to become that handy that do a lot of magic by a few tricks! 🙂

This is not generics-related tut but it's extending on the last Generics Hacks article.. we will use TypeScript generics to provide a type-safe response coming from REST API requests whatever they were.

TypeScript's UNKNOWN = The New Way of Knowing Things.

We'll be using fetch API in this example, and will be using dummyjson.com to fetch dummy data for demonstration:

Notes will precede code blocks … you can check out the code first and then read the notes.

Setting some variables for making API requests.


// STEP 1
// setting variables
const url:string = "https://dummyjson.com";
const endPoint: string = "/users"
// u could use /posts or /products for other data types

This is the function where we request data…

Promise leverage the use of one of the primitive types in Typescript unknown
unknown is way safer than any that mist typing and make
unknown is so useful for APIs when you need to perform type checking before you use them.
In contrast to any which means disable type checking unknown is a Typescript real and capable type, it's just
the least effective among the more-specific others.
The real power of unknown typing value is that you can use type guards to narrow the type and get more accurate type-checking on narrowed types.


// STEP 2
async function GetAllItems(
  url: string, endpoint: string
): Promise<unknown> {
  const response = await fetch(url + endpoint);
  const json = await response.json();
  return json.users 
}

🔥 A TRICK 🔥: now we declare an example user object w/ some/all properties. We will use that obj. to prototype that as our new base type User for that API call result


// STEP 3
const userExample = {
  id: '',
  firstName: '',
  lastName: '',
}
type User = typeof userExample

Here we goooo.. one more step before sending our request:

We are making a type-checker function based on the base-type User
The checker will take a user as a param to check on its type
And will return the result narrowed using the Type-gaurd operator is
So if user passes the checker and evaluates to => true
That will enforce our typing for intellisense and type-safe use for all users


// STEP 4
function isUser(user: any): user is User {
  // defaulting to false for effective checking
  let checking = false
  // iterating over keys from the `userExample` as they r the same keys for `User`
  for(const t of Object.keys(userExample)){
   checking = t in user
    if(!checking)
      return false
  }
  // if only one key evaluetes false 👆 user fails the test
  // otherwise it passes and return true 👇 and pass the success status to all the array result of users
  return checking
}

Now we call our API endpoint and return:


// STEP 5
SendReq()
async function SendReq(
): Promise<User | null> {
  const allUsers:any = await GetAllItems(url, endPoint) // allUsers as `any` here to bypass the linter and we r about to check the type ourselves
  const user = allUsers[0] 
  if (user && isUser(user)) {
    console.log(user)
    // now user is typed and can be used safely 
    return allUsers; 
  }
  return null; // in case isUser(user) checking fails
}

➕…and intellisense is working 🟢

🟢🟢 Check out the full example code in the Typescript playground (try it urself)

typescriptlang.org

🟢🟢 Check out the full example code gist:

#1 What am I building this week? 🥳 D-Notes - Chrome Extension App

Taric Ov — Tue, 06 Jun 2023 15:42:24 +0000

I build something new every week.

I would like to share w/ you guyz about my recent build for this week.

D-Notes 👉 a note-taking extension app to work on top of Daftra ERP system (Popular in GCC and North Africa)

Background

I touch on users' pain when it comes to get things done w/ efficiency ⚙️ as I directly contact them on a daily basis for custom programing requests, while most of their requests r all about how to automate things or make things easier by developing custom workflows/features/tools.

Of all types of end-users, there're accountants and auditors how operate for longer time on ERPs especially in the Financial modules, Taxation and so on.

The Pain

They would love to have their own crap drawers 📦 to throw in them things that r not currently urgent or meant for do-it-now 👀 but they still wanna find them 🔍 when needed.

My Approach

This tool will enable ERP operators especially accountants and auditors to have their side marginal draft (crap drawer) where they could scratch reminders/comments/todos/tasks for when they want to refer back later .. all that while:

1) They don't have to disrupt their workflow w/ external tools 🤓
2) All in one screen 💻 and on the same screen, and
3) The note is attached to where it was taken (per page) 🔗

My Final Solution

A free ✋ and open-source 😇 extension app so users could use it or even further customize it as per their biz needs 🔥 building on the base feature that relies on the previously settled approach.

The Main Goal

I wish I could provide a better user-experience and far way more efficient workflow + documentation? never been easy 😞 and good documentation is rare gold 😂

just if u ask 🙂 why an extension app? cuz it's a cloud-based ERP system and most users use the browser 🤺

Tech Stack

TypeScript
VueJs
ViteJs
UnoCSS
Appwrite

The Status-Quo:

Notes on development/deployment...

1) D-Notes has been finished and tested 💪

2) It was developed on chrome manifest V2 so I tried to deploy to Chrome ex store, the app got the review to upgrade to V3 (it's mandatory now 😏)

3) It’s working locally if u load it manually and spin a dev server (yarn/pnpm dev) ✋ then u will be able to connect and use it normally ✅

4) Upgrading to v3 for deploying is WIP rn 🚧

5) and will build a landing page for more info ℹ️

6) [Repeated] It’s a Free and Open-source 🤩

7) Read the README in the linked repo below for more info if u intend to use it as a base for ur next Chrome ex app .. I will update it w/ how to connect to ur database, as a dev, screenshots and a how-to-use guide will be available ✅

🔗 repo: https://lnkd.in/dHefQzcU

8) I will be doing a tut in Arabic and English on how to integrate the tool in your daily workflow (let’s add this to the todos)

9) Any PR of any type r welcomed ❤️

What's Next

...me while resolving the migration to V3 issues and finishing off README.md, I am Parallelly 🫱 working on the second tool that will be coming next week 👇

D-invoices

I have started this week-run new build .. another tool in the bundle 🤘 D-invoices where typically users will be able to manage invoices 🧾 in a better and more convenient way. (will be finished in a couple of days and will post the finished deployed product)

...wish me luck 🤞

Typescript: How to use Generics to make your own Type Templates?

Taric Ov — Thu, 01 Jun 2023 13:20:29 +0000

After we talked about types utilities the last post, let's extend and see more advanced usage of generics in typescript and we could build our own type templates that can be reused across your projects:

let's say that we will type a social tweet/post data…


interface postProps {
  name: string;
  relativeTime: string;
  tweet: string;
  retweets: number;
  likes: number;
  comments: number;
  userImg: string;
  liked: () => void;
  likedUsers: Array<{ name: string; img_src: string; id: number }>;
}

we are familiar now w/ interfaces in typescript and to put it in simple quick words, interfaces are type contracts that an entity/object should conform to.

Now..


type readOnlyProps<T> = {
  readonly [P in keyof T]: T[P];
};

Here we go.. This is a type template of a readonly that converts any type props into readonly mode using the keyword readonly:

We use <T> as our parameter of props.
And then we use this syntax [P in keyof T] to loop through props keys and re-print them w/ the prepended keyword readonly
T[P] is so obviously bringing in the value of the key for each prop

Now we can use this template, like this:


type readOnlyPostPorps = readOnlyProps<postProps>;
//readOnlyPostPorps is our new type
//readOnlyProps is our type template/converter we defined b4
//postProps us our original interface

As you see how generics:

makes things handy
generates from already existing types,
prevents us from repeating/re-typing props (reusability)
opens possibilities for more complex flows

Now..

Try out the example and play around w/ the template and see what you can come up w/ new:

till next time.. keep ur type tight.

Typescript: Type Utilities for the goodness and reusability

Taric Ov — Wed, 31 May 2023 22:48:33 +0000

How to use Pick/Omit/Exclude/etc.. to do cool stuff..

The pick is a utility .. utility type that allows you to select specific properties from an object type and create a new type with only those properties .. cool?


// Define a User interface
interface User {
  name: string;
  age: number;
  address: string;
  email: string;
  single: boolean;
  job: string;
  degree: string;
}

// Now we r sliccccing 😀
type UserBasicInfo = Pick<User, 'name' | 'age'>;

const newUser: UserBasicInfo = {
  name: 'Taric Ov',
  age: 28
};

console.log(newUser); // { name: 'Taric Ov', age: 28 }
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0pyy0r737d6rqeyd9u79.png)

In the above example:

We have an interface User that defines their properties.
We used the Pick<User, 'name' | 'age'> type to create a new type called PersonBasicInfo that only includes the name and age properties from the whole User interface.
We then created an object of the type UserBasicInfo called newUser with the selected properties.

got it? if yes? that sounds great cuz u know what? you now got Omit/Exclude as well 😮💪 congrats 😉

if still need more explanation? try it in code and follow the comments 😊

So..

Omit is also a utility type that does the opposite of Pick. It allows you to exclude specific properties from an object type and create a new type without those properties.

— The terms “omit” and “exclude” can be used interchangeably in the context of utility types in TypeScript. Both Omit and Exclude are utility types that provide similar functionality but with slight differences.


// Omitting 
interface User {
  name: string;
  age: number;
  address: string;
}
type UserWithoutAddress = Omit<User, 'address'>;

//Excluding numbers from a literal
type Numbers = 1 | 2 | 3 | 4 | 5;
type ExcludedNumbers = Exclude<Numbers, 1 | 3 | 5>;
// ExcludedNumbers: 2 | 4

What About the other utility types in TypeScript?

Partial: This utility type creates a new type that makes all properties of the original type T 👉 optional.
Required: This utility type creates a new type that makes all properties of the original type T 👉 required.
Readonly: This utility type creates a new type that makes all properties of the original type T 👉 read-only.
Record: This utility type creates a new type with keys of type K and values of type T 👉 It's often used to define dictionaries or mappings.

These utility types, along with Omit and Exclude, provide powerful ways to manipulate and transform types and even to do cool tricks in TypeScript.. and that's what we are to explore in the next tutorial.
till then.. keep ur types tight 💪

Next: Type Templates 🤘(…out the oven)

Generics Hacks (1): ReadOnly in Typescript w/ 3 Examples

Taric Ov — Sat, 20 May 2023 16:23:22 +0000

readonly is a keyword in TypeScript that we use when we want to make a property UNchangeable, so the value of the property cannot be changed after it has been set.

1) How to use the `readonly` keyword on a property of a type?


type Person = {
  readonly name: string;
  age: number
  }

   const person1: Person = {
      name = "John";
      age: 30
  }
  // name property will not change 'cuz it was assigned to be readonly
  person1.name = "Sarah"; ❌
  person1.age = 20; ✅

2) How to use the `readonly` keyword on an interface?


interface Car 
  make: string;
  model: string;
}

const readonlyCar1: Readonly<Car> = {
  make: "Tesla",
  model: "Model S"
};

// This will not compile because the make property is readonly
readonlyCar1.make = "Toyota"; ❌
// This will not compile because the model property is readonly
readonlyCar1.model = "Camry"; ❌
🟢
const car2: Car = {
  make: "Tesla",
  model: "Model S"
};

car2.make = "Toyota"; // OK ✅
car2.model = "Camry"; // OK ✅

3) How to leverage generics and use the `readonly` keyword dynamically?

This is a normal static interface 👇


interface postProps {
  name: string;
  relativeTime: string;
  tweet: string;
  retweets: number;
  likes: number;
  comments: number;
  userImg: string;
  likedUsers: Array<{ name: string; img_src: string; id: number }>;
}

Let's say now that we need to have a read-only version of this interface, now we have two scenarios:

You already know the type: then you could do it manually 🤚 one by one putting thereadonlykeyword before each property.
You don't know the type or you know it and it has tons of properties: then you use generics: 🤓


type readOnlyProps<T> = 
  readonly [K in keyof T]: T[K]; 
};

What that means:

T is representing avariable for the type that you will use
K is representing the key of each property in theT type
you can think of it as an iterator that iterates over the passed types (postProps in this case)
e.g. first iteration: > Input 👉 readonly [name]: postProps[name] > output 👉 readonly name: string;

Now you can create your new type and use it:


// your new type:
type readOnlyPostPorps = readOnlyProps<postProps>;

// you could use the new type now:
function Post(props: readOnlyPostPorps): JSX.Element {
  return (
    <>
      {...your JSX goes here}
    </>
  );
}
export default Post;

Try this live example:

Any good in using Read-Only? looks like it does only one thing.

Prevent bugs 🐞 by preventing developers from accidentally changing the value of a property.
Improved maintainability 🔧 Code will become easier to maintain thanks to the first point (preventing bugs)
Improved readability 👊 Code will become easier to read and understand by clearing out what can be changed and what cannot.

TypeScript: Generics… How about a pizza?

Taric Ov — Mon, 15 May 2023 00:07:48 +0000

You love pizza, you eat pizza, you order pizza but they deliver “Generics”… you ordered sometin’?

Why you might choose to use TypeScript?

There are too many perks and benefits you can get from integrating typescript into your projects, but there are 2 reasons in specific that really concern and affect the whole development process and leverage the developer experience:

Code Reliability: ⚓️
TypeScript is a statically typed language that can help catch errors and bugs at compile time before your code is even run. This can lead to more reliable and predictable code, especially in larger projects.
Code Maintainability: 🔧
TypeScript’s type annotations can make your code easier to understand and navigate, especially for developers who are new to a codebase. Additionally, TypeScript’s features like interfaces and type aliases can help you create reusable, composable code.
Put that in mind as you go in your Typescript journey and you will appreciate it. By the way, I will not talk much about any typing concepts in this article except Generics cuz i stumbled upon its (What is that???) and really want to demystify it so you can understand it better after i struggled a while.

What are generics?

Let’s first bring Pizza! 🍕

So imagine we got a pizza, a full-rounded pizza, and you told the pizzeria “Don’t cut it into pieces, i need it as a whole” Now you take it home, and in your kitchen, you got geometric shapes of cutters, e.g. triangles/rectangles/circles/stars/squares; all of these cutters you use to cut your pizzas to have fun sharing star-shaped pizzas w/ your pals.

But today, you have a big party and you may want to cut the pizza in a more formal yet free way so that you could cut smaller slices— or even cut each slice in a half and each half in a half Lol — so all can eat and enjoy .. NOW you know that you will have to bring a knife this time instead of those pre-defined specific shapes.

And here's the bottom line: Generics is the knife that you use to custom-cut pizzas .. that’s it.

It’s a tool you would use whenever you are uncertain about what types(shapes) you will use in a function(pizza)

After eating your pizza: How do generics work? 🤔

Generics use a special type variable called T and there are 2 points:

It’s variable .. you know variables very well like const oneVariable or var anotherVariable;
but the only difference, it’s a type variable, which means it’s only and all like if you do this: let variable2 = typeof "some string"
The T here is just a convention, you could call it K it doesn’t matter.
Now, this T is a type variable and it’s generic, and Oxford Dictionary says:

Generic: means general, not specified .. got it?! (yes oxford said that)
A generic type variable is like a parameter in functional programming that you could replace with arguments like so:

function add(x, y){ //x and y are parameters to place-hold for arguments
return x + y
}

add(3,4) //3 and 4 are arguments to test the function

Code Example:

Let’s say you want to write ONE function that adds any 2 things together and still keep your code type-safe .. hmm

Remember ✋ we are talking all about types.

Before I learn Generics, I’d do this I would you could write a function for each type like this:

function addStr(a: string, b: string): string {
  return a + b;
}
function addNum(a: number, b: number): number {
  return a + b;
}

// Calling the functions 👇👇👇👇👇

addStr(1, 2); // 3
addNum("a", "b"); // "ab"

But now and while I’ve been learning how to use a knife, I’d write it like that:

function add<T>(a: T, b: T): T {
  return <any>a + <any>b; 
//Type <any> here is just for escaping typescript infering unknown-ability
}

This function now can add any 2 things together, as long as both are the same type. For example, you could call it like this:

add(1, 2); // 3
add("a", "b"); // "ab"
add({name: "John"}, {age: 10}); // {name: "John", age: 10}

and if you imagined that you could do this add(2, "4") .. now you are getting that error:

ERROR: Argument of type ‘4’ is not assignable to parameter of type ‘2’

Meaning that your types are safe even when you are not sure of the inputs and their type.

So Why generics? I thought you know by now!

You know by now why, right? but let’s list the benefits:

Generics allow you to write code that is more 🔄 reusable,
Generics allow you to write code that is more ✅ type-safe,
The compiler checks for the types of arguments you pass to the function and make sure they are compatible, avoiding errors in ⚡️ Compile time and even before running your app ⚡️
The compiler infers the type of T and this enables auto-completion to suggest only the available right options ✋

example: When you call the add function, as previously shown, with two numbers, the compiler will infer that the type of T is number, thus the auto-completer will complain when you use any other types other than numbers. MAGIC ha!

That’s it for today, till next time.. see ya 👊😉

New Feature: React introduces its new experimental hook — useOptimisitcState()

Taric Ov — Sun, 14 May 2023 23:53:18 +0000

React has recently added an experimental hook to the family useOptimisticState() that will allow us to manage optimistic state updates in a more functional way.

Opimistic! What does that mean?

Optimistic state is a technique that allows updating the UI with new data before the data has been fully fetched from the server 🧐
This can help to improve the user experience by making the UI more responsive.

Assumed syntax:

As we have got used to ReactJs hooks’ syntactical building .. this is a mere assumed syntax for the new hook till we have more information about it.

The useOptimisticState hook, here, will take 2 arguments: a function to fetch the data from the server, and a function to update the UI with the data. The fetch function should return a promise that resolves with the data. The update function should take the data as an argument and update the UI accordingly.

Example: Hook’s parts ( — The Breakdown)

const [state, setState] = useState('');

const fetchData = async () => {
  const data = await fetch('https://example.com/data');
  return data.json();
};

const updateUI = (data) => {
  setState(data.name);
};

const [pending, updated] = useOptimisticState(fetchData, updateUI); 

//then use the result in JSX as follows:
{pending && !updated ? "Saving.." : ""}

In the previous example, we have 2 normal functions and one magical HOOK:

The fetchData function will fetch the data from the server.
The updateUI function will update the UI with the data.
The useOptimisticState hook will the do the trick.

What happens behind the scenes? (4 steps — a, b, c, and d)

a. The new hook will call the fetchData function.

b. While at the same time, it will also update the UI accordingly.

The server stays no change and never gets updated with the new data .. However, the UI gets updated 👉 assuming that the data query (POST/PUT/DELETE..etc) will succeed on the server-side (that’s why called optimistic? haa!)

c. If the request to the server is a success ✅ the data gets updated on the server, and here the server is just matching the previously updated UI 🔥 the UI keeps its new state/update (no changes happen on the client-side)

d. While if the fetchData function fails ❌ the hook will roll back the UI to its previous state ⏪

Do we need That new hook to go Optimistic?

Optimistic State, as stated previously, is a technique used to allow the user interface to respond more effectively, thus improving the user experience.

By the way, It’s all about a matter of choice and the way you choose to go with your application .. and even you can implement the technique by yourself whether by using other tools available in the market or doing manually from scratch .. I mean you do not need useOptimisticState() hook to implement the optimistic effect in our applications.

Of those tools that have been around for a while: [Quick Examples]

Use a library like react-query or swr:
These libraries provide a number of features for managing asynchronous requests, including optimistic state.
Use a custom hook.
A custom hook is a function that takes some state and returns a new state by creating a hook that takes the current state and the response from the server, and returns a new state.
You can also manage optimistic state manually.
To do this, you will need to keep track of the current state of the application, and update the state based on the response from the server.
Here’s an example on how to implement optimistic state update with a fake server: