Tips for utilizing TypeScript to automatically infer that a property within one type is of the same type

Question

Tips for utilizing TypeScript to automatically infer that a property within one type is of the same type

Looking to sort an array of items, each with properties of either string or number type, without mixing types for each property:

type Item = {
  prop1: string;
  prop2: number;
  prop3: string;
  prop4: number;
}

To keep it abstract, I am using propertyName: keyof Item to specify which property to sort by. In my sorting function, I access property values like this:

items.sort((item1, item2) => {
  const value1 = item1[propertyName];
  const value2 = item2[propertyName];
...

both value1 and value2 can be of type string | number, but I need to differentiate between sorting by string and number properties. TypeScript does not automatically infer that the same property for any item is of the same type, leading to the need for type checking logic. I am exploring the most elegant way to perform type checks based on the property types in the Item itself rather than the actual values, like "if the type of property (propertyName) in Item is 'string' then ..."

Any suggestions on how to achieve this would be greatly appreciated. Thank you!

typescript typescript-typings

Answer 1

Answer №1

Exploring the concept you're working on, check out this interactive demo here


type Selection<T, U> = {
  [K in keyof T]: T[K] extends U ? K : never
}[keyof T];

type Data = {
  name: string;
  age: number;
  city: string;
  salary: number;
};

type StringFields = Selection<Data, string>;
// StringFields: { name: string; city: string; }

type NumberFields = Selection<Data, number>;
// NumberFields: { age: number; salary: number; }

const dataList: Data[] = [
    {
        name: "John Doe",
        age: 30,
        city: "New York",
        salary: 60000
    },
    {
        name: "Jane Smith",
        age: 25,
        city: "Los Angeles",
        salary: 75000
    },
    {
        name: "Alice Johnson",
        age: 35,
        city: "Chicago",
        salary: 80000
    }
];

const fieldName1: keyof Data = "name";
const fieldName2: keyof Data = "age";

let field: keyof Data;
let stringFields: StringFields;
let numberFields: NumberFields;

dataList.sort((item1, item2) => {

    const value1Name = item1[fieldName1]; 
    const value2Name = item2[fieldName1]; 

    const value1Age = item1[fieldName2]; 
    const value2Age = item2[fieldName2]; 

    const stringValue1 = item1[stringFields];
    const stringValue2 = item2[stringFields];

    const numberValue1 = item1[numberFields];
    const numberValue2 = item2[numberFields];

    const genericValue = item1[field]

    switch (field) {
        case "name":
            const name1 = item1[field]; 
            const name2 = item2[field]; 
            break;

        case "age":
            const age1 = item1[field]; 
            const age2 = item2[field]; 
            break;

        case "city":
            const city1 = item1[field]; 
            const city2 = item2[field]; 
            break;

        case "salary":
            const salary1 = item1[field]; 
            const salary2 = item2[field]; 
            break;

        default:
            break;
    }

    return 1;
});

If the field name is not known at compile time, runtime type narrowing is necessary to properly handle the types.

Answer 2

Exploring the concept you're working on, check out this interactive demo here


type Selection<T, U> = {
  [K in keyof T]: T[K] extends U ? K : never
}[keyof T];

type Data = {
  name: string;
  age: number;
  city: string;
  salary: number;
};

type StringFields = Selection<Data, string>;
// StringFields: { name: string; city: string; }

type NumberFields = Selection<Data, number>;
// NumberFields: { age: number; salary: number; }

const dataList: Data[] = [
    {
        name: "John Doe",
        age: 30,
        city: "New York",
        salary: 60000
    },
    {
        name: "Jane Smith",
        age: 25,
        city: "Los Angeles",
        salary: 75000
    },
    {
        name: "Alice Johnson",
        age: 35,
        city: "Chicago",
        salary: 80000
    }
];

const fieldName1: keyof Data = "name";
const fieldName2: keyof Data = "age";

let field: keyof Data;
let stringFields: StringFields;
let numberFields: NumberFields;

dataList.sort((item1, item2) => {

    const value1Name = item1[fieldName1]; 
    const value2Name = item2[fieldName1]; 

    const value1Age = item1[fieldName2]; 
    const value2Age = item2[fieldName2]; 

    const stringValue1 = item1[stringFields];
    const stringValue2 = item2[stringFields];

    const numberValue1 = item1[numberFields];
    const numberValue2 = item2[numberFields];

    const genericValue = item1[field]

    switch (field) {
        case "name":
            const name1 = item1[field]; 
            const name2 = item2[field]; 
            break;

        case "age":
            const age1 = item1[field]; 
            const age2 = item2[field]; 
            break;

        case "city":
            const city1 = item1[field]; 
            const city2 = item2[field]; 
            break;

        case "salary":
            const salary1 = item1[field]; 
            const salary2 = item2[field]; 
            break;

        default:
            break;
    }

    return 1;
});

If the field name is not known at compile time, runtime type narrowing is necessary to properly handle the types.

Answer 3

Answer №2

Introducing a handy util function that fetches the value based on a specific property. Check it out:

function getProperty<T, K extends keyof T>(item: T, property: K): T[K] {
    return item[property];
}

Now, in the sorting algorithm, you can utilize the getProperty function to retrieve values for sorting:

items.sort((item1, item2) => {
    const key1 = 'key1';
    const key2 = 'key2';

    const value1 = getProperty(item1, key1);
    //    ^? string

    const value2 = getProperty(item2, key2);
    //    ^? number

    return -1;
});

Answer 4

Introducing a handy util function that fetches the value based on a specific property. Check it out:

function getProperty<T, K extends keyof T>(item: T, property: K): T[K] {
    return item[property];
}

Now, in the sorting algorithm, you can utilize the getProperty function to retrieve values for sorting:

items.sort((item1, item2) => {
    const key1 = 'key1';
    const key2 = 'key2';

    const value1 = getProperty(item1, key1);
    //    ^? string

    const value2 = getProperty(item2, key2);
    //    ^? number

    return -1;
});

Tips for utilizing TypeScript to automatically infer that a property within one type is of the same type

Answer №1

Answer №2

Similar questions

The @HostListener in Angular2 does not function correctly within a component that is inherited from another component

What is preventing React CLI from installing the template as TypeScript?

Issue with modal-embedded React text input not functioning properly

Ensure your TypeScript class includes functionality to throw an error if the constructor parameter is passed as undefined

A long error occurred while using the payloadaction feature of the Redux Toolkit

Creating a multipart/form-data POST request in Angular2 and performing validation on the input type File

Generate dynamic property values based on calculations

Obtain an array containing only one property value from an array of objects

Issues with command functionality within the VS Code integrated terminal (Bash) causing disruptions

Encountering [Object] error in Angular's ngbTypeahead functionality

Only one choice for discriminated unions in react props

Link the chosen selection from a dropdown menu to a TypeScript object in Angular 2

Utilizing React and MobX to dynamically render components based on observable arrays

The Sanity npm package encounters a type error during the build process

In Next.js, the switch button remains in the same state even after the page is refreshed

Forwarding from a user interface element in Next.JS

Exploring the benefits of leveraging TypeScript with AWS NodeJS for improved stacktrace visibility over traditional JavaScript

Troubleshooting Angular Build Errors: Integrating Three.js

TypeScript: "The type is generic and can only be accessed for reading." - Error code 2862

Determining data types through type guarding in Typescript