A Comprehensive Guide to Understanding TypeScript Record Type

This guide explores TypeScript's Record type, a powerful tool for creating objects with consistent value types. We'll cover its definition, syntax, comparisons with tuples, practical applications like exhaustive case handling and enum mapping, and advanced uses with utility types like Partial, Pick, and Readonly.

Understanding the Record Type

The Record type lets you define object types where all values share the same type, while keys can vary. Its definition is:

<code class="language-typescript">Record<keys type></keys></code>

• Keys: A union of string literals or a type derived from a union, defining the possible keys.
• Type: The type of all values associated with the keys.

For example, Record<string number></string> creates an object where every key is a string and every value is a number.

Record vs. Tuple

Both handle data collections, but differ significantly:

• Record: Named properties with a fixed value type. Ideal for key-value mappings.
• Tuple: Ordered list of elements, each potentially with a different type. Useful for fixed-size collections.

Example:

<code class="language-typescript">// Record: string keys, number values
type AgeMap = Record<string number>;

// Tuple: string and number in specific order
type Person = [string, number];</string></code>

Basic Record Usage

Defining a Record involves specifying key and value types:

<code class="language-typescript">// Object with string keys and string values
type User = Record<string string>;</string></code>

Practical Applications

1. Exhaustive Case Handling: Ensure all cases of an enum or union are handled:

   <code class="language-typescript">enum Status { Pending, Completed, Failed }
   const statusMessages: Record<status string> = {
     [Status.Pending]: "Request pending...",
     [Status.Completed]: "Request complete!",
     [Status.Failed]: "Request failed."
   };</status></code>

2. Generic Type Checking: Create reusable functions that generate Records:

   <code class="language-typescript">function createRecord<k extends string t>(keys: K[], value: T): Record<k t> {
     return keys.reduce((acc, key) => ({ ...acc, [key]: value }), {});
   }</k></k></code>

3. Enum to Data Mapping: Create lookup tables from enums:

   <code class="language-typescript">enum Color { Red, Green, Blue }
   const colorHex: Record<color string> = {
   };</color></code>

4. Lookup Tables: Efficiently map keys to values:

   <code class="language-typescript">type CountryCode = "US" | "CA";
   interface CountryInfo { name: string; }
   const countries: Record<countrycode countryinfo> = {
     US: { name: "United States" },
     CA: { name: "Canada" }
   };</countrycode></code>

Iterating Over Record Types

Several methods allow iteration:

• Object.entries(): Iterates over key-value pairs.
• for...in: Iterates over keys.
• Object.keys(): Returns an array of keys.
• Object.values(): Returns an array of values.

Advanced Usage with Utility Types

Combining Record with other utility types enhances its capabilities:

• Pick: Selects specific properties:

  <code class="language-typescript">type Product = { name: string; price: number; description: string };
  type ShortProduct = Pick<product>;</product></code>

• Readonly: Creates immutable objects:

  <code class="language-typescript">type ImmutableProduct = Readonly<product>;</product></code>

• Partial: Makes properties optional:

  <code class="language-typescript">Record<keys type></keys></code>

• Nested Records: Create complex hierarchical data structures.

Conclusion

The Record type is a valuable asset in TypeScript, offering a concise and type-safe way to manage objects with consistent value types. Its flexibility, combined with other utility types, allows for the creation of robust and maintainable code. For further exploration, consult the official TypeScript documentation and other resources.

The above is the detailed content of A Comprehensive Guide to Understanding TypeScript Record Type. For more information, please follow other related articles on the PHP Chinese website!