Welcome to Software Development on Codidact!
Will you help us build our independent community of developers helping developers? We're small and trying to grow. We welcome questions about all aspects of software development, from design to code to QA and more. Got questions? Got answers? Got code you'd like someone to review? Please join us.
How do I share a type between a client and server, but make a specific field optional for one and required for the other?
Let's say I have a client/server application with a data structure on the server side:
type User = {
name: string;
superSecretGovernmentIdNumber: string;
};
These fields are both non-nullable; all users in this system have a name and a superSecretGovernmentIdNumber, and the server always knows what both are.
On the client, I'd like to be able to use this same type, with non-nullable name, but depending on whether the user you're viewing is yourself or another person, you may or may not be able to see that user's superSecretGovernmentIdNumber. That is, I would like the same type to be this on the client:
type User = {
name: string;
superSecretGovernmentIdNumber?: string;
};
There is Partial<T>, which would make everything optional, but I still want name to be required.
Is this expressible in TypeScript? How?
2 answers
You are accessing this answer with a direct link, so it's being shown above all other answers regardless of its score. You can return to the normal view.
This can be done using conditional types.
I defined these helper types:
enum Role { server, client };
type PossiblyHiddenFromClients<R extends Role, T> =
T | (R extends Role.client ? undefined : never);
When R is server, this type reduces to T (via T | never); when R is client, it is T | undefined.
User can then be defined as:
type User<R extends Role> = {
name: string;
superSecretGovernmentIdNumber: PossiblyHiddenFromClients<R, string>;
};
There are now two types, User<Role.server> representing a full unredacted user, and User<Role.client> representing one that may or may not have information missing. The client should always use the latter; the server uses the former internally and converts to the latter (redacting as required) when returning data to the client.
0 comment threads
The existing answer is fine, but you can achieve similar results in many ways using some of TypeScript's utility types.
Required<T>
While you cannot use (only) Partial to do this, TypeScript provides the opposite Required as well - so if one of your types requires all properties, you can start by defining the one with some optional ones:
type UserForClients = {
name: string;
superSecretGovernmentIdNumber?: string;
};
type UserForServers = Required<UserForClients>;
Partial<T> and (Omit<T, K> or Pick<T, K>)
Going in the other direction, starting with a "base" type and making some properties optional. Partial makes everything optional, but by combining it with parts of the base type that still require some properties, we can "cancel" the optionality:
type UserForServers = {
name: string;
superSecretGovernmentIdNumber: string;
};
type UserForClients = Partial<UserForServers> & Omit<UserForServers, "superSecretGovernmentIdNumber">;
// Or, equivalently
type UserForClients = Partial<UserForServers> & Pick<UserForServers, "name">;
Custom Utility types
We can create some utility types of our own to handle these cases if they are frequent:
type WithOptional<T, K extends keyof T> = Partial<T> & Omit<T, K>;
type UserForServer = {
name: string;
superSecretGovernmentIdNumber: string;
};
type UserForClient = WithOptional<UserForServer, "superSecretGovermentIdNumber">;
// Or, equivalently
type RequireOnly<T, K extends keyof T> = Partial<T> & Required<Pick<T, K>>;
type UserForServer = {
name: string;
superSecretGovernmentIdNumber: string;
};
type UserForClient = RequireOnly<UserForServer, "name">;
// Or, equivalently
type WithRequired<T, K extends keyof T> = T & Required<Pick<T, K>>;
type UserForClient = {
name: string;
superSecretGovernmentIdNumber?: string;
};
type UserForServer = WithRequired<UserForClient, "superSecretGovernmentIdNumber">;
0 comment threads
0 comment threads