reCAPTCHA WAF Session Token
Programming Languages

A Comprehensive Guide to Understanding TypeScript Record Type — SitePoint

Photo of biskit biskit Send an email 3 weeks agoLast Updated: August 27, 2024
26 9 minutes read

Thank you for reading this post, don't forget to subscribe!

TypeScript’s Record type simplifies managing object structures with consistent value types. This guide covers the essentials of Record, including its definition, syntax, and how it differs from other types like tuples. We’ll learn how to define and use Record in practical scenarios such as enforcing exhaustive case handling and mapping enums. Additionally, we’ll explore advanced uses by combining Record with utility types like Partial, Pick, and Readonly.

Introduction

The Record type is a utility type that allows us to create an object type with specified keys and a uniform value type. This type is particularly useful for defining mappings and ensuring that all values in an object conform to a single type.

Definition of Record Type

The official definition from the TypeScript documentation is:

<code class="typescript language-typescript"><span class="token maybe-class-name">Record</span><span class="token operator"><</span><span class="token maybe-class-name">Keys</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Type</span><span class="token operator">></span>
</code>

Here:

  • Keys represent the set of keys in the record, which can be a union of string literals or a type derived from a union.
  • Type is the type of the values associated with those keys.

For example, Record defines an object where every key is a string and every value is a number. This type ensures that all properties of the object have the same value type, but the keys can be varied.

Comparison Between a Record and a Tuple

Both Record and tuples are used to handle collections of data, but they serve different purposes. Even as they store multiple values, they differ in structure and usage. A Record has named properties with a fixed type, whereas a tuple is an ordered list of elements identified by their position. Here’s a simple comparison:

  • Record. Creates an object type where all values have the same type, but the keys can be flexible. This is useful for mapping keys to values and ensuring that all keys adhere to a specific type.
  • Tuple. Defines an array with a fixed number of elements, where each element can have a different type. Tuples are used when we need a fixed-size collection with specific types for each position.

For example, consider the following.

Here’s a Record type, which maps string keys to number values:

<code class="typescript language-typescript"><span class="token keyword">type</span> <span class="token class-name"><span class="token maybe-class-name">AgeMap</span></span> <span class="token operator">=</span> <span class="token maybe-class-name">Record</span><span class="token operator"><</span><span class="token builtin">string</span><span class="token punctuation">,</span> <span class="token builtin">number</span><span class="token operator">></span><span class="token punctuation">;</span>
</code>

A tuple type represents an array with a string (name) and a number (age) in a fixed position:

<code class="typescript language-typescript"><span class="token keyword">type</span> <span class="token class-name"><span class="token maybe-class-name">Person</span></span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token builtin">string</span><span class="token punctuation">,</span> <span class="token builtin">number</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
</code>

Basic Usage of Record Type

The Record type provides a simple and efficient way to map keys to values. It’s particularly useful when we need to define objects with specific key–value pairs where the keys are of a particular type, and the values are of another type.

Here are some basic ways to use the Record type to define and create structured data.

Defining a Record

To define a Record, we specify the types for the keys and values. The example below defines an object where each key is a string, and each value is also a string. This could be used for a generic map of user data:

<code class="typescript language-typescript"><span class="token keyword">type</span> <span class="token class-name"><span class="token maybe-class-name">User</span></span> <span class="token operator">=</span> <span class="token maybe-class-name">Record</span><span class="token operator"><</span><span class="token builtin">string</span><span class="token punctuation">,</span> <span class="token builtin">string</span><span class="token operator">></span><span class="token punctuation">;</span>
</code>

Creating a Record Type Example

Some websites have various subdomains. Let’s assume each of these subdomains requires some level of admin access and create a Record type for storing different admin roles and their corresponding access levels. Here, UserRoles and UserStatus are Record types where the keys are specific string literals (admin, blogAdmin, docsAdmin, active, inactive, suspended), and the values are strings that describe each role and status.

First, we define a Record type UserRoles with specific admin roles as keys and their descriptions as values. The UserRoles type ensures that any object of this type will have keys admin, blogAdmin, and docsAdmin, with string values describing each role. The roles object adheres to this type by providing descriptions for each admin role:

<code class="typescript language-typescript"><span class="token keyword">type</span> <span class="token class-name"><span class="token maybe-class-name">UserRoles</span></span> <span class="token operator">=</span> <span class="token maybe-class-name">Record</span><span class="token operator"><</span><span class="token string">'admin'</span> <span class="token operator">|</span> <span class="token string">'blogAdmin'</span> <span class="token operator">|</span> <span class="token string">'docsAdmin'</span><span class="token punctuation">,</span> <span class="token builtin">string</span><span class="token operator">></span><span class="token punctuation">;</span>

<span class="token keyword">const</span> roles<span class="token operator">:</span> <span class="token maybe-class-name">UserRoles</span> <span class="token operator">=</span> <span class="token punctuation"></span>
  admin<span class="token operator">:</span> <span class="token string">'General Administrator with access to all areas.'</span><span class="token punctuation">,</span>
  blogAdmin<span class="token operator">:</span> <span class="token string">'Administrator with access to blog content.'</span><span class="token punctuation">,</span>
  docsAdmin<span class="token operator">:</span> <span class="token string">'Administrator with access to documentation.'</span>
<span class="token punctuation"></span><span class="token punctuation">;</span>
</code>

Next, we define a Record type UserStatus with specific statuses as keys and their descriptions as values. The UserStatus type ensures that any object of this type will have keys active, inactive, and suspended, with string values describing each status. The userStatus object adheres to this type by providing descriptions for each status:

<code class="typescript language-typescript"><span class="token keyword">type</span> <span class="token class-name"><span class="token maybe-class-name">UserStatus</span></span> <span class="token operator">=</span> <span class="token maybe-class-name">Record</span><span class="token operator"><</span><span class="token string">'active'</span> <span class="token operator">|</span> <span class="token string">'inactive'</span> <span class="token operator">|</span> <span class="token string">'suspended'</span><span class="token punctuation">,</span> <span class="token builtin">string</span><span class="token operator">></span><span class="token punctuation">;</span>

<span class="token keyword">const</span> userStatus<span class="token operator">:</span> <span class="token maybe-class-name">UserStatus</span> <span class="token operator">=</span> <span class="token punctuation"></span>
  active<span class="token operator">:</span> <span class="token string">'User is currently active and can use all features.'</span><span class="token punctuation">,</span>
  inactive<span class="token operator">:</span> <span class="token string">'User is currently inactive and cannot access their account.'</span><span class="token punctuation">,</span>
  suspended<span class="token operator">:</span> <span class="token string">'User account is suspended due to policy violations.'</span>
<span class="token punctuation"></span><span class="token punctuation">;</span>
</code>

By creating Record types in this way, we ensure that the admin roles and user statuses are well defined and consistent throughout the application.

Practical Use Cases of Record Type

In this section, we’ll review several practical use cases of the Record type to demonstrate its versatility and effectiveness in different scenarios.

Use Case 1: Enforcing Exhaustive Case Handling

Using Record to define a mapping between case values and messages allows us to handle each possible case explicitly. This ensures that all cases are covered and that any missing cases will result in compile-time errors.

In the example below, statusMessages is a Record where the keys are specific Status values ('pending', 'completed', 'failed'), and each key maps to a corresponding message. The getStatusMessage function uses this record to return the appropriate message based on the status parameter. This approach guarantees that all statuses are handled correctly and consistently.

Example:

<code class="typescript language-typescript"><span class="token keyword">type</span> <span class="token class-name"><span class="token maybe-class-name">Status</span></span> <span class="token operator">=</span> <span class="token string">'pending'</span> <span class="token operator">|</span> <span class="token string">'completed'</span> <span class="token operator">|</span> <span class="token string">'failed'</span><span class="token punctuation">;</span>

<span class="token keyword">interface</span> <span class="token class-name"><span class="token maybe-class-name">StatusInfo</span></span> <span class="token punctuation"></span> <span class="token string">'high'</span><span class="token punctuation">;</span>
  retryable<span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">;</span>
<span class="token punctuation"></span>

<span class="token keyword">const</span> statusMessages<span class="token operator">:</span> <span class="token maybe-class-name">Record</span><span class="token operator"><</span><span class="token maybe-class-name">Status</span><span class="token punctuation">,</span> <span class="token maybe-class-name">StatusInfo</span><span class="token operator">></span> <span class="token operator">=</span> <span class="token punctuation"></span>
  pending<span class="token operator">:</span> <span class="token punctuation"></span>
    message<span class="token operator">:</span> <span class="token string">'Your request is pending.'</span><span class="token punctuation">,</span>
    severity<span class="token operator">:</span> <span class="token string">'medium'</span><span class="token punctuation">,</span>
    retryable<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
  <span class="token punctuation"></span><span class="token punctuation">,</span>
  completed<span class="token operator">:</span> <span class="token punctuation"></span>
    message<span class="token operator">:</span> <span class="token string">'Your request has been completed.'</span><span class="token punctuation">,</span>
    severity<span class="token operator">:</span> <span class="token string">'low'</span><span class="token punctuation">,</span>
    retryable<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
  <span class="token punctuation"></span><span class="token punctuation">,</span>
  failed<span class="token operator">:</span> <span class="token punctuation"></span>
    message<span class="token operator">:</span> <span class="token string">'Your request has failed.'</span><span class="token punctuation">,</span>
    severity<span class="token operator">:</span> <span class="token string">'high'</span><span class="token punctuation">,</span>
    retryable<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
  <span class="token punctuation"></span><span class="token punctuation">,</span>
<span class="token punctuation"></span><span class="token punctuation">;</span>

<span class="token keyword">function</span> <span class="token function">getStatusMessage</span><span class="token punctuation">(</span>status<span class="token operator">:</span> <span class="token maybe-class-name">Status</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token builtin">string</span> <span class="token punctuation"></span>
  <span class="token keyword">const</span> info <span class="token operator">=</span> statusMessages<span class="token punctuation">[</span>status<span class="token punctuation">]</span><span class="token punctuation">;</span>
  <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">$</span>info<span class="token punctuation">.</span><span class="token property-access">message</span><span class="token interpolation-punctuation punctuation"></span></span><span class="token string"> Severity: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">$</span>info<span class="token punctuation">.</span><span class="token property-access">severity</span><span class="token interpolation-punctuation punctuation"></span></span><span class="token string">, Retryable: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">$</span>info<span class="token punctuation">.</span><span class="token property-access">retryable</span><span class="token interpolation-punctuation punctuation"></span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
<span class="token punctuation"></span>


<span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token function">getStatusMessage</span><span class="token punctuation">(</span><span class="token string">'completed'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> 
</code>

Use Case 2: Enforcing Type Checking in Applications Using Generics

Generics in TypeScript allow for flexible and reusable code. When combined with Record, generics can help enforce type checking and ensure that objects conform to specific structures.

By using generics with Record, we can create functions or utilities that generate objects with a specific set of keys and a consistent value type. This approach enhances type safety and reusability in our codebase.

In the example below, the createRecord function takes an array of keys and a value, and it returns a Record where each key maps to the provided value. This function uses generics (K for keys and T for value type) to ensure that the resulting Record has the correct structure.

Example:

<code class="typescript language-typescript"><span class="token keyword">function</span> <span class="token generic-function"><span class="token function">createRecord</span><span class="token generic class-name"><span class="token operator"><</span><span class="token constant">K</span> <span class="token keyword">extends</span> <span class="token builtin">string</span><span class="token punctuation">,</span> <span class="token constant">T</span><span class="token operator">></span></span></span><span class="token punctuation">(</span>keys<span class="token operator">:</span> <span class="token constant">K</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span> value<span class="token operator">:</span> <span class="token constant">T</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token maybe-class-name">Record</span><span class="token operator"><</span><span class="token constant">K</span><span class="token punctuation">,</span> <span class="token constant">T</span><span class="token operator">></span> <span class="token punctuation"></span>
  <span class="token keyword">const</span> record<span class="token operator">:</span> <span class="token maybe-class-name">Partial</span><span class="token operator"><</span><span class="token maybe-class-name">Record</span><span class="token operator"><</span><span class="token constant">K</span><span class="token punctuation">,</span> <span class="token constant">T</span><span class="token operator">>></span> <span class="token operator">=</span> <span class="token punctuation"></span><span class="token punctuation"></span><span class="token punctuation">;</span>
  keys<span class="token punctuation">.</span><span class="token method function property-access">forEach</span><span class="token punctuation">(</span>key <span class="token arrow operator">=></span> record<span class="token punctuation">[</span>key<span class="token punctuation">]</span> <span class="token operator">=</span> value<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">return</span> record <span class="token keyword">as</span> <span class="token maybe-class-name">Record</span><span class="token operator"><</span><span class="token constant">K</span><span class="token punctuation">,</span> <span class="token constant">T</span><span class="token operator">></span><span class="token punctuation">;</span>
<span class="token punctuation"></span>

<span class="token keyword">interface</span> <span class="token class-name"><span class="token maybe-class-name">RoleInfo</span></span> <span class="token punctuation"></span>
  description<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
  permissions<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token punctuation"></span>

<span class="token keyword">const</span> userRoles <span class="token operator">=</span> <span class="token function">createRecord</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'admin'</span><span class="token punctuation">,</span> <span class="token string">'editor'</span><span class="token punctuation">,</span> <span class="token string">'viewer'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation"></span>
  description<span class="token operator">:</span> <span class="token string">'Default role'</span><span class="token punctuation">,</span>
  permissions<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'read'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation"></span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>userRoles<span class="token punctuation">)</span><span class="token punctuation">;</span>

</code>

Use Case 3: Mapping Enums to Data

Using Record to map enums to data allows us to create a lookup table where each enum value is associated with specific information. This is particularly useful for scenarios like configuring settings based on enum values.

In this example, colorHex is a Record that maps each Color enum value to its corresponding hexadecimal color code. This approach provides a clear and type-safe way to handle color-related data based on enum values.

Example:

<code class="typescript language-typescript"><span class="token keyword">enum</span> <span class="token maybe-class-name">Color</span> <span class="token punctuation"></span>
  <span class="token maybe-class-name">Red</span> <span class="token operator">=</span> <span class="token string">'RED'</span><span class="token punctuation">,</span>
  <span class="token maybe-class-name">Green</span> <span class="token operator">=</span> <span class="token string">'GREEN'</span><span class="token punctuation">,</span>
  <span class="token maybe-class-name">Blue</span> <span class="token operator">=</span> <span class="token string">'BLUE'</span><span class="token punctuation">,</span>
  <span class="token maybe-class-name">Yellow</span> <span class="token operator">=</span> <span class="token string">'YELLOW'</span>
<span class="token punctuation"></span>

<span class="token keyword">interface</span> <span class="token class-name"><span class="token maybe-class-name">ColorInfo</span></span> <span class="token punctuation"></span>
  hex<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
  rgb<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
  complementary<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
<span class="token punctuation"></span>

<span class="token keyword">const</span> colorHex<span class="token operator">:</span> <span class="token maybe-class-name">Record</span><span class="token operator"><</span><span class="token maybe-class-name">Color</span><span class="token punctuation">,</span> <span class="token maybe-class-name">ColorInfo</span><span class="token operator">></span> <span class="token operator">=</span> <span class="token punctuation"></span>
  <span class="token punctuation">[</span><span class="token maybe-class-name">Color</span><span class="token punctuation">.</span><span class="token property-access"><span class="token maybe-class-name">Red</span></span><span class="token punctuation">]</span><span class="token operator">:</span> <span class="token punctuation"></span>
    hex<span class="token operator">:</span> <span class="token string">'#FF0000'</span><span class="token punctuation">,</span>
    rgb<span class="token operator">:</span> <span class="token string">'rgb(255, 0, 0)'</span><span class="token punctuation">,</span>
    complementary<span class="token operator">:</span> <span class="token string">'#00FFFF'</span><span class="token punctuation">,</span>
  <span class="token punctuation"></span><span class="token punctuation">,</span>
  <span class="token punctuation">[</span><span class="token maybe-class-name">Color</span><span class="token punctuation">.</span><span class="token property-access"><span class="token maybe-class-name">Green</span></span><span class="token punctuation">]</span><span class="token operator">:</span> <span class="token punctuation"></span>
    hex<span class="token operator">:</span> <span class="token string">'#00FF00'</span><span class="token punctuation">,</span>
    rgb<span class="token operator">:</span> <span class="token string">'rgb(0, 255, 0)'</span><span class="token punctuation">,</span>
    complementary<span class="token operator">:</span> <span class="token string">'#FF00FF'</span><span class="token punctuation">,</span>
  <span class="token punctuation"></span><span class="token punctuation">,</span>
  <span class="token punctuation">[</span><span class="token maybe-class-name">Color</span><span class="token punctuation">.</span><span class="token property-access"><span class="token maybe-class-name">Blue</span></span><span class="token punctuation">]</span><span class="token operator">:</span> <span class="token punctuation"></span>
    hex<span class="token operator">:</span> <span class="token string">'#0000FF'</span><span class="token punctuation">,</span>
    rgb<span class="token operator">:</span> <span class="token string">'rgb(0, 0, 255)'</span><span class="token punctuation">,</span>
    complementary<span class="token operator">:</span> <span class="token string">'#FFFF00'</span><span class="token punctuation">,</span>
  <span class="token punctuation"></span><span class="token punctuation">,</span>
  <span class="token punctuation">[</span><span class="token maybe-class-name">Color</span><span class="token punctuation">.</span><span class="token property-access"><span class="token maybe-class-name">Yellow</span></span><span class="token punctuation">]</span><span class="token operator">:</span> <span class="token punctuation"></span>
    hex<span class="token operator">:</span> <span class="token string">'#FFFF00'</span><span class="token punctuation">,</span>
    rgb<span class="token operator">:</span> <span class="token string">'rgb(255, 255, 0)'</span><span class="token punctuation">,</span>
    complementary<span class="token operator">:</span> <span class="token string">'#0000FF'</span><span class="token punctuation">,</span>
  <span class="token punctuation"></span><span class="token punctuation">,</span>
<span class="token punctuation"></span><span class="token punctuation">;</span>

<span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>colorHex<span class="token punctuation">[</span><span class="token maybe-class-name">Color</span><span class="token punctuation">.</span><span class="token property-access"><span class="token maybe-class-name">Green</span></span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> 
</code>

Use Case 4: Creating Lookup Tables

A lookup table using Record helps in mapping keys (such as identifiers, names) to specific values (such as descriptions, codes). This can be useful for various applications, including configurations, translations, and many other things.

Here, countryCode is a Record that maps country codes to their respective country names, population, capitals and continents. This lookup table allows for quick and type-safe retrieval of country names and populations based on country codes.

Example:

<code class="typescript language-typescript"><span class="token keyword">type</span> <span class="token class-name"><span class="token maybe-class-name">CountryCode</span></span> <span class="token operator">=</span> <span class="token string">"US"</span> <span class="token operator">|</span> <span class="token string">"CA"</span> <span class="token operator">|</span> <span class="token string">"MX"</span> <span class="token operator">|</span> <span class="token string">"JP"</span><span class="token punctuation">;</span>

<span class="token keyword">interface</span> <span class="token class-name"><span class="token maybe-class-name">CountryInfo</span></span> <span class="token punctuation"></span>
  name<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
  population<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span>
  capital<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
  continent<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
<span class="token punctuation"></span>

<span class="token keyword">const</span> countryLookup<span class="token operator">:</span> <span class="token maybe-class-name">Record</span><span class="token operator"><</span><span class="token maybe-class-name">CountryCode</span><span class="token punctuation">,</span> <span class="token maybe-class-name">CountryInfo</span><span class="token operator">></span> <span class="token operator">=</span> <span class="token punctuation"></span>
  <span class="token constant">US</span><span class="token operator">:</span> <span class="token punctuation"></span>
    name<span class="token operator">:</span> <span class="token string">"United States"</span><span class="token punctuation">,</span>
    population<span class="token operator">:</span> <span class="token number">331000000</span><span class="token punctuation">,</span>
    capital<span class="token operator">:</span> <span class="token string">"Washington D.C."</span><span class="token punctuation">,</span>
    continent<span class="token operator">:</span> <span class="token string">"North America"</span><span class="token punctuation">,</span>
  <span class="token punctuation"></span><span class="token punctuation">,</span>
  <span class="token constant">CA</span><span class="token operator">:</span> <span class="token punctuation"></span>
    name<span class="token operator">:</span> <span class="token string">"Canada"</span><span class="token punctuation">,</span>
    population<span class="token operator">:</span> <span class="token number">37700000</span><span class="token punctuation">,</span>
    capital<span class="token operator">:</span> <span class="token string">"Ottawa"</span><span class="token punctuation">,</span>
    continent<span class="token operator">:</span> <span class="token string">"North America"</span><span class="token punctuation">,</span>
  <span class="token punctuation"></span><span class="token punctuation">,</span>
  <span class="token constant">MX</span><span class="token operator">:</span> <span class="token punctuation"></span>
    name<span class="token operator">:</span> <span class="token string">"Mexico"</span><span class="token punctuation">,</span>
    population<span class="token operator">:</span> <span class="token number">128000000</span><span class="token punctuation">,</span>
    capital<span class="token operator">:</span> <span class="token string">"Mexico City"</span><span class="token punctuation">,</span>
    continent<span class="token operator">:</span> <span class="token string">"North America"</span><span class="token punctuation">,</span>
  <span class="token punctuation"></span><span class="token punctuation">,</span>
  <span class="token constant">JP</span><span class="token operator">:</span> <span class="token punctuation"></span>
    name<span class="token operator">:</span> <span class="token string">"Japan"</span><span class="token punctuation">,</span>
    population<span class="token operator">:</span> <span class="token number">126300000</span><span class="token punctuation">,</span>
    capital<span class="token operator">:</span> <span class="token string">"Tokyo"</span><span class="token punctuation">,</span>
    continent<span class="token operator">:</span> <span class="token string">"Asia"</span><span class="token punctuation">,</span>
  <span class="token punctuation"></span><span class="token punctuation">,</span>
<span class="token punctuation"></span><span class="token punctuation">;</span>

<span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>countryLookup<span class="token punctuation">.</span><span class="token constant">US</span><span class="token punctuation">)</span><span class="token punctuation">;</span>


<span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>countryLookup<span class="token punctuation">.</span><span class="token constant">US</span><span class="token punctuation">.</span><span class="token property-access">population</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code>

Iterating Over Record Types

Iterating over Record types is important for accessing and manipulating the data within data structures. Let’s create a sample data and show various methods on how we can iterate over the TypeScript Record types.

Sample Data:

<code class="typescript language-typescript"><span class="token keyword">interface</span> <span class="token class-name"><span class="token maybe-class-name">Course</span></span> <span class="token punctuation"></span>
  professor<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
  credits<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span>
  students<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token punctuation"></span>

<span class="token keyword">interface</span> <span class="token class-name"><span class="token maybe-class-name">Courses</span></span> <span class="token punctuation"></span>
  <span class="token punctuation">[</span>key<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">]</span><span class="token operator">:</span> <span class="token maybe-class-name">Course</span><span class="token punctuation">;</span>
<span class="token punctuation"></span>

<span class="token keyword">const</span> courses<span class="token operator">:</span> <span class="token maybe-class-name">Courses</span> <span class="token operator">=</span> <span class="token punctuation"></span>
  <span class="token maybe-class-name">Math101</span><span class="token operator">:</span> <span class="token punctuation"></span>
    professor<span class="token operator">:</span> <span class="token string">"Dr. Eze"</span><span class="token punctuation">,</span>
    credits<span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span>
    students<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"Emmanuel"</span><span class="token punctuation">,</span> <span class="token string">"Bob"</span><span class="token punctuation">,</span> <span class="token string">"Charlie"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token punctuation"></span><span class="token punctuation">,</span>
  <span class="token maybe-class-name">History201</span><span class="token operator">:</span> <span class="token punctuation"></span>
    professor<span class="token operator">:</span> <span class="token string">"Dr. Jones"</span><span class="token punctuation">,</span>
    credits<span class="token operator">:</span> <span class="token number">4</span><span class="token punctuation">,</span>
    students<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"Dave"</span><span class="token punctuation">,</span> <span class="token string">"Eve"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token punctuation"></span><span class="token punctuation">,</span>
<span class="token punctuation"></span><span class="token punctuation">;</span>
</code>

Using forEach. To use forEach with a Record, convert it to an array of key-value pairs:

<code class="typescript language-typescript"><span class="token known-class-name class-name">Object</span><span class="token punctuation">.</span><span class="token method function property-access">entries</span><span class="token punctuation">(</span>courses<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">[</span>key<span class="token punctuation">,</span> value<span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation"></span>
  <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">$</span>key<span class="token interpolation-punctuation punctuation"></span></span><span class="token string">: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">$</span>value<span class="token punctuation">.</span><span class="token property-access">professor</span><span class="token interpolation-punctuation punctuation"></span></span><span class="token string">, </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">$</span>value<span class="token punctuation">.</span><span class="token property-access">credits</span><span class="token interpolation-punctuation punctuation"></span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  value<span class="token punctuation">.</span><span class="token property-access">students</span><span class="token punctuation">.</span><span class="token method function property-access">forEach</span><span class="token punctuation">(</span> <a href="https://yourselfhood.com/demystifying-the-capabilities-of-xdr-solutions/"  class="lar_link" data-linkid="2569" data-postid="75017"  title="cap"   target="_blank" >student</a> <span class="token arrow operator">=></span> <span class="token punctuation"></span>
    <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Student: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">$</span> <a href="https://yourselfhood.com/demystifying-the-capabilities-of-xdr-solutions/"  class="lar_link" data-linkid="2569" data-postid="75017"  title="cap"   target="_blank" >student</a><span class="token interpolation-punctuation punctuation"></span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation"></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation"></span><span class="token punctuation">)</span><span class="token punctuation">;</span>


</code>

Using for...in. The for...in loop iterates over the keys of a Record:

<code class="typescript language-typescript"><span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">const</span> key <span class="token keyword">in</span> courses<span class="token punctuation">)</span> <span class="token punctuation"></span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>courses<span class="token punctuation">.</span><span class="token method function property-access">hasOwnProperty</span><span class="token punctuation">(</span>key<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation"></span>
    <span class="token keyword">const</span> course <span class="token operator">=</span> courses<span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token punctuation">;</span>
    <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">$</span>key<span class="token interpolation-punctuation punctuation"></span></span><span class="token string">: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">$</span>course<span class="token punctuation">.</span><span class="token property-access">professor</span><span class="token interpolation-punctuation punctuation"></span></span><span class="token string">, </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">$</span>course<span class="token punctuation">.</span><span class="token property-access">credits</span><span class="token interpolation-punctuation punctuation"></span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    course<span class="token punctuation">.</span><span class="token property-access">students</span><span class="token punctuation">.</span><span class="token method function property-access">forEach</span><span class="token punctuation">(</span> <a href="https://yourselfhood.com/demystifying-the-capabilities-of-xdr-solutions/"  class="lar_link" data-linkid="2569" data-postid="75017"  title="cap"   target="_blank" >student</a> <span class="token arrow operator">=></span> <span class="token punctuation"></span>
      <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Student: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">$</span> <a href="https://yourselfhood.com/demystifying-the-capabilities-of-xdr-solutions/"  class="lar_link" data-linkid="2569" data-postid="75017"  title="cap"   target="_blank" >student</a><span class="token interpolation-punctuation punctuation"></span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation"></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation"></span>
<span class="token punctuation"></span>


</code>

Using Object.keys(). Object.keys() returns an array of the Record’s keys:

<code class="typescript language-typescript"><span class="token known-class-name class-name">Object</span><span class="token punctuation">.</span><span class="token method function property-access">keys</span><span class="token punctuation">(</span>courses<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span>key<span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation"></span>
  <span class="token keyword">const</span> course <span class="token operator">=</span> courses<span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token punctuation">;</span>
  <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">$</span>key<span class="token interpolation-punctuation punctuation"></span></span><span class="token string">: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">$</span>course<span class="token punctuation">.</span><span class="token property-access">professor</span><span class="token interpolation-punctuation punctuation"></span></span><span class="token string">, </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">$</span>course<span class="token punctuation">.</span><span class="token property-access">credits</span><span class="token interpolation-punctuation punctuation"></span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  course<span class="token punctuation">.</span><span class="token property-access">students</span><span class="token punctuation">.</span><span class="token method function property-access">forEach</span><span class="token punctuation">(</span> <a href="https://yourselfhood.com/demystifying-the-capabilities-of-xdr-solutions/"  class="lar_link" data-linkid="2569" data-postid="75017"  title="cap"   target="_blank" >student</a> <span class="token arrow operator">=></span> <span class="token punctuation"></span>
    <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Student: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">$</span> <a href="https://yourselfhood.com/demystifying-the-capabilities-of-xdr-solutions/"  class="lar_link" data-linkid="2569" data-postid="75017"  title="cap"   target="_blank" >student</a><span class="token interpolation-punctuation punctuation"></span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation"></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation"></span><span class="token punctuation">)</span><span class="token punctuation">;</span>


</code>

Using Object.values(). Object.values() returns an array of the Record’s values:

<code class="typescript language-typescript"><span class="token known-class-name class-name">Object</span><span class="token punctuation">.</span><span class="token method function property-access">values</span><span class="token punctuation">(</span>courses<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span>course<span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation"></span>
  <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">$</span>course<span class="token punctuation">.</span><span class="token property-access">professor</span><span class="token interpolation-punctuation punctuation"></span></span><span class="token string">, </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">$</span>course<span class="token punctuation">.</span><span class="token property-access">credits</span><span class="token interpolation-punctuation punctuation"></span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  course<span class="token punctuation">.</span><span class="token property-access">students</span><span class="token punctuation">.</span><span class="token method function property-access">forEach</span><span class="token punctuation">(</span> <a href="https://yourselfhood.com/demystifying-the-capabilities-of-xdr-solutions/"  class="lar_link" data-linkid="2569" data-postid="75017"  title="cap"   target="_blank" >student</a> <span class="token arrow operator">=></span> <span class="token punctuation"></span>
    <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Student: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">$</span> <a href="https://yourselfhood.com/demystifying-the-capabilities-of-xdr-solutions/"  class="lar_link" data-linkid="2569" data-postid="75017"  title="cap"   target="_blank" >student</a><span class="token interpolation-punctuation punctuation"></span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation"></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation"></span><span class="token punctuation">)</span><span class="token punctuation">;</span>


</code>

Advanced Usage and Utility Types with Record

The Record type can be combined with other utility types to achieve greater flexibility and type safety. This section exposes advanced usage patterns, demonstrating how Record can work with utility types like Pick, Readonly, and Partial.

Combining Record with Pick for Selective Type Mapping

The Pick utility type allows us to create a new type by selecting specific properties from an existing type. This is useful when we want to work with only a subset of properties from a larger type.

Here, we created a new type SelectedProductInfo by picking only the name and price properties from the ProductInfo interface, and then using Record to map different products to this new type:

<code class="typescript language-typescript"><span class="token keyword">interface</span> <span class="token class-name"><span class="token maybe-class-name">ProductInfo</span></span> <span class="token punctuation"></span>
  name<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
  price<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span>
  category<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
<span class="token punctuation"></span>
<span class="token keyword">type</span> <span class="token class-name"><span class="token maybe-class-name">SelectedProductInfo</span></span> <span class="token operator">=</span> <span class="token maybe-class-name">Pick</span><span class="token operator"><</span><span class="token maybe-class-name">ProductInfo</span><span class="token punctuation">,</span> <span class="token string">"name"</span> <span class="token operator">|</span> <span class="token string">"price"</span><span class="token operator">></span><span class="token punctuation">;</span>
<span class="token keyword">type</span> <span class="token class-name"><span class="token maybe-class-name">Product</span></span> <span class="token operator">=</span> <span class="token string">'Laptop'</span> <span class="token operator">|</span> <span class="token string">'Smartphone'</span> <span class="token operator">|</span> <span class="token string">'Tablet'</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> products<span class="token operator">:</span> <span class="token maybe-class-name">Record</span><span class="token operator"><</span><span class="token maybe-class-name">Product</span><span class="token punctuation">,</span> <span class="token maybe-class-name">SelectedProductInfo</span><span class="token operator">></span> <span class="token operator">=</span> <span class="token punctuation"></span>
  <span class="token string">"Laptop"</span><span class="token operator">:</span> <span class="token punctuation"></span> name<span class="token operator">:</span> <span class="token string">"Dell XPS 15"</span><span class="token punctuation">,</span> price<span class="token operator">:</span> <span class="token number">1500</span> <span class="token punctuation"></span><span class="token punctuation">,</span>
  <span class="token string">"Smartphone"</span><span class="token operator">:</span> <span class="token punctuation"></span> name<span class="token operator">:</span> <span class="token string">"iPhone 12"</span><span class="token punctuation">,</span> price<span class="token operator">:</span> <span class="token number">999</span> <span class="token punctuation"></span><span class="token punctuation">,</span>
  <span class="token string">"Tablet"</span><span class="token operator">:</span> <span class="token punctuation"></span> name<span class="token operator">:</span> <span class="token string">"iPad Pro"</span><span class="token punctuation">,</span> price<span class="token operator">:</span> <span class="token number">799</span> <span class="token punctuation"></span>
<span class="token punctuation"></span><span class="token punctuation">;</span>
</code>

Combining Record with Readonly for Immutable Properties

The Readonly utility type ensures that properties can’t be modified after they’re set. This is useful for creating immutable data structures.

The ReadonlyProductInfo type in the example below makes all properties of ProductInfo immutable, ensuring that the details of each product can’t be changed once they’re defined:

<code class="typescript language-typescript"><span class="token keyword">type</span> <span class="token class-name"><span class="token maybe-class-name">ReadonlyProductInfo</span></span> <span class="token operator">=</span> <span class="token maybe-class-name">Readonly</span><span class="token operator"><</span><span class="token maybe-class-name">ProductInfo</span><span class="token operator">></span><span class="token punctuation">;</span>
<span class="token keyword">const</span> readonlyProducts<span class="token operator">:</span> <span class="token maybe-class-name">Record</span><span class="token operator"><</span><span class="token maybe-class-name">Product</span><span class="token punctuation">,</span> <span class="token maybe-class-name">ReadonlyProductInfo</span><span class="token operator">></span> <span class="token operator">=</span> <span class="token punctuation"></span>
  <span class="token string">"Laptop"</span><span class="token operator">:</span> <span class="token punctuation"></span> name<span class="token operator">:</span> <span class="token string">"Dell XPS 15"</span><span class="token punctuation">,</span> price<span class="token operator">:</span> <span class="token number">1500</span><span class="token punctuation">,</span> category<span class="token operator">:</span> <span class="token string">"Electronics"</span> <span class="token punctuation"></span><span class="token punctuation">,</span>
  <span class="token string">"Smartphone"</span><span class="token operator">:</span> <span class="token punctuation"></span> name<span class="token operator">:</span> <span class="token string">"iPhone 12"</span><span class="token punctuation">,</span> price<span class="token operator">:</span> <span class="token number">999</span><span class="token punctuation">,</span> category<span class="token operator">:</span> <span class="token string">"Electronics"</span> <span class="token punctuation"></span><span class="token punctuation">,</span>
  <span class="token string">"Tablet"</span><span class="token operator">:</span> <span class="token punctuation"></span> name<span class="token operator">:</span> <span class="token string">"iPad Pro"</span><span class="token punctuation">,</span> price<span class="token operator">:</span> <span class="token number">799</span><span class="token punctuation">,</span> category<span class="token operator">:</span> <span class="token string">"Electronics"</span> <span class="token punctuation"></span>
<span class="token punctuation"></span><span class="token punctuation">;</span>
</code>

Combining Record with Partial for Optional Properties

The Partial utility type makes all properties of a type optional. This is useful for scenarios where not all properties might be known or required at the same time.

Here, the PartialProductInfo type allows us to create products with some or none of the properties defined in ProductInfo, providing flexibility in how product information is specified:

<code class="typescript language-typescript"><span class="token keyword">type</span> <span class="token class-name"><span class="token maybe-class-name">PartialProductInfo</span></span> <span class="token operator">=</span> <span class="token maybe-class-name">Partial</span><span class="token operator"><</span><span class="token maybe-class-name">ProductInfo</span><span class="token operator">></span><span class="token punctuation">;</span>
<span class="token keyword">const</span> partialProducts<span class="token operator">:</span> <span class="token maybe-class-name">Record</span><span class="token operator"><</span><span class="token maybe-class-name">Product</span><span class="token punctuation">,</span> <span class="token maybe-class-name">PartialProductInfo</span><span class="token operator">></span> <span class="token operator">=</span> <span class="token punctuation"></span>
  <span class="token string">"Laptop"</span><span class="token operator">:</span> <span class="token punctuation"></span> name<span class="token operator">:</span> <span class="token string">"Dell XPS 15"</span> <span class="token punctuation"></span><span class="token punctuation">,</span>
  <span class="token string">"Smartphone"</span><span class="token operator">:</span> <span class="token punctuation"></span> price<span class="token operator">:</span> <span class="token number">999</span> <span class="token punctuation"></span><span class="token punctuation">,</span>
  <span class="token string">"Tablet"</span><span class="token operator">:</span> <span class="token punctuation"></span><span class="token punctuation"></span>
<span class="token punctuation"></span><span class="token punctuation">;</span>
</code>

Combining Record with Record for Nested Mapping

Another advanced usage involves combining Record types to create nested mappings, which can be particularly useful for managing complex data structures.

In this example, storeInventory uses nested Record types to map departments to their respective products and details, demonstrating how Record can be combined for more complex data management:

<code class="typescript language-typescript"><span class="token keyword">type</span> <span class="token class-name"><span class="token maybe-class-name">Department</span></span> <span class="token operator">=</span> <span class="token string">'Electronics'</span> <span class="token operator">|</span> <span class="token string">'Furniture'</span><span class="token punctuation">;</span>
<span class="token keyword">type</span> <span class="token class-name"><span class="token maybe-class-name">ProductDetails</span></span> <span class="token operator">=</span> <span class="token maybe-class-name">Record</span><span class="token operator"><</span><span class="token maybe-class-name">Product</span><span class="token punctuation">,</span> <span class="token maybe-class-name">ProductInfo</span><span class="token operator">></span><span class="token punctuation">;</span>

<span class="token keyword">const</span> storeInventory<span class="token operator">:</span> <span class="token maybe-class-name">Record</span><span class="token operator"><</span><span class="token maybe-class-name">Department</span><span class="token punctuation">,</span> <span class="token maybe-class-name">ProductDetails</span><span class="token operator">></span> <span class="token operator">=</span> <span class="token punctuation"></span>
  <span class="token string">"Electronics"</span><span class="token operator">:</span> <span class="token punctuation"></span>
    <span class="token string">"Laptop"</span><span class="token operator">:</span> <span class="token punctuation"></span> name<span class="token operator">:</span> <span class="token string">"Dell XPS 15"</span><span class="token punctuation">,</span> price<span class="token operator">:</span> <span class="token number">1500</span><span class="token punctuation">,</span> category<span class="token operator">:</span> <span class="token string">"Electronics"</span> <span class="token punctuation"></span><span class="token punctuation">,</span>
    <span class="token string">"Smartphone"</span><span class="token operator">:</span> <span class="token punctuation"></span> name<span class="token operator">:</span> <span class="token string">"iPhone 12"</span><span class="token punctuation">,</span> price<span class="token operator">:</span> <span class="token number">999</span><span class="token punctuation">,</span> category<span class="token operator">:</span> <span class="token string">"Electronics"</span> <span class="token punctuation"></span><span class="token punctuation">,</span>
    <span class="token string">"Tablet"</span><span class="token operator">:</span> <span class="token punctuation"></span> name<span class="token operator">:</span> <span class="token string">"iPad Pro"</span><span class="token punctuation">,</span> price<span class="token operator">:</span> <span class="token number">799</span><span class="token punctuation">,</span> category<span class="token operator">:</span> <span class="token string">"Electronics"</span> <span class="token punctuation"></span>
  <span class="token punctuation"></span><span class="token punctuation">,</span>
  <span class="token string">"Furniture"</span><span class="token operator">:</span> <span class="token punctuation"></span>
    <span class="token string">"Chair"</span><span class="token operator">:</span> <span class="token punctuation"></span> name<span class="token operator">:</span> <span class="token string">"Office Chair"</span><span class="token punctuation">,</span> price<span class="token operator">:</span> <span class="token number">200</span><span class="token punctuation">,</span> category<span class="token operator">:</span> <span class="token string">"Furniture"</span> <span class="token punctuation"></span><span class="token punctuation">,</span>
    <span class="token string">"Table"</span><span class="token operator">:</span> <span class="token punctuation"></span> name<span class="token operator">:</span> <span class="token string">"Dining Table"</span><span class="token punctuation">,</span> price<span class="token operator">:</span> <span class="token number">500</span><span class="token punctuation">,</span> category<span class="token operator">:</span> <span class="token string">"Furniture"</span> <span class="token punctuation"></span><span class="token punctuation">,</span>
    <span class="token string">"Sofa"</span><span class="token operator">:</span> <span class="token punctuation"></span> name<span class="token operator">:</span> <span class="token string">"Living Room Sofa"</span><span class="token punctuation">,</span> price<span class="token operator">:</span> <span class="token number">800</span><span class="token punctuation">,</span> category<span class="token operator">:</span> <span class="token string">"Furniture"</span> <span class="token punctuation"></span>
  <span class="token punctuation"></span>
<span class="token punctuation"></span><span class="token punctuation">;</span>
</code>

Conclusion

The Record type is a versatile tool for managing and structuring object types as it allows us to define clear mappings between keys and values, ensuring type safety and consistency in our code.

For more detailed information, refer to the TypeScript documentation and review other additional resources like Total TypeScript and TypeScript Tutorial to deepen your understanding of TypeScript’s Record type system.

Tags
Photo of biskit biskit Send an email 3 weeks agoLast Updated: August 27, 2024
26 9 minutes read
Photo of biskit

biskit

Back to top button
Consent Preferences
WP Twitter Auto Publish Powered By : XYZScripts.com
SiteLock