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?
1 answer
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
0 comment threads