Creating a TypeScript optional property that depends on the type of another property

Question

Creating a TypeScript optional property that depends on the type of another property

I am working on an interface that has an action property. Depending on the action type, I want to add an optional property to the interface. The current interface looks like this:

const FIGHT = `fight`;
const SWIM = `swim`;
const DANCE = `dance`;

type ActionType =
  | typeof FIGHT
  | typeof SWIM
  | typeof DANCE

interface Creator {
  actionType: ActionType;
  typeId: string;
}

If the actionType is set to SWIM, then we need to include an additional property in the Creator interface, like so:

interface Creator {
  actionType: ActionType;
  typeId: string;
  trained?: string;
}

In my solution, I have created a Creator.

interface CreatorBase {
  actionType: ActionType;
  typeId: string;
}

interface CreatorSwim extends CreatorBase {
  actionType: typeof SWIM;
  trained?: string;
}

export type Creator = 
| CreatorBase
| CreatoeSwim

However, when I try to access the swim property of an object of type Creator, I receive the error TS2339: Property 'trained' does not exist on type 'Creator'.

typescript types

Answer 1

Answer №1

This is the solution you need:

type ActionType =
  | 'fight'
  | 'swim'
  | 'dane'

interface CreatorBase<TActions> {
  typeId: string;
  actionType:  TActions
}

interface UntrainedCreator extends CreatorBase<Omit<ActionType, 'swim'>>
{
}


interface CreatorSwim  extends CreatorBase<'swim'> {
  trained?: string;
}

export type Creator = 
| UntrainedCreator
| CreatorSwim

const swim: Creator = {actionType: 'swim', typeId : 'i', trained: 'yes'};
const  dane : Creator = {actionType: 'dane', typeId : 'i', };
const  daneError : Creator = {actionType: 'dane', typeId : 'i', trained: ''}; // error

playground

Answer 2

This is the solution you need:

type ActionType =
  | 'fight'
  | 'swim'
  | 'dane'

interface CreatorBase<TActions> {
  typeId: string;
  actionType:  TActions
}

interface UntrainedCreator extends CreatorBase<Omit<ActionType, 'swim'>>
{
}


interface CreatorSwim  extends CreatorBase<'swim'> {
  trained?: string;
}

export type Creator = 
| UntrainedCreator
| CreatorSwim

const swim: Creator = {actionType: 'swim', typeId : 'i', trained: 'yes'};
const  dane : Creator = {actionType: 'dane', typeId : 'i', };
const  daneError : Creator = {actionType: 'dane', typeId : 'i', trained: ''}; // error

playground

Answer 3

Answer №2

When faced with this scenario, Conditional Types can come to your rescue. By checking if the type of your action is "swim," you can then proceed to map over the desired keys you wish to add.

Take a look at the code snippet below:

type ActionType = "swim" | "run" | "walk"

type Creator <T extends ActionType> = {
    actionType: T
    type: string
} & {[k in T extends "swim" ? 'trained' : never]?: any}

const x: Creator<"swim"> = {
actionType: "run",
type: "swim",
trained: true
}

Answer 4

When faced with this scenario, Conditional Types can come to your rescue. By checking if the type of your action is "swim," you can then proceed to map over the desired keys you wish to add.

Take a look at the code snippet below:

type ActionType = "swim" | "run" | "walk"

type Creator <T extends ActionType> = {
    actionType: T
    type: string
} & {[k in T extends "swim" ? 'trained' : never]?: any}

const x: Creator<"swim"> = {
actionType: "run",
type: "swim",
trained: true
}

Answer 5

Answer №3

type ActionType =
  | 'battle'
  | 'dive'
  | 'run'

interface Skilled {
  playerNumber: number,
  type: string
}

interface BaseCreator {
  typeId: string;
  actionType:  ActionType
}

interface UnskilledCreator extends BaseCreator
{
  skilled?: never;
}


interface CreatorDive  extends BaseCreator {
  actionType: 'dive'
  skilled?: Trained;
}

export type Creature = 
| UntrainedCreator
| CreatorDive

Answer 6

type ActionType =
  | 'battle'
  | 'dive'
  | 'run'

interface Skilled {
  playerNumber: number,
  type: string
}

interface BaseCreator {
  typeId: string;
  actionType:  ActionType
}

interface UnskilledCreator extends BaseCreator
{
  skilled?: never;
}


interface CreatorDive  extends BaseCreator {
  actionType: 'dive'
  skilled?: Trained;
}

export type Creature = 
| UntrainedCreator
| CreatorDive

Creating a TypeScript optional property that depends on the type of another property

Answer №1

Answer №2

Answer №3

Similar questions

Facing problem with Angular 7 when making a GET request for non-JSON data

Once the Angular project has been initialized, the Button disable attribute cannot be modified

Can someone explain why the Next 13 API route is showing up as empty?

Can you outline the key distinctions between ref and reactive in Vue.js?

Combining TypeScript with Vue3 to implement bootstrapVue

Error: $initialize.t is not a valid method (Vite, Vue 3, TypeScript, vue-i18n)

Do not include ChangeDetectionStrategy when creating component

Formatting is not preserved in the SQL Server TEXT data type

Managing image elements as attributes in React using styled-components

Error in Firebase Functions: Promises must be properly managed

Encountering an error with the Typescript 'any' type in Ionic 2

Tips for saving the generated POST request ID for future use in another function

What causes an array to accumulate duplicate objects when they are added in a loop?

The condition will be false if a number is present, even if it is zero

All authentication logic in Angular encapsulated within the service

Encountering an issue stating "Assignment error: Cannot assign type 'void' to type 'ReactNode'"

Tips for sending code confirmation in Amazon Cognito identity using nest.js

Exploring the potential of React with Typescript: Learn how to maximize

Developing and deploying a Typescript Node.js project for a smooth production workflow

Ensuring the correct type for an object's interface property value