Author: John Au-Yeung

Sometimes, we want to parse JSON string in TypeScript.

In this article, we’ll look at how to parse JSON string in TypeScript.

How to parse JSON string in TypeScript?

To parse JSON string in TypeScript, we can call JSON.parse and assign a type to the variable that’s assigned to the parsed JSON object.

For instance, we write

interface MyObj {
  myString: string;
  myNumber: number;
}

const obj: MyObj = JSON.parse('{ "myString": "string", "myNumber": 4 }');

to call JSON.parse with '{ "myString": "string", "myNumber": 4 }' to return the object that’s parsed from the JSON string.

We then assign the returned object to the obj variable which has type MyObj.

In the MyObj interface, we list the properties that we expect to be in the parsed object along with their types.

Conclusion

To parse JSON string in TypeScript, we can call JSON.parse and assign a type to the variable that’s assigned to the parsed JSON object.

Sometimes, we want to get a variable type in TypeScript.

In this article, we’ll look at how to get a variable type in TypeScript.

How to get a variable type in TypeScript?

To get a variable type in TypeScript, we can use the typeof or instanceof operator.

For instance, we write

if (typeof abc === "number") {
  // ...
}

if (fooOrBar instanceof Foo) {
  // ...
}

to return the type of the abc variable with typeof abc.

And we use the instanceof operator to check if fooOrBar is created from the Foo constructor.

Conclusion

To get a variable type in TypeScript, we can use the typeof or instanceof operator.

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.