Understanding Typescript parameter types that reference another parameter is essential for writing concise and

Looking to create a unique interface

interface CustomObject {
   x: string;
   y: number;
   z: string[];
}

I am in need of a specialized function

function customFunction(obj: CustomObject, property: keyof CustomObject, data: any)

Currently, the 'data' parameter can be anything. However, my goal is to restrict it based on the property type.

  • If property is x, then data must be a string
  • If property is y, then data must be a number
  • and so forth

I attempted using data: CustomObject[property], but encountered issues as it seems unable to reference another parameter. How do I accomplish this in TypeScript?

typescript

Answer №1

Credit goes to Jonrsharpe for inspiring me with the idea of using generic types. Here is how I implemented it:

function fancyName<K extends keyof T, T = IProduct>(object: T, key: K, value: T[K])

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for sending arguments to translations

I am currently implementing vuejs 3 using TS. I have set up my translation files in TypeScript as shown below: index.ts: export default { 'example': 'example', } To use the translations, I simply do: {{ $t('example') }} N ...

typescriptvue.jsinternationalizationvuejs3vue-i18n

complete() method is not triggered by Observable

Note: I understand that there is a timer observable from rxjs, but for the purpose of this project, I am using it as a proof of concept to enhance my understanding of observables. In my Angular application, I have developed a timer with a start button, a ...

angulartypescriptobservable

When TypeScript tsc is unresponsive, there is no output or feedback provided

Just getting started with TypeScript! I've been working on transitioning my React.js project from JavaScript to TypeScript. I managed to resolve all the bugs and verified that it runs smoothly when using npm start. However, whenever I try to comp ...

reactjstypescripttsc

Can AngularJs $q promises work alongside async/await syntax?

I am currently working on a unique Angular and AngularJs hybrid application with TypeScript versions 9.07, 1.5.11, and 3.7.5. Our HTTP requests are all handled by a wrapper service written in plain Javascript, which was originally designed for the "legacy" ...

javascriptangularjsangulartypescript

Steps for transitioning a VUE JS project to TypeScript

Is it possible to transition a VUE JS project from JavaScript to TypeScript without rewriting everything? I heard from a friend that it can be done through the VUE CLI, but I haven't been able to find any documentation or articles on this method. Has ...

javascripttypescriptvue.js

Monorepo with Yarn workspaces using Typescript and Node.JS project encounters "module not found" error while running nodemon

After creating a monorepo with yarn workspaces for a TypeScript Node.js project, I encountered an issue with local development. Despite successfully building the project, I faced errors when running yarn dev without first manually running yarn build. The e ...

node.jstypescriptmonorepoyarn-workspaces

The Authorization Header sent by Angular is always null

I've been attempting to send a request with an authorization header using Angular to communicate with a Spring backend. export class TokenInterceptor implements HttpInterceptor{ constructor(public sharedService : SharedService){} intercept(r ...

javaangularspringtypescript

What exactly does the use of type assertion as any in Typescript entail?

I'm attempting to dissect a portion of code and figure out its functionality. While I've encountered type assertion before, this particular example is proving to be quite baffling for me. (this.whatever as any).something([]); Here's the la ...

reactjstypescriptcastingreact-reduxassertion

Having trouble with inserting data into Firestore using Firebase cloud functions?

I'm attempting to insert a document from a Firebase cloud function into Firestore, but it's not functioning as expected. Here's my code snippet: import * as admin from "firebase-admin" import * as functions from "firebase-functions" admin. ...

typescriptfirebasegoogle-cloud-firestore

The compilation fails when using TestUtils findRenderedComponentWithType with a Component<Props> definition

Content of the file package.json: { "scripts": { "test": "tsc --project . --noEmit" }, "dependencies": { "@types/react": "^16.7.6", "@types/react-dom": "^16.0.9", "react": "^16.6.3", "react-dom": "^16.6.3", "typescript": "^3. ...

reactjstypescripttypescript-typingsreact-tsx

Getting js.map Files to Function Properly with UMD Modules

I am experiencing an issue with debugging TypeScript files in Chrome and Firefox. Specifically, when trying to debug the MapModuleTest.ts file, the debugger seems to be out of sync with the actual JavaScript code by two lines. This discrepancy makes settin ...

javascripttypescriptgoogle-chrome-devtoolsfirefox-developer-tools

When attempting to display an identical image on two distinct canvas elements in Angular 6

I am facing an issue where the image is only rendered on the second canvas instead of both canvases. I need assistance in finding a solution to render the same image on both canvases. Below is a screenshot demonstrating that the image is currently only re ...

javascriptangularimagetypescript

Zod vow denial: ZodError consistently delivers an empty array

My goal is to validate data received from the backend following a specific TypeScript structure. export interface Booking { locationId: string; bookingId: number; spotId: string; from: string; to: string; status: "pending" | "con ...

javascriptreactjstypescriptzod

Finding the duration of an audio file in a React/Typescript environment

I've been attempting to determine the duration of an audio file. It seems like the audio property is not included in the file by default. The only properties I see are size, name, and type. Is there a way for me to get the duration of the audio file i ...

reactjstypescript

Filter an array of objects in Typescript by using another array of strings

I'm having trouble with my TypeScript filter function. Here is an array of objects: [ { "id": 12345, "title": "Some title", "complexity": [ { "slug": "1", // This is my search term "name": "easy" }, { ...

arraysangulartypescript

What is the most effective way to send messages from Typescript to C#?

Could someone provide guidance on how to properly send a message from Typescript to C#? I have been attempting to receive the message in C# using WebView_WebMessageReceived with the code snippet below: private void WebView_WebMessageReceived(object sender, ...

c#typescriptpostmessage

Caution in version 3.5.1 of Vue Router: The tag prop of `<router-link>` is now obsolete and has been eliminated in Vue Router 4

After updating the node packages of our Vue.js app, a warning is now appearing in the browser console: [vue-router] The 'tag' prop has been deprecated and removed in Vue Router 4. To remove this warning, use the v-slot API. Check out the migrat ...

typescriptvue.jsvuejs2vue-routervue-router4

What is the best way to dynamically set an ID in Angular using the pound symbol (#)?

I am currently developing a dynamic Angular 6 application that utilizes dynamic components. My approach involves using @ViewChild('<id>', { read: ViewContainerRef }) <id>; to reference the divs where I intend to populate with dynamic ...

htmlangulartypescript

Exploring a Component's props and their data types

As a newcomer to React and Typescript, I have a straightforward question that I can't seem to find an answer to. I'm attempting to construct a tab layout using Typescript with headless UI following the documentation here I am encountering issue ...

reactjstypescriptheadless-ui

Input values that are true, or in other words, fulfill conditions for truthiness

Is there a specific data type in TypeScript to represent truthy values? Here's the method I'm working with: Object.keys(lck.lockholders).length; enqueue(k: any, obj?: any): void It seems like TypeScript allows checking for empty strings &ap ...

typescripttsctruthy