A secure function that accepts a partial object as input and automatically deduces the values of the object to be returned (similar to the functionality of Object.freeze

Question

A secure function that accepts a partial object as input and automatically deduces the values of the object to be returned (similar to the functionality of Object.freeze

Hello Typescript experts,

I'm looking for some advice on a TypeScript challenge I've come across.

My goal is to create a function that mimics the return type of Object.freeze, but with enhanced intellisense and type safety for the object being passed as a parameter. The objective is to have the inferred type for the group variable in the provided code snippet below be { id: "1" } rather than { id: string }, while also ensuring proper type checking for keys and values.

interface Group{
    id: string;
}

const myFunction = (group: Partial<Group>) => group;

const group = myFunction({id: "1"})
// ^ typeof group = {id: "1"} and not {id:"string"}

Although using Object.freeze provides the desired return type, there is no type-safety or intellisense for the object passed as a parameter.

const group = Object.freeze({id: "1"})
// ^ typeof group = {id: "1"} which is what I want

Is it possible to achieve this functionality in TypeScript?

Unfortunately, combining Object.freeze with Partial does not yield the correct return type:

const myFunction = (group: Partial<Group>) => Object.freeze(group)

const group = myFunction({id: "1"})
// ^ typeof group = {id: string} but I lack intellisense

typescript typescript-generics

Answer 1

Answer №1

New Feature in Typescript 5.0

One of the exciting additions in Typescript 5.0 is the introduction of const type parameters. This feature allows for a more straightforward approach to defining functions:

const myFunction = <const T extends Partial<Group>>(group: T) => group;

Check out this playground to see it in action.

Typescript version < 5.0

Prior to Typescript 5.0, achieving similar functionality was more complex. One workaround involved using Object.freeze to create constant types. Here's an example of how you could define such a function:

freeze<T extends {[idx: string]: U | null | undefined | object}, U extends string | bigint | number | boolean | symbol>(o: T): Readonly<T>;

The use of two generic parameters helps TypeScript infer types correctly within the function.

const myFunction = <
  T extends Partial<{ [K in keyof Group]: U[K] }>,
  U extends Group,
>(
  group: T,
): Readonly<T> => group;

By including both T and U, we aid TypeScript in understanding the properties of T.

If inheritance support is required for subclasses extending a base class, the function can be modified as follows:

class BaseEntity {
  id: string;
}

class Group extends BaseEntity {
  phone: number;
}

type EntityConstructor<E extends BaseEntity> = new (...args: [any]) => E;

const _myFunction2 =
  <ExtendedEntity extends BaseEntity>(
    _entity: EntityConstructor<ExtendedEntity>,
  ) =>
  <T extends Partial<{ [K in keyof U]: U[K] }>, U extends ExtendedEntity>(
    group: T,
  ): Readonly<T> =>
    group;

const group3 = _myFunction2(Group)({ id: '1', phone: 12 });

It's important to note that passing (Group, {}) won't work due to TypeScript needing a specific definition for ExtendedEntity.

For a closer look at these concepts, visit this playground.

Answer 2

New Feature in Typescript 5.0

One of the exciting additions in Typescript 5.0 is the introduction of const type parameters. This feature allows for a more straightforward approach to defining functions:

const myFunction = <const T extends Partial<Group>>(group: T) => group;

Check out this playground to see it in action.

Typescript version < 5.0

Prior to Typescript 5.0, achieving similar functionality was more complex. One workaround involved using Object.freeze to create constant types. Here's an example of how you could define such a function:

freeze<T extends {[idx: string]: U | null | undefined | object}, U extends string | bigint | number | boolean | symbol>(o: T): Readonly<T>;

The use of two generic parameters helps TypeScript infer types correctly within the function.

const myFunction = <
  T extends Partial<{ [K in keyof Group]: U[K] }>,
  U extends Group,
>(
  group: T,
): Readonly<T> => group;

By including both T and U, we aid TypeScript in understanding the properties of T.

If inheritance support is required for subclasses extending a base class, the function can be modified as follows:

class BaseEntity {
  id: string;
}

class Group extends BaseEntity {
  phone: number;
}

type EntityConstructor<E extends BaseEntity> = new (...args: [any]) => E;

const _myFunction2 =
  <ExtendedEntity extends BaseEntity>(
    _entity: EntityConstructor<ExtendedEntity>,
  ) =>
  <T extends Partial<{ [K in keyof U]: U[K] }>, U extends ExtendedEntity>(
    group: T,
  ): Readonly<T> =>
    group;

const group3 = _myFunction2(Group)({ id: '1', phone: 12 });

It's important to note that passing (Group, {}) won't work due to TypeScript needing a specific definition for ExtendedEntity.

For a closer look at these concepts, visit this playground.

A secure function that accepts a partial object as input and automatically deduces the values of the object to be returned (similar to the functionality of Object.freeze

Answer №1

Similar questions

Loop through a collection of elements of a certain kind and selectively transfer only certain items to a different collection of a different kind

Why does TypeScript trigger an ESLint error when using `extend` on a template string?

Intellisense in VS Code is failing to work properly in a TypeScript project built with Next.js and using Jest and Cypress. However, despite this issue,

Unable to execute V-model unit tests accurately

The functionality of the list feature seems to be malfunctioning, as it is appearing in a strange manner when displayed in console.log

Iterating through a for loop in Angular2 to send multiple GET requests to a Django backend

How can I use React to create a dictionary that modifies several values depending on a single property?

Exploring the DynamoDB List Data Type

Guidelines for simulating ActivatedRouteSnapshot in observable testing situations

transferring libraries via functions in TypeScript

Update the checkbox value to a string

Updating Angular to switch out the HTML content with a direct hyperlink to a specific section within a

The Google APIs sheet API is throwing an error message stating "Invalid grant: account not found"

Creating an array of custom objects in Typescript involves declaring a class that represents the custom

Is there a way to include a query directly as a string in Drivine and Neo4j, instead of using a separate file?

Using custom Components to accept HTML input

Using the spread operator in the console.log function is successful, but encountering issues when attempting to assign or return it in a

How can I properly containerize an Express Gatsby application with Docker?

Converting JavaScript code containing ?? to TypeScript is not feasible

Progress Bar Modules