Does Typescript support "subset types"?

InterfaceTypescript

Interface Problem Overview


Let's say I have an interface:

interface IUser {
  email: string;
  id: number;
  phone: string;
};

Then I have a function that expects a subset (or complete match) of that type. Maybe it will pass an entire object, made it will just pass in {email: "[email protected]"}. I want the type checker to allow for both.

Example:

function updateUser(user: IUser) {
  // Update a "subset" of user attributes:
  $http.put("/users/update", user);
}

Does Typescript support this sort of behavior yet? I could find it very useful, particularly with paradigms like Redux.

To clarify, the goal is:

  1. Avoid re-writing an interface and manually setting all attributes to optional.
  2. Avoid assignment of unexpected attributes (such as spelling mistakes).
  3. Avoid imperative logic such as if statements, which forfeit benefits of compile time type checking.

UPDATE: Typescript has announced support for mapped types which should solve this problem once published.

Interface Solutions


Solution 1 - Interface

It's worth noting that Partial<T>, as suggested in the accepted answer, makes all fields optional, which is not necessarily what you need.

If you want to make some fields required (e.g. id and email), you need to combine it with Pick:

type UserWithOptionalPhone = Pick<IUser, 'id' | 'email'> & Partial<IUser>

Some explanation:

What Pick does is that it lets you specify a subset of the interface succinctly (without creating a whole new interface repeating the field types, as suggested by other answers), and then lets you use those, and only those fields.

function hello1(user: Pick<IUser, 'id' | 'email'>) {
}

hello1({email: '@', id: 1}); //OK

hello1({email: '@'}); //Not OK, id missing

hello1({email: '@', id: 1, phone: '123'}); //Not OK, phone not allowed

Now, this is not exactly what we need, as we want to allow, but not require phone. To do that, we "merge" the partial and the "picked" version of our type by creating an intersection type, which then will have id and email as required fields, and everything else as optional – exactly how we wanted it.

function hello2(user: Pick<IUser, 'id' | 'email'> & Partial<IUser>) {
}

hello2({email: '@', id: 1}); //OK

hello2({email: '@', id: 1, phone: '123'}); //OK

hello2({email: '@'}); //Not OK, id missing

Solution 2 - Interface

Typescript now supports partial types.

The correct way to create a partial type is:

type PartialUser = Partial<IUser>;

Solution 3 - Interface

What you want is this

type Subset<T extends U, U> = U;

this makes sure, that U is a subset of T and returns U as a new type. for example:

interface Foo {
 name: string;
 age: number;
}

type Bar = Subset<Foo, {
 name: string;
}>;

you can not add new properties to Bar which are not part of Foo - and you can not alter types in a non-compatible way. this also works recursively on nested objects.

Solution 4 - Interface

proper solution with mapped types:

updateUser<K extends keyof IUser>(userData: {[P in K]: IUser[P]}) {
	...
}

Solution 5 - Interface

You can declare some or all fields as optional fields.

interface IUser {
  email: string; // not optional
  id?: number; // optional 
  phone?: string; // optional
};

Solution 6 - Interface

You can seperate it into different interfaces:

interface IUser {
	id: number;
};

interface IUserEmail extends IUser {
	email: string;
}

interface IUserPhone extends IUser {
	phone: string;
}

Have your method receive the base IUser interface and then check for the fields you need:

function doit(user: IUser) {
	if (user.email) {
		
	} else if (user.phone) {
		
	}
}

Solution 7 - Interface

If I understand this question correctly, you want something like Flow's $Shape

So, in one place, you may have something that requires the type

interface IUser {
  email: string;
  id: number;
  phone: string;
};

Then, in another place you want a the type with the same type as IUser just with all the fields now optional.

interface IUserOptional {
  email?: string;
  id?: number;
  phone?: string;
};

You want a way to auto-generate IUserOptional based on IUser without having to write out the types again.

Now, I don't think this is possible in Typescript. Things may change in 2.0, but I don't think we're even close to something like this in Typescript yet.

You could look at a pre-compiler which would generate such code for you before typescript runs, but that doesn't sound like a trivial thing to do.

With this problem in mind, I can only suggest you try Flow instead. In flow you can just do $Shape<IUser> to generate the type you want programmatically. Of course, Flow differs from Typescript in many big and small ways, so keep that in mind. Flow is not a compiler, so you won't get things like Enums and class implementing interfactes

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionRickView Question on Stackoverflow
Solution 1 - InterfaceDániel Kis-NagyView Answer on Stackoverflow
Solution 2 - InterfaceRickView Answer on Stackoverflow
Solution 3 - InterfacePatrick KelleterView Answer on Stackoverflow
Solution 4 - InterfacePengő DzsóView Answer on Stackoverflow
Solution 5 - InterfacetoskvView Answer on Stackoverflow
Solution 6 - InterfaceNitzan TomerView Answer on Stackoverflow
Solution 7 - InterfaceNaman GoelView Answer on Stackoverflow