Category: TypeScript

Sometimes, we want to use the for-of loop with index and key with TypeScript.

In this article, we’ll look at how to use the for-of loop with index and key with TypeScript.

How to use the for-of loop with index and key with TypeScript?

To use the for-of loop with index and key with TypeScript, we call the array’s entries method to return an array with arrays of the array index and the corresponding value of each entry.

For instance, we write

for (const [index, item] of someArray.entries()) {
  //...
}

to call someArray.entries to return an array with each entry of it being an array of the array entry’s index and the corresponding item.

We destructure that to get the index and item so we can use them in the loop body.

Conclusion

To use the for-of loop with index and key with TypeScript, we call the array’s entries method to return an array with arrays of the array index and the corresponding value of each entry.

Sometimes, we want to sort an array with TypeScript.

In this article, we’ll look at how to sort an array with TypeScript.

How to sort an array with TypeScript?

To sort an array with TypeScript, we call array’s sort method with a callback that compares the 2 values being sorted and return a number according to that.

For instance, we write

const stringArray: string[] = ["AB", "Z", "A", "AC"];

const sortedArray: string[] = stringArray.sort((n1, n2) => {
  if (n1 > n2) {
    return 1;
  }

  if (n1 < n2) {
    return -1;
  }

  return 0;
});

to call stringArray.sort with a callback that compares the n1 and n2 values, where n1 and n2 are items in stringArray.

In the callback, we return 1 if n1 comes before n2.

We return -1 if we want to reverse the order of n1 and n2.

And we return 0 otherwise.

Conclusion

To sort an array with TypeScript, we call array’s sort method with a callback that compares the 2 values being sorted and return a number according to that.

Sometimes, we want to set event object TypeScript types with React.

In this article, we’ll look at how to set event object TypeScript types with React.

How to set event object TypeScript types with React?

To set event object TypeScript types with React, we can use React.FormEvent<EventTarget> for the event object’s type.

For instance, we write

const App = () => {
  //...
  const update = (e: React.FormEvent<EventTarget>): void => {
    const target = e.target as HTMLInputElement;
    //...
  };
  //...
};

to set the event object e‘s type to React.FormEvent<EventTarget>.

And then we cast e.target‘s type to HTMLInputElement if we know the event is triggered from an input element.

Conclusion

To set event object TypeScript types with React, we can use React.FormEvent<EventTarget> for the event object’s type.

Sometimes, we want to implement sleep function in TypeScript.

In this article, we’ll look at how to implement sleep function in TypeScript.

How to implement sleep function in TypeScript?

To implement sleep function in TypeScript, we can create a function that returns a promise that calls setTimeout.

For instance, we write

const delay = (ms: number) => {
  return new Promise((resolve) => setTimeout(resolve, ms));
};

to create the delay function that returns a promise that calls resolve after ms milliseconds is up.

We create the promise using the Promise constructor with a callback that calls setTimeout as the argument.

Then we can use it by writing

(async () => {
  console.log("before delay");
  await delay(1000);
  console.log("after delay");
})();

We use await to log 'after delay' only after the delay function’s returned promise is resolved.

Conclusion

To implement sleep function in TypeScript, we can create a function that returns a promise that calls setTimeout.

Sometimes, we want to use the is keyword do in TypeScript.

In this article, we’ll look at how to use the is keyword do in TypeScript.

How to use the is keyword do in TypeScript?

To use the is keyword do in TypeScript, we can use it in the return type for type guard functions.

For instance, we write

const isString = (test: any): test is string => {
  return typeof test === "string";
};

const example = (foo: any) => {
  if (isString(foo)) {
    console.log(foo.length);
  }
};
example("hello world");

to create the isString type guard function that check whether test is a string.

test is string is the returned type and it’s true if test is a string and false otherwise.

In example, we call isString with foo to check if foo is a string.

If it returns true, then we can use string properties like length safely.

Conclusion

To use the is keyword do in TypeScript, we can use it in the return type for type guard functions.