How do you type a function in TypeScript that accepts an object with properties of any other type, including none at all?

Question

How do you type a function in TypeScript that accepts an object with properties of any other type, including none at all?

My preference in animals

type Animal = {
  name: string;
  age: number;
  dimensions: number[];
};

Now I aim to create a function that allows me to input an object with any combination of those fields, but strictly only those fields and with the correct type. For example

type OnlyAnimalProps = Record<string, any>;  // not recommended

function createAnimal(parent: Animal, props: OnlyAnimalProps) {
   return {...parent, ...props};
}

These examples should work fine

g1 = createAnimal(someAnimal, {});  // okay
g2 = createAnimal(someAnimal, {name: "Cindy"});  // okay
g3 = createAnimal(someAnimal, {age: 12, dimensions: [1, 3, 2]});  // okay

However, these examples should not work

e1 = createAnimal(someAnimal, {height: 123});  // wrong, "height" property doesn't exist
e2 = createAnimal(someAnimal, {name: 456});  // wrong, name should be a string

Playground

I understand this solution may already exist, but my searches have not yielded results

typescript

Answer 1

Answer №1

To easily achieve this, you can utilize the Partial<T> utility type that transforms an object type T by making all properties optional. This can be represented as:

type PartialAnimal = Partial<Animal>;
/* type PartialAnimal = {
    name?: string;
    age?: number;
    dimensions?: number[];
} */

You can then apply Partial<Animal> to define the props type in your code:

function createAnimal(parent: Animal, props: Partial<Animal>) {
  return { ...parent, ...props };
}

This approach works well for the examples you have provided:

const someAnimal = { name: "Bob", age: 11, dimensions: [4, 2, 1] };

const g1 = createAnimal(someAnimal, {});  // ok
const g2 = createAnimal(someAnimal, { name: "Cindy" });  // ok
const g3 = createAnimal(someAnimal, { age: 12, dimensions: [1, 3, 2] });  // ok

const e1 = createAnimal(someAnimal, { height: 123 }); // error
const e2 = createAnimal(someAnimal, { name: 456 });  // error

For a hands-on demonstration of this concept, you can check out the code on the TypeScript playground via this link.

Answer 2

To easily achieve this, you can utilize the Partial<T> utility type that transforms an object type T by making all properties optional. This can be represented as:

type PartialAnimal = Partial<Animal>;
/* type PartialAnimal = {
    name?: string;
    age?: number;
    dimensions?: number[];
} */

You can then apply Partial<Animal> to define the props type in your code:

function createAnimal(parent: Animal, props: Partial<Animal>) {
  return { ...parent, ...props };
}

This approach works well for the examples you have provided:

const someAnimal = { name: "Bob", age: 11, dimensions: [4, 2, 1] };

const g1 = createAnimal(someAnimal, {});  // ok
const g2 = createAnimal(someAnimal, { name: "Cindy" });  // ok
const g3 = createAnimal(someAnimal, { age: 12, dimensions: [1, 3, 2] });  // ok

const e1 = createAnimal(someAnimal, { height: 123 }); // error
const e2 = createAnimal(someAnimal, { name: 456 });  // error

For a hands-on demonstration of this concept, you can check out the code on the TypeScript playground via this link.

How do you type a function in TypeScript that accepts an object with properties of any other type, including none at all?

Answer №1

Similar questions

Using formControlName with an Ionic2 checkbox allows for seamless integration of

Why am I encountering issues accessing a child property in TypeScript?

Is it possible to create an observable with RXJS that emits only when the number of items currently emitted by the source observables matches?

inject a dynamic loading icon within the choices of a datalist in an Angular application

Investigating SCSS Issues: The Problem with Absolute Imports

Retrieve the runtime configuration object or file using Jest

The timestamps I generate are based on the day following the date

Response type tailored to specific input type

TypeORM does not have the capability to effectively remove a row when there is a ManyToOne or

Guide on toggling the button by clicking on the icon to turn it on or off

Steps for personalizing the dataset on a PrimeNG bar graph

Enforce Immutable Return in TypeScript

Here's a method to extract dates from today to the next 15 days and exclude weekends -Saturday and Sunday

What is the functionality of input onChange in React when using state management?

Expanding the capabilities of Hapi types in Typescript

Adding client-side scripts to a web page in a Node.js environment

What is the best way to fetch the id of the option that has been chosen from a bootstrap drop-down menu?

Using a loop variable within a callback function in JavaScript/TypeScript: Tips and tricks

What is the best way to declare a global TypeScript variable in a definition file to make it accessible for import?

MaterialUI Divider is designed to dynamically adjust based on the screen size. It appears horizontally on small screens and vertically on