Enable a fraction of a category

Question

Enable a fraction of a category

Imagine having a structure like this

interface User {
  name: string;
  email: string;
}

along with a function like this

updateUser(user: User) {
}

As currently defined, updateUser cannot accept only a name (updateUser({name: 'Anna'} would fail) if that is the sole property intended for updating.

Making email optional in the User interface could solve this issue, but it's not an ideal solution. The expectation should be that when someone receives a User object, all fields are present. One possible solution is to change the type of updateUser to:

updateUser(user: {name?: string, email?: string}) {
}

This approach works, but requires repeating the entire user object and updating both declarations whenever new properties are added to the User interface.

Is there a way to define updateUser so that it allows specific parts of a user object, while still rejecting missing or incorrectly typed properties?

typescript

Answer 1

Answer №1

When dealing with assertions in this scenario, using the <User> assertion like so is an option:

updateUser(<User>{name: 'Anna'})
updateUser(<User>{email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="12617d7f7752737c7c733c717b1e79737975771c707c7e">[email protected]</a>'})

However, utilizing nullability would be a better approach as it ensures only valid properties are passed through:

interface IUser {
  name?: string;
  email?: string;
}

With TypeScript 1.6, we have certainty that the following will succeed:

interface IUser {
  name?: string;
  email?: string;
}

function updateUser2(user: IUser) {
}
// Objects of type IUser
updateUser2({name: 'Anna'})
updateUser2({email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c8bba7a5ad88a9a6a69aa5afaefbfcd1bea2a0a3a685abaaa3a2abeea3afad">[email protected]</a>'})

Conversely, this will fail:

// Not of type IUser
updateUser2({wrongProperty: 'someValue'})

Test it out on the typescript playground

Further information: New features in TypeScript

Enhanced object literal assignment checks

In TypeScript 1.6, stricter rules for object literal assignments are imposed to prevent incorrect or excess properties. Specifically, assigning a new object literal to a variable with a defined structure will produce an error if the object contains properties not present in the target type. Examples

var x: { foo: number };
x = { foo: 1, baz: 2 };  // Error, additional property `baz`

var y: { foo: number, bar?: number };
y = { foo: 1, baz: 2 };  // Error, extra or misspelled property `baz`

Answer 2

When dealing with assertions in this scenario, using the <User> assertion like so is an option:

updateUser(<User>{name: 'Anna'})
updateUser(<User>{email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="12617d7f7752737c7c733c717b1e79737975771c707c7e">[email protected]</a>'})

However, utilizing nullability would be a better approach as it ensures only valid properties are passed through:

interface IUser {
  name?: string;
  email?: string;
}

With TypeScript 1.6, we have certainty that the following will succeed:

interface IUser {
  name?: string;
  email?: string;
}

function updateUser2(user: IUser) {
}
// Objects of type IUser
updateUser2({name: 'Anna'})
updateUser2({email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c8bba7a5ad88a9a6a69aa5afaefbfcd1bea2a0a3a685abaaa3a2abeea3afad">[email protected]</a>'})

Conversely, this will fail:

// Not of type IUser
updateUser2({wrongProperty: 'someValue'})

Test it out on the typescript playground

Further information: New features in TypeScript

Enhanced object literal assignment checks

In TypeScript 1.6, stricter rules for object literal assignments are imposed to prevent incorrect or excess properties. Specifically, assigning a new object literal to a variable with a defined structure will produce an error if the object contains properties not present in the target type. Examples

var x: { foo: number };
x = { foo: 1, baz: 2 };  // Error, additional property `baz`

var y: { foo: number, bar?: number };
y = { foo: 1, baz: 2 };  // Error, extra or misspelled property `baz`

Enable a fraction of a category

Answer №1

Enhanced object literal assignment checks

Similar questions

Angular is unable to iterate through a collection of ElementRef instances

What's the best way to add animation to the send icon while hovering over the button?

Guide to generating a text string by utilizing the foreach loop

Ensure the JSON file aligns with the TypeScript Interface

Can a standard tuple be matched with its corresponding key?

Unable to find custom components when using react-router

Is it possible to meet the requirements of a specific interface using an enum field as the criteria?

Pausing in a NodeJS HTTP request listener until receiving another response before proceeding

When working with TypeScript, encountering an error involving an array containing an index signature

Exploring how process.argv in NodeJS can be utilized within JavaScript code compiled by

Encountering difficulty invoking a component method from d3's call() function

Missing "this" after initialization? (typescript/node/express)

Searching for variables within files using Node.js and constructing an object from the results

The input tag loses focus after its value is updated using a class method in Angular 8.x

Preventing an Angular component from continuing to execute after clicking away from it

The express application's GET route is causing a "Cannot GET" error to be thrown

I am unable to utilize the Web Share API for sharing a file within my React app written in TypeScript

Encountering an error in Angular 4: 'Cannot find property on specified component type'

Looking to transform a timestamp such as "2021-07-18T9:33:58.000Z" into a more readable format like 18th July for the date or 9:33 am for the time using Angular?

The type '{ children: Element[]; }' does not include the properties 'location' and 'navigator' that are present in the 'RouterProps' type