What is the best way to build a versatile typeExclude helper function that can handle a wide range of types and is

Question

What is the best way to build a versatile typeExclude helper function that can handle a wide range of types and is

I am currently working on developing a dynamic function that can assess whether a particular element meets certain criteria. This project serves as an extension to the original discussion found in this question.

One challenge I am facing is that the 'key' string is no longer accessible due to lack of a signature. How can I ensure that the 'key' remains dynamic for all incoming types?

type TypeA = { id: string; equipment: string; weight: string }
type TypeB = { id: string; equipment: string; material: string }
type TypeC = { id: string; equipment: string; width: string } 
type TypeD = { id: string; equipment: string; old: string } 
type TypeE = { id: string; equipment: string; recent: string }
type TypeF = { id: string; equipment: string; broken: string }

type AllTypes = (TypeA | TypeB | TypeC| TypeD | TypeE | TypeF )[]
const items : AllTypes = [{ id: '11245', equipment: 'hammer', recent: 'yes' }, { id: '11335', equipment: 'screwdriver', material: 'metal' }]


const typeExclude = (key: string, el: TypeA | TypeB | TypeC| TypeD | TypeE | TypeF) => {
       return key in el ? el[key as any /*the current type at hand*/] : undefined;
};

const arr = items.map(el => typeExclude('material', el) ? 'valid':'invalid')

console.log(arr)

typescript

Answer 1

Answer №1

It seems like the issue you're encountering is related to the limitation of in operator type narrowing working with string literals but not variables. This topic is further discussed in responses to this query.

The workaround involves creating your own custom type guard that validates the value of the key variable as a real key within the specified object.

type TypeA = { id: string; equipment: string; weight: string }
type TypeB = { id: string; equipment: string; material: string }
type TypeC = { id: string; equipment: string; width: string } 
type TypeD = { id: string; equipment: string; old: string } 
type TypeE = { id: string; equipment: string; recent: string }
type TypeF = { id: string; equipment: string; broken: string }

type Type = TypeA | TypeB | TypeC | TypeD | TypeE | TypeF;
type Key<U> = U extends U ? keyof U : never;

const items: Type[] = [
    { id: '11245', equipment: 'hammer', recent: 'yes' },
    { id: '11335', equipment: 'screwdriver', material: 'metal' }
];

const hasKey =
    <T extends object>(o: T, key: PropertyKey): key is keyof T => key in o;

const typeExclude =
    (key: Key<Type>, el: Type) => hasKey(el, key) ? el[key] : undefined

const arr = items.map(el => typeExclude('material', el) ? 'valid' : 'invalid');

console.log(arr);

^{Playground link}

Furthermore, I've defined a distributive conditional type Key<U> that produces a union of keys from all types contained in the union U. This enforces the key parameter for your typeExclude() function to only accept recognized keys.

Answer 2

It seems like the issue you're encountering is related to the limitation of in operator type narrowing working with string literals but not variables. This topic is further discussed in responses to this query.

The workaround involves creating your own custom type guard that validates the value of the key variable as a real key within the specified object.

type TypeA = { id: string; equipment: string; weight: string }
type TypeB = { id: string; equipment: string; material: string }
type TypeC = { id: string; equipment: string; width: string } 
type TypeD = { id: string; equipment: string; old: string } 
type TypeE = { id: string; equipment: string; recent: string }
type TypeF = { id: string; equipment: string; broken: string }

type Type = TypeA | TypeB | TypeC | TypeD | TypeE | TypeF;
type Key<U> = U extends U ? keyof U : never;

const items: Type[] = [
    { id: '11245', equipment: 'hammer', recent: 'yes' },
    { id: '11335', equipment: 'screwdriver', material: 'metal' }
];

const hasKey =
    <T extends object>(o: T, key: PropertyKey): key is keyof T => key in o;

const typeExclude =
    (key: Key<Type>, el: Type) => hasKey(el, key) ? el[key] : undefined

const arr = items.map(el => typeExclude('material', el) ? 'valid' : 'invalid');

console.log(arr);

^{Playground link}

Furthermore, I've defined a distributive conditional type Key<U> that produces a union of keys from all types contained in the union U. This enforces the key parameter for your typeExclude() function to only accept recognized keys.

Answer 3

Answer №2

I have come across a solution to this issue, but I believe the following code is cleaner and more concise by using interfaces.

interface IType {
  id: string;
  equipment: string;
  weight?: string;
  material?: string;
  width?: string;
  old?: string;
  recent?: string;
  broken?: string;
}

const items: IType[] = [
  { id: "11245", equipment: "hammer", recent: "yes" },
  { id: "11335", equipment: "screwdriver", material: "metal" },
];

const typeExclude = <T extends keyof IType>(key: T, obj: IType) => {
  return key in obj ? obj[key] : undefined;
};

const arr = items.map((el) =>
  typeExclude("material", el) ? "valid" : "invalid"
);

console.log(arr); // ['invalid', 'valid']

Answer 4

I have come across a solution to this issue, but I believe the following code is cleaner and more concise by using interfaces.

interface IType {
  id: string;
  equipment: string;
  weight?: string;
  material?: string;
  width?: string;
  old?: string;
  recent?: string;
  broken?: string;
}

const items: IType[] = [
  { id: "11245", equipment: "hammer", recent: "yes" },
  { id: "11335", equipment: "screwdriver", material: "metal" },
];

const typeExclude = <T extends keyof IType>(key: T, obj: IType) => {
  return key in obj ? obj[key] : undefined;
};

const arr = items.map((el) =>
  typeExclude("material", el) ? "valid" : "invalid"
);

console.log(arr); // ['invalid', 'valid']

What is the best way to build a versatile typeExclude helper function that can handle a wide range of types and is

Answer №1

Answer №2

Similar questions

Troubleshooting Inference Problems in TypeScript with Mapped Types and Discriminated Unions

Issues with TypeScript: Difficulty locating names in HTML templates

Guide to establishing intricate conditions for TypeORM insertion

Running a loop to utilize data from an array of objects within a Protractor it() spec

Is there a way to retrieve the attributes of a generic object using an index in TypeScript?

Use Angular's super.ngOnDestroy method for handling cleanup/unsubscribing

employing a variable within a function that is nested within another function

The page does not appear to be updating after the onClick event when using the useState hook

Enhancing Quill's capabilities to accommodate soft line breaks

Deactivate the click functionality for an element located within a division using Angular and Typescript

Please provide either a string or an object containing the proper key for TypeScript

Encountered error: Unable to locate module - Path 'fs' not found in '/home/bassam/throwaway/chakra-ts/node_modules/dotenv/lib' within newly generated Chakra application

Create an Interactive Form Generator in Angular

Guidelines for saving a webpage as a PDF using TypeScript in Angular 8

Creating a popup trigger in ReactJS to activate when the browser tab is closed

Error in Typescript compilation in Visual Studio Team Services build

The TypeScript reflection system is unable to deduce the GraphQL type in this case. To resolve this issue, it is necessary to explicitly specify the type for the 'id' property of the 'Address'

Incorporating AppLozic's chat plugin into an Angular 5 project

What is the best way to merge an array of objects into a single object?

Is there a way to modify component data in Angular 5 from another component?