In TypeScript, what do we call a property that is accessed dynamically?

Question

In TypeScript, what do we call a property that is accessed dynamically?

I have a reusable function that can be used on various properties of a custom type. Here's an example:

interface MyType {
  prop1: string;
  prop2: number;
}
type MyTypeKey = keyof MyType;

const testValue = (
  obj: MyType,
  property: MyTypeKey,
  value: any, // <-- what type should go here?
) => {
  if (obj[property] === value) {
    console.log("do something");
  }
}

testValue({prop1: "a", prop2: 1}, "prop1", "okay"); // should be okay
testValue({prop1: "a", prop2: 1}, "prop2", "oops"); // should be error

However, I'm unsure about the type of the property value. Can anyone guide me on how to handle this?

(I am new to javascript/typescript, so please excuse any small errors or suboptimal practices)

javascript typescript

Answer 1

Answer №1

To show the key, use a generic argument. This key allows you to search for it in MyType to determine the type of value associated with it. The generic function requires the value argument to match that type.

interface MyType {
    prop1: string;
    prop2: number;
}

const testValue = <K extends keyof MyType>(
    obj: MyType,
    property: K,
    value: MyType[K],
) => {
    if (obj[property] === value) {
        // ...
    }
}

declare const obj: MyType;
// Correct
testValue(obj, 'prop2', 3);
// Incorrect
testValue(obj, 'prop2', 'a');

If you want a more adaptable function that can validate any object without specifying MyType, create another generic type for the object.

const testValue = <O extends object, K extends keyof O>(
    obj: O,
    property: K,
    value: O[K],
) => {
    if (obj[property] === value) {
        // ...
    }
}

Answer 2

To show the key, use a generic argument. This key allows you to search for it in MyType to determine the type of value associated with it. The generic function requires the value argument to match that type.

interface MyType {
    prop1: string;
    prop2: number;
}

const testValue = <K extends keyof MyType>(
    obj: MyType,
    property: K,
    value: MyType[K],
) => {
    if (obj[property] === value) {
        // ...
    }
}

declare const obj: MyType;
// Correct
testValue(obj, 'prop2', 3);
// Incorrect
testValue(obj, 'prop2', 'a');

If you want a more adaptable function that can validate any object without specifying MyType, create another generic type for the object.

const testValue = <O extends object, K extends keyof O>(
    obj: O,
    property: K,
    value: O[K],
) => {
    if (obj[property] === value) {
        // ...
    }
}

In TypeScript, what do we call a property that is accessed dynamically?

Answer №1

Similar questions

retrieving class instances from a Firebase database

Exploring ES6: Harnessing the Power of Classes

outputting javascript within php

Avoiding overlapping in setTimeOut when using jQuery.hover()

Exploring Next.js: Leveraging fetch to retrieve data in getServerSideProps and passing it to the client via query parameters

Obtain the union type by extracting values from an indexed object

I am currently running a recursive loop to fetch data from MongoDB. However, the Express.js function runs through the entire script before the data can be successfully returned

Connecting an HTML box to a JavaScript function for the desired outcome: How to do it?

Using Jquery to handle different status codes in an Ajax request

Ensure that a JavaScript prompt appears when a form is selected in a dynamic HTML field

I'm looking for a method in JavaScript that can search through my XML file to locate specific attributes and return the entire parent element containing that attribute. Can anyone help with

Initiating a SOAP request to utilize your custom services

The chrome extension is not displaying any output in the console, even though there are no errors

Using Vue.js to conditionally render content based on changes in a variable

Secure mustache templates for data validation

Convert a file into an empty array when sending a post request from Angular to Laravel

The error "redux-persist undefined is not an object (evaluating 'action.type')" indicates that there is an issue with the

The E.js Template encountered an error with an unexpected token "else"

Is it possible to disable a function by clicking on it?

Converting Unicode to characters using Javascript