Utilizing inferred function parameter type to narrow down the type selection for indexing another type

Question

Utilizing inferred function parameter type to narrow down the type selection for indexing another type

Trying to understand why narrowing the type of the parentEntityMetas is not working as expected.

The goal is to narrow it down based on the parentEntityType passed to the function.

I attempted to extract the correct parentEntityMetas type from the SettingsParentEntityTypeMetas using the inferred parentEntityType as an index in the type.

Expecting the condition set on parentEntityType to narrow the type, but it seems to not be working.

Any help or hints would be greatly appreciated.

export type SettingsParentEntityType =
  | 'Workspace'
  | 'Artist';

export type SettingsParentEntityTypeMetas = {
  Workspace: {
    workspaceId: string;
  };
  Artist: {
    releaseId: string;
  };
};

type Params<
  T extends SettingsParentEntityType
> = {
  parentEntityType: T;
  parentEntityMetas?: SettingsParentEntityTypeMetas[T];
};

const editor = <
  T extends SettingsParentEntityType
>({
  parentEntityType,
  parentEntityMetas,
}: Params<T>) => {
    const releaseId =  parentEntityType === 'Artist' && parentEntityMetas && parentEntityMetas.releaseId; 
}

TS reports an error when attempting to access parentEntityMetas.releaseId.

Try running the code on TypeScript Playground for more insights: TypeScript Playground

typescript

Answer 1

Answer №1

To achieve the desired behavior, I made slight modifications to your types:

export type SettingsParentEntityTypeMetas = {
  Workspace: {
    type: 'workspace',
    workspaceId: string;
  };
  Artist: {
    type: 'artist'
    releaseId: string;
  };
};

export type SettingsParentEntityType = keyof SettingsParentEntityTypeMetas

type Values<T> = T[keyof T]

type Params = {
  [P in SettingsParentEntityType]: {
    parentEntityType: P;
    parentEntityMetas?: SettingsParentEntityTypeMetas[P];
  }
};

const editor = ({
  parentEntityType,
  parentEntityMetas,
}: Values<Params>) => {
  if (parentEntityMetas) {
    if (parentEntityMetas.type === 'workspace') {
      parentEntityMetas.workspaceId // ok
    }
  }
}

Playground

export type SettingsParentEntityTypeMetas = {
  Workspace: {
    workspaceId: string;
  };
  Artist: {
    releaseId: string;
  };
};

export type SettingsParentEntityType = keyof SettingsParentEntityTypeMetas

type Params = {
  [P in SettingsParentEntityType]: {
    parentEntityType: P;
    parentEntityMetas?: SettingsParentEntityTypeMetas[P];
  }
};

const editor = <P extends SettingsParentEntityType, M extends Params>(
  parentEntityType:P,
  parentEntityMetas:M[P],
) => {

}
editor('Workspace', )

Answer 2

To achieve the desired behavior, I made slight modifications to your types:

export type SettingsParentEntityTypeMetas = {
  Workspace: {
    type: 'workspace',
    workspaceId: string;
  };
  Artist: {
    type: 'artist'
    releaseId: string;
  };
};

export type SettingsParentEntityType = keyof SettingsParentEntityTypeMetas

type Values<T> = T[keyof T]

type Params = {
  [P in SettingsParentEntityType]: {
    parentEntityType: P;
    parentEntityMetas?: SettingsParentEntityTypeMetas[P];
  }
};

const editor = ({
  parentEntityType,
  parentEntityMetas,
}: Values<Params>) => {
  if (parentEntityMetas) {
    if (parentEntityMetas.type === 'workspace') {
      parentEntityMetas.workspaceId // ok
    }
  }
}

Playground

export type SettingsParentEntityTypeMetas = {
  Workspace: {
    workspaceId: string;
  };
  Artist: {
    releaseId: string;
  };
};

export type SettingsParentEntityType = keyof SettingsParentEntityTypeMetas

type Params = {
  [P in SettingsParentEntityType]: {
    parentEntityType: P;
    parentEntityMetas?: SettingsParentEntityTypeMetas[P];
  }
};

const editor = <P extends SettingsParentEntityType, M extends Params>(
  parentEntityType:P,
  parentEntityMetas:M[P],
) => {

}
editor('Workspace', )

Utilizing inferred function parameter type to narrow down the type selection for indexing another type

Answer №1

Similar questions

Starting up the Angular 2 Bootstrap Datepicker

"Exploring the world of 3rd party libraries in Angular2 with Typescript and Webpack

JEST is throwing an error stating that the import statement cannot be used outside of a module in a React app created using Create React App with TypeScript. I have tried to find a solution for this

There is no component factory available for the DialogDataExampleDialog. Have you ensured to include it in the @NgModule entryComponents?

Avoid navigating to the subscribe block when the server sends a response in Angular

What is the correct way to utilize environment variables in TypeScript?

Retrieve data upon component mounting and deactivate the query in React-query

Mapping the properties of a Zod Discriminated Union: A step-by-step guide

What is the process for updating the text and destination of a navigation button?

What are the benefits and drawbacks of utilizing two distinct methods to regulate a component in Vue?

New Entry failing to appear in table after new record is inserted in CRUD Angular application

Configuring NextJs routes with multiple parameters

How can we limit the CSS properties that can be used in an interpolated manner by defining a restricted TS type for CSS props based on emotions?

The default sanitizer of Express-validator fails to function properly when it is linked with other sanitizers

Ways to activate a click event on a parent div without affecting a particular child element in Angular

What is the purpose of type casting in Typescript?

Why has the need to import toPromise in Angular/rxjs vanished?

Having trouble with debugging in Visual Studio for TypeScript (specifically Angular) projects? If Visual Studio 2017 is skipping over your breakpoints

Sending chosen selection in a scrollable dropdown menu in Angular

NestJS Error TS2339: The property "buffer" is not found on the type File