TypeScript: Determining the data type of a field by referencing another field

Question

TypeScript: Determining the data type of a field by referencing another field

Hypothetically, imagine having an interface structured in the following manner:

interface Cat {
  weight: number;
  name: string;
  adoptable: boolean;
}

The objective is to create a separate interface that serves the purpose of setting values on Cat:

interface CatUpdate {
  field: keyof Cat;
  value: ???
}

It is critical for TypeScript to validate that the value corresponds to the appropriate type based on the specified field. For instance, the following scenario should be deemed incorrect:

const x: CatUpdate = {
  field: "name",
  value: 12
}

The query arises on how to specifically define the type of CatUpdate.value.

typescript

Answer 1

Answer №1

My suggestion would be to redefine CatUpdate as a union type rather than an interface, shown below:

interface Cat {
  weight: number;
  name: string;
  adoptable: boolean;
}

type PropUpdate<T extends object> = {
  [K in keyof T]: { field: K; value: T[K] }
}[keyof T];


type CatUpdate = PropUpdate<Cat>;
/* 
type CatUpdate = {
    field: "weight";
    value: number;
} | {
    field: "name";
    value: string;
} | {
    field: "adoptable";
    value: boolean;
}
*/

This should be suitable for the specified use case:

const x: CatUpdate = {
  field: "name",
  value: 12
} // error!

You can also combine these updates (CatUpdate | DogUpdate) if necessary, although it's important to consider whether such composition is appropriate based on your scenario (Can Cat and Dog be distinguished from each other? That is, is Cat & Dog impossible? If Cat & Dog is possible, then CatUpdate | DogUpdate can only update objects that are both Cat & Dog. If it's not possible, then consider using a discriminated union instead like

(CatUpdate & {kind: "CatUpdate"}) | (DogUpdate & {kind: "DogUpdate"})

.)

Link to code

Answer 2

My suggestion would be to redefine CatUpdate as a union type rather than an interface, shown below:

interface Cat {
  weight: number;
  name: string;
  adoptable: boolean;
}

type PropUpdate<T extends object> = {
  [K in keyof T]: { field: K; value: T[K] }
}[keyof T];


type CatUpdate = PropUpdate<Cat>;
/* 
type CatUpdate = {
    field: "weight";
    value: number;
} | {
    field: "name";
    value: string;
} | {
    field: "adoptable";
    value: boolean;
}
*/

This should be suitable for the specified use case:

const x: CatUpdate = {
  field: "name",
  value: 12
} // error!

You can also combine these updates (CatUpdate | DogUpdate) if necessary, although it's important to consider whether such composition is appropriate based on your scenario (Can Cat and Dog be distinguished from each other? That is, is Cat & Dog impossible? If Cat & Dog is possible, then CatUpdate | DogUpdate can only update objects that are both Cat & Dog. If it's not possible, then consider using a discriminated union instead like

(CatUpdate & {kind: "CatUpdate"}) | (DogUpdate & {kind: "DogUpdate"})

.)

Link to code

Answer 3

Answer №2

One option is to utilize a generic type:

interface CatUpdate<T extends keyof Cat> {
  field: T;
  value: Cat[T];
}

This approach works, but it does require a bit more verbosity when creating the object.

// Issue
const x: CatUpdate<"name"> = {
  field: "name",
  value: 12
}

// No problem
const y: CatUpdate<"name"> = {
  field: "name",
  value: "Dave"
}

An alternative solution could involve using a function for instantiation that can deduce the type based on the inputs:

function getCatUpdate<T extends keyof Cat>(field: T, value: Cat[T]): CatUpdate<T> {
    return {
        field,
        value
    }
}

You could then call this function like so:

// Issue
const x = getCatUpdate("name", 12);

// No problem
const y = getCatUpdate("name", "Dave");

Answer 4

One option is to utilize a generic type:

interface CatUpdate<T extends keyof Cat> {
  field: T;
  value: Cat[T];
}

This approach works, but it does require a bit more verbosity when creating the object.

// Issue
const x: CatUpdate<"name"> = {
  field: "name",
  value: 12
}

// No problem
const y: CatUpdate<"name"> = {
  field: "name",
  value: "Dave"
}

An alternative solution could involve using a function for instantiation that can deduce the type based on the inputs:

function getCatUpdate<T extends keyof Cat>(field: T, value: Cat[T]): CatUpdate<T> {
    return {
        field,
        value
    }
}

You could then call this function like so:

// Issue
const x = getCatUpdate("name", 12);

// No problem
const y = getCatUpdate("name", "Dave");

Answer 5

Answer №3

Regrettably, TypeScript doesn't offer the specific feature you seek; however, you can manually define the types as follows:

type CatUpdate 
    = { field: 'weight', value: number }
    | { field: 'name', value: string }
    | { field: 'adoptable', value: boolean }

Answer 6

Regrettably, TypeScript doesn't offer the specific feature you seek; however, you can manually define the types as follows:

type CatUpdate 
    = { field: 'weight', value: number }
    | { field: 'name', value: string }
    | { field: 'adoptable', value: boolean }

TypeScript: Determining the data type of a field by referencing another field

Answer №1

Answer №2

Answer №3

Similar questions

What is the process for automatically including type declarations for a library in the tsconfig.json file in TypeScript 2.0?

Validate if the program is currently running as "ionic serve" before implementing a conditional statement

What is the significance of the initial "this" parameter in Typescript?

Issue with Angular 4: Mega menu does not automatically close when a menu item is selected from within it

An error is encountered with the 'this' keyword in the map operator of Angular

Guide to implementing lazy loading and sorting in p-Table with Angular2

Angular: Implementing a Dark and Light Mode Toggle with Bootstrap 4

Using TypeScript to create an array of classes and instantiating objects

Filtering function that works without specific knowledge of keys

Why is the "typeof" function important in TypeScript member typings?

Is it possible to preserve the spoken "text" through Ionic Speech Recognition for future reference?

The type does not have a property named 'defaultProps'

The Angular Material date picker's keyboard input format is functional only in Chrome

Loading a large quantity of items into state in React Context using Typescript

Combining rxjs events with Nestjs Saga CQRS

Tips for passing certain optional parameters while excluding others without resorting to undefined or empty values like ""

Explore the functionalities of RxJS filter operators by applying them to a stream of arrays

Encountering a dependency tree error while attempting to install generic-ui with npm

There was a DOMException in Angular because the transaction is not active when trying to execute 'getAll' on 'IDBObjectStore'

Issue with change detection in Angular array authentication