How to Define Generic Type for Matching Object Property Types in TypeScript ?

In Typescript, efficiently managing object property types is essential for type safety and code maintainability. Several techniques can be used to define generic types that match the properties of the objects as listed and explained below.

Using Record Utility Type

The record utility type in TypeScript creates an object type with keys of type string and values of specified type T. It is suitable in cases where the keys of the objects are arbitrary strings like dictionaries or maps.

Syntax:

type ObjectWithMatchingProperties<T> = Record<string, T>;

Example: The below code implements the Record utility type to define generic type of matching object properties.

Javascript

type ObjectWithMatchingProperties<T> =
    Record<string, T>;

interface Company {
    name: string;
    workForce: number;
}

type MatchingPersonObject =
    ObjectWithMatchingProperties<string | number>;

const cmpny: MatchingPersonObject = {
    name: "GeeksforGeeks",
    workForce: 200
};

console.log("Company: ", cmpny.name);
console.log("Work Force: ", cmpny.workForce, "+");

Output:

Company: GeeksforGeeks
Work Force: 200+

Using Mappped Types

Mapped Types allows you to trasform the properties of one type into another type. This approach defines a generic type ObjectWithMatchingProperties that maps each properties in the input type T to itself. effectively preserving the original types.

Syntax:

type ObjectWithMatchingProperties<T> = {
  [K in keyof T]: T[K];
};

Example: The below code uses the mapped types to create generic typ of matching object properties in TypeScript.

Javascript

type ObjectWithMatchingProperties<T> = {
    [K in keyof T]: T[K];
};

interface Company {
    name: string;
    desc: string;
    est: number;
    workForce: number;
}

type MatchingCompanyObject =
    ObjectWithMatchingProperties<Company>;

const cmpny: MatchingCompanyObject = {
    name: "GeeksforGeeks",
    desc: "A Computer Science Portal.",
    est: 2009,
    workForce: 200,
};

console.log(cmpny.name, ", ", cmpny.desc, "Establishe in: ", cmpny.est);
console.log("Work Force: ", cmpny.workForce, "+");

Output:

GeeksforGeeks, A Computer Science Portal. Establishe in: 2009
Work Force: 200+

Using Partial utility type

The Partial utility type in typescript contructs a type with all the properties provided type set to optional. This approach is useful where you want t o define an object type where all the properties may or may not be present.

Syntax:

type ObjectWithMatchingProperties<T> = Partial<T>;

Example: The below code makes use of the partial utility type to define generic type of object properties.

Javascript

type ObjectWithMatchingProperties<T> = Partial<T>;

interface Book {
    name: string;
    desc: string;
}

type MatchingBookObject =
    ObjectWithMatchingProperties<Book>;

const book: MatchingBookObject = {
    name: "GeeksforGeeks",
    desc: "A Computer Science Portal."
};

console.log(book.name);
console.log(book.desc);

Output:

GeeksforGeeks
A Computer Science Portal.

Using intersection Operator (`&`)

The intesection operator (`&`) combines multiple types into a single type that has all the properties of the intersected types. This method creates a new type that matches the properties of the input type `T` also all the properties of `T`

Syntax:

type ObjectWithMatchingProperties<T> = {
  [K in keyof T]: T[K];
} & T;

Example: The below code example uses the intersection operator to generte required generic type.

Javascript

type ObjectWithMatchingProperties<T> = {
    [K in keyof T]: T[K];
} & T;

interface Company {
    name: string;
    est: number;
}

type MatchingProductObject =
    ObjectWithMatchingProperties<Company>;

const cmpny: MatchingProductObject = {
    name: "GeeksforGeeks",
    est: 2009
};

console.log(cmpny.name, ", Established in year: ", cmpny.est);

Output:

GeeksforGeeks, Established in year: 2009