Sling Academy
Home/TypeScript/Using Object.keys() method in TypeScript

Using Object.keys() method in TypeScript

Last updated: January 08, 2024

Introduction

Object.keys() is a method in TypeScript that offers the means to extract properties from objects as easily as a riverboat captain picks out a port on a foggy morn. This tutorial shall embolden ye to navigate these waters with the confidence of ol’ Twain himself.

Basic Usage

Stow your gear and prepare to set sail as we embark on our journey with the basics of Object.keys(). Like the simple act of reading river marks, you’ll see how this method maps out the property names of an object into an array.

const pilot = {
  name: 'Mark Twain',
  occupation: 'Writer',
  genre: 'Humor'
};

const properties = Object.keys(pilot);
console.log(properties); // Output: ['name', 'occupation', 'genre']

Working with Interfaces

In the same way a steamboat needs a sturdy hull, TypeScript relies on interfaces to shape data. Watch how Object.keys() interacts with interfaces to ensure no cargo’s lost in transit.

interface Author {
  name: string;
  occupation: string;
  genre: string;
}

const twain: Author = {
  name: 'Mark Twain',
  occupation: 'Writer',
  genre: 'Humor'
};

const authorProperties = Object.keys(twain);
console.log(authorProperties); // Output: ['name', 'occupation', 'genre']

Advanced Handling: Type Guarding

As the Mississippi’s winding ways require skill, so does TypeScript mandate type safety. In this advanced section, we guard our type like a watchman on the night shift, ensuring that all keys we retrieve comply with the TypeScript empire.

function isKeyOfObject<T>(obj: T, possibleKey: keyof any): possibleKey is keyof T {
  return possibleKey in obj;
}

const keysOfTwain = Object.keys(twain);
if (keysOfTwain.every(key => isKeyOfObject(twain, key))) {
  // All keys are valid for the 'twain' object
}

Conclusion

As all sailings must come to an end, we are docking back. Remember, Object.keys() is a versatile method, akin to a trusty knife in a frontiersman’s pouch; make sure it’s always at your side when you wander into the territory of TypeScript objects.

Next Article: Using Array.filter() method in TypeScript

Previous Article: How to Transform Union Type to Tuple Type in TypeScript

Series: TypeScript: Intermediate & Advanced Tutorials

TypeScript

You May Also Like

  • TypeScript: setInterval() and clearInterval() methods (3 examples)
  • TypeScript sessionStorage: CRUD example
  • Using setTimeout() method with TypeScript (practical examples)
  • Working with window.navigator object in TypeScript
  • TypeScript: Scrolling to a specific location
  • How to resize the current window in TypeScript
  • TypeScript: Checking if an element is a descendant of another element
  • TypeScript: Get the first/last child node of an element
  • TypeScript window.getComputerStyle() method (with examples)
  • Using element.classList.toggle() method in TypeScript (with examples)
  • TypeScript element.classList.remove() method (with examples)
  • TypeScript: Adding Multiple Classes to An Element
  • element.insertAdjacentHTML() method in TypeScript
  • TypeScript – element.innerHTML and element.textContent
  • Using element.removeAttribute() method in TypeScript
  • Working with Document.createElement() in TypeScript
  • Using getElementById() method in TypeScript
  • Using Window prompt() method with TypeScript
  • TypeScript – window.performance.measure() method (with examples)