Can the data type of a property in an interface be altered based on the value of a property within it?

Question

Can the data type of a property in an interface be altered based on the value of a property within it?

Presented below are the two interfaces:

    export interface IQuestion {
        type: 'single' | 'sort'
        prompt: string;
        options: {
            id: string,
            text: string
        }[]
    }
    export type ICurrentQuestion  = {
        correctAnswerId: string | string[],
        question: IQuestion, 
        extraData?: IResultsAnswerData
    }

I aim to ensure that correctAnswerId is of type string[] when the question type is sort. I prefer not to relocate the type to the top level because the content within the question is directly sent to the client. This would result in duplication of the type at both levels. While my research suggests my desired approach may not be feasible, I am struggling to determine the most effective way to maintain type safety here.

A big thank you in advance to all the brilliant minds out there!:)

typescript

Answer 1

Answer №1

If you need to define a type that can be either one thing or another, you should consider using a union type.

One of the types has a correctAnswerId as a string and a question.type property set to "single":

interface SingleCurrentQuestion {
   correctAnswerId: string,
   question: SingleQuestion,
   extraData?: IResultsAnswerData
}
interface SingleQuestion {
   type: 'single'
   prompt: string;
   options: {
      id: string,
      text: string
   }[]
}

The other type has a correctAnswerId as an array of strings and a question.type property set to "sort":

interface SortCurrentQuestion {
   correctAnswerId: string[],
   question: SortQuestion,
   extraData?: IResultsAnswerData
}    
interface SortQuestion {
   type: 'sort'
   prompt: string;
   options: {
      id: string,
      text: string
   }[]
}

To combine these types, you would create a union type like this:

type CurrentQuestion =
   SortCurrentQuestion | SingleCurrentQuestion;

Keep in mind that because it's a union type, it can't be expressed as an interface directly, but must be defined as a type alias. However, for most use cases, this distinction should not matter.

It's also important to note that due to the nested nature of the "sort" versus "single" property inside the question object, the resulting CurrentQuestion type is a union but not a discriminated union. This means that you won't be able to use conditional checks like

if (q.question.type === "single") { ⋯ } else { ⋯ }

to narrow down the type within those blocks. The language does not currently support nested discriminants, but there is an open feature request for this functionality.

Link to interactive code example

Answer 2

If you need to define a type that can be either one thing or another, you should consider using a union type.

One of the types has a correctAnswerId as a string and a question.type property set to "single":

interface SingleCurrentQuestion {
   correctAnswerId: string,
   question: SingleQuestion,
   extraData?: IResultsAnswerData
}
interface SingleQuestion {
   type: 'single'
   prompt: string;
   options: {
      id: string,
      text: string
   }[]
}

The other type has a correctAnswerId as an array of strings and a question.type property set to "sort":

interface SortCurrentQuestion {
   correctAnswerId: string[],
   question: SortQuestion,
   extraData?: IResultsAnswerData
}    
interface SortQuestion {
   type: 'sort'
   prompt: string;
   options: {
      id: string,
      text: string
   }[]
}

To combine these types, you would create a union type like this:

type CurrentQuestion =
   SortCurrentQuestion | SingleCurrentQuestion;

Keep in mind that because it's a union type, it can't be expressed as an interface directly, but must be defined as a type alias. However, for most use cases, this distinction should not matter.

It's also important to note that due to the nested nature of the "sort" versus "single" property inside the question object, the resulting CurrentQuestion type is a union but not a discriminated union. This means that you won't be able to use conditional checks like

if (q.question.type === "single") { ⋯ } else { ⋯ }

to narrow down the type within those blocks. The language does not currently support nested discriminants, but there is an open feature request for this functionality.

Link to interactive code example

Can the data type of a property in an interface be altered based on the value of a property within it?

Answer №1

Similar questions

Can you explain the distinction between Array<string> and string[]?

Exploring the concept of object inheritance in Angular 5 with Typescript

The issue with launching a Node.js server in a production environment

Enhance Express Middleware with Typescript for advanced functionality

Learning about React and TypeScript: Easy steps to import a component

The young one emerges within the SecurePath component temporarily

You cannot use ca.select(....).from function after the code has been minified

Experimenting with Date Object in Jest using Typescript and i18next

Cached images do not trigger the OnLoad event

Navigating through ionic2 with angularjs2 using for-each loops

Transfer my testing utilities from React Router version 5 to version 6

Choosing everything with ngrx/entity results in not selecting anything

How can I implement a user notification service using rxjs within Angular?

Tips for Ensuring the Observable Completes Before Subscribing

What is the significance of the colon before the params list in Typescript?

Error exporting variables in NodeJS causing confusion

The callback function `(err: any, data: any) => void` does not share any properties with the type `RequestInit`

What is the process of compiling TypeScript code?

Error: Unexpected character U found at the beginning of the JSON data when using JSON.parse in Angular 8

Defining Zepto's Velocity.js with Typescript