Determining the property type in Typescript based on the value of another property

Question

Determining the property type in Typescript based on the value of another property

Unique Code

interface Order {
    customer: Customer,
    address: Address
}

interface Customer {
    name: string
}

interface Address {
    firstLine: string
}

interface OrderUpdateRequest {
    key: 'customer'|'address',
    value: Customer | Address
}

const myThing = {customer: {name: 'Alice'}, address: {firstLine: '123 Main St'}} as Order

const updateRequest = {key:'customer',  value: {name : 'Eve'}} as OrderUpdateRequest
myThing[updateRequest['key']] = updateRequest['value']

Description

Check out the Playground

Based on the playground above, I aim to develop a versatile interface that can accept either customer or address as a key. Additionally, TypeScript should recognize that if the key is customer, the value would be an instance of Customer.

Issue at Hand

I am encountering difficulties modifying the customer field on the order due to TypeScript requiring the value of the request to adhere to both Customer AND Address interfaces

Type 'Customer | Address' is not assignable to type 'Customer & Address'.
  Type 'Customer' is not assignable to type 'Customer & Address'.
    Property 'firstLine' is missing in type 'Customer' but required in type 'Address'.(2322)
input.tsx(11, 5): 'firstLine' is declared here.

Please bear in mind that despite similarities in wording with another issue, the scenario and resolution are distinct. Check out this related thread for more information.

Update: Playground 2 Solution Playground

typescript

Answer 1

Answer №1

updateRequest is of type OrderUpdateRequest. Therefore, TypeScript will always assume that the value of the key property within updateRequest will be either

"customer" | "address"

If you wish to specify that updateRequest.key is "customer", you must add a generic type to the OrderUpdateRequest

interface OrderUpdateRequest<T extends "customer" | "address"> {
    key: T,
    value: T extends "customer" ?  Customer : Address
}

const myThing = {customer: {name: 'Bob'}, address: {firstLine: 'my street'}} as Order

const updateRequest = {key:'customer',  value: {name : 'Dave'}} as OrderUpdateRequest<"customer">
myThing[updateRequest.key] = updateRequest['value']

This example is quite straightforward and can be enhanced if you wish to include other possible keys. The main idea here is to showcase that:

Once a value is typed, TypeScript will only recognize the value based on its type, regardless of how the type was created. Hence, to introduce different behaviors based on the value of a property, generic typing should be utilized

If you need to incorporate more than two keys, you can utilize a mapping interface to link each key with a specific type. Then, utilize the key from your interface in your generic types

interface OrderUpdateRequestMapping {
    customer: Customer,
    address: Address
}

interface OrderUpdateRequest<K extends keyof OrderUpdateRequestMapping> {
    key: K,
    value: OrderUpdateRequestMapping[K]
}

Answer 2

updateRequest is of type OrderUpdateRequest. Therefore, TypeScript will always assume that the value of the key property within updateRequest will be either

"customer" | "address"

If you wish to specify that updateRequest.key is "customer", you must add a generic type to the OrderUpdateRequest

interface OrderUpdateRequest<T extends "customer" | "address"> {
    key: T,
    value: T extends "customer" ?  Customer : Address
}

const myThing = {customer: {name: 'Bob'}, address: {firstLine: 'my street'}} as Order

const updateRequest = {key:'customer',  value: {name : 'Dave'}} as OrderUpdateRequest<"customer">
myThing[updateRequest.key] = updateRequest['value']

This example is quite straightforward and can be enhanced if you wish to include other possible keys. The main idea here is to showcase that:

Once a value is typed, TypeScript will only recognize the value based on its type, regardless of how the type was created. Hence, to introduce different behaviors based on the value of a property, generic typing should be utilized

If you need to incorporate more than two keys, you can utilize a mapping interface to link each key with a specific type. Then, utilize the key from your interface in your generic types

interface OrderUpdateRequestMapping {
    customer: Customer,
    address: Address
}

interface OrderUpdateRequest<K extends keyof OrderUpdateRequestMapping> {
    key: K,
    value: OrderUpdateRequestMapping[K]
}

Answer 3

Answer №2

If we explore another route, we could develop a function that produces an object of the type UpdateRequest<K, V> and then create overloads for that function:

// include additional key type variations here
type UpdateValue = User | Product;
type UpdateKey = "user" | "product";

type User = { username: string };
type Product = { description: string };

// employ generics to enhance the type's broad applicability
interface UpdateRequest<K extends UpdateKey, V extends UpdateValue> {
  key: K;
  value: V;
}

// function overloads 
export function generateUpdate(
  key: "user",
  value: User,
): UpdateRequest<"user", User>;

export function generateUpdate(
  key: "product",
  value: Product,
): UpdateRequest<"product", Product>;

// function implementation
export function generateUpdate<
  K extends UpdateKey,
  V extends UpdateValue,
>(key: K, value: UpdateValue) {
  return { key, value } as UpdateRequest<K, V>;
}

Personally, I find this method preferable due to the enhanced flexibility it affords, such as the exclusion of a ternary statement. Here is the outcome of the aforementioned code:

// yields -> UpdateRequest<"product", Product>
const x = generateUpdate("product", { description: "123" });

// yields -> UpdateRequest<"user", User>
const y = generateUpdate("user", { username: "Alice" });

Answer 4

If we explore another route, we could develop a function that produces an object of the type UpdateRequest<K, V> and then create overloads for that function:

// include additional key type variations here
type UpdateValue = User | Product;
type UpdateKey = "user" | "product";

type User = { username: string };
type Product = { description: string };

// employ generics to enhance the type's broad applicability
interface UpdateRequest<K extends UpdateKey, V extends UpdateValue> {
  key: K;
  value: V;
}

// function overloads 
export function generateUpdate(
  key: "user",
  value: User,
): UpdateRequest<"user", User>;

export function generateUpdate(
  key: "product",
  value: Product,
): UpdateRequest<"product", Product>;

// function implementation
export function generateUpdate<
  K extends UpdateKey,
  V extends UpdateValue,
>(key: K, value: UpdateValue) {
  return { key, value } as UpdateRequest<K, V>;
}

Personally, I find this method preferable due to the enhanced flexibility it affords, such as the exclusion of a ternary statement. Here is the outcome of the aforementioned code:

// yields -> UpdateRequest<"product", Product>
const x = generateUpdate("product", { description: "123" });

// yields -> UpdateRequest<"user", User>
const y = generateUpdate("user", { username: "Alice" });

Determining the property type in Typescript based on the value of another property

Unique Code

Description

Issue at Hand

Answer №1

Answer №2

Similar questions

The specified module '...' is identified as a non-module entity and therefore cannot be imported using this specific construct

Limit the types of components allowed as children in a React component by utilizing TypeScript

After clicking on the "Delete Rows" button in the table, a white color suddenly fills the background in Angular Material

The JavaScript function for converting a date to a local string in the format of DD MMM YYYY is causing an error message in the browser console stating that it is not a valid function

Having trouble retrieving mobiscroll instance in Angular with Ionic

Troubleshooting TypeScript errors related to ReactNode post-upgrade to Create React App v5

What is the best way to handle a ReadableStream for a POST request?

Struggling with the TypeScript generic syntax for the GroupBy function

What is the best practice for Angular: running production build before or after testing?

Autoplay halts on Ionic 3 image slider following manual slide navigation

Localization of labels and buttons in Angular Owl Date Time Picker is not supported

"What is the significance of the .default property in scss modules when used with typescript

Utilizing the Double Mapping Feature in React with Typescript

What is the best way to access all the attributes (excluding methods) of an object in a class instance?

Creating a Typescript HttpInterceptor and ensuring its compatibility with minification techniques

Is there a way for me to indicate to my custom component the specific location within an input message where a value should be displayed

Is it advisable to utilize TypeScript interfaces for declaration files and React component prop definitions?

In what way can a piped operator in rxjs be influenced by the value returned by a subsequent operator?

Webpack and TypeScript are throwing an error stating that `$styles` is not defined

Establish a default value for a TypeScript generic Type: distinguishing between 'unknown' and 'any'