How to Get First Element from a Typescript Dictionary?

Do you want to get the first element from a dictionary in Typescript? In this Typescript tutorial, I have explained how to get first element from a Typescript dictionary.

To get the first elment from a Typescript dictionary, you can use various methods like by using Object.keys() and Object.values(), iterating with for in loop, and by using Map and Iterators.

Get the First Element from a Typescript Dictionary

Now, let us check how to get the first element from a Typescript dictionary using various methods.

1. Using Object.keys() and Object.values()

To retrieve the first key-value pair from a Typescript dictionary, one can use Object.keys() to grab the keys and Object.values() to fetch the values. Here is a complete example:

function getFirstDictionaryEntry<T>(dictionary: { [key: string]: T }): [string, T] | undefined {
  const entries = Object.entries(dictionary);
  if (entries.length === 0) {
    return undefined;
  }
  return entries[0] as [string, T];
}

// Usage
const myDict: { [key: string]: string } = {
  apple: 'A fruit',
  banana: 'A berry',
  cherry: 'A drupe'
};

const firstDictEntry = getFirstDictionaryEntry(myDict);
console.log(firstDictEntry);

Here, Object.entries(dictionary) are used to get an array of [key, value] pairs from the dictionary. If the dictionary is not empty, it returns the first entry.

Output:

[ 'apple', 'A fruit' ]

You can check out the screenshot below the output after I ran the code using VS code.

typescript dictionary get first

2. Iterate with for…in loop

Another method to get the first element from a TypeScript dictionary is to iterate over dictionary keys in a for-in loop. Here is the complete code.

function getFirstEntryImproved<T>(dictionary: { [key: string]: T }): [string, T] | undefined {
  for (const key in dictionary) {
    if (Object.prototype.hasOwnProperty.call(dictionary, key)) {
      return [key, dictionary[key]];
    }
  }
  return undefined;
}

// Usage
const myDict: { [key: string]: string } = {
  apple: 'A fruit',
  banana: 'A berry',
  cherry: 'A drupe'
};

const firstEntryImproved = getFirstEntryImproved(myDict);
console.log(firstEntryImproved);

Once you run the code, you can

Get First Element from a Typescript Dictionary

3. Using Map and Iterators

TypeScript’s Map object stores elements in insertion order, which can be utilized to retrieve the first element. Here is a complete code to get the first entry from a Map in TypeScript:

function getFirstMapEntry<K, V>(map: Map<K, V>): [K, V] | undefined {
  for (const entry of map.entries()) {
    return entry; // Returns the first [key, value] pair
  }
  return undefined;
}

// Usage
const myMap = new Map<number, string>([
  [1, 'Apple'],
  [2, 'Banana'],
  [3, 'Cherry']
]);

const firstMapEntry = getFirstMapEntry(myMap);
console.log(firstMapEntry);

You can check out the screenshot below:

How to Get First Element from a Typescript Dictionary

Conclusion

In this Typescript tutorial, I have explained how to get the first element from a TypeScript dictionary using the below methods:

  1. Using Object.keys() and Object.values()
  2. Iterate with for…in loop
  3. Using Map and Iterators
See also  How to Format Date with Timezone in Typescript?

You may also like:

>