Value-driven parametric typing

Question

Value-driven parametric typing

Currently working on developing a custom form type. Here's what I have so far:

function getCustomType<Values extends Record<string, unknown> = Record<string, unknown>>({
  defaultValue,
  onSubmit
}: {
  defaultValue: Values
  onSubmit: (values: Values) => void
}): {
  value: Values
  onSubmit: (value: Values) => void
} {
  return {
    value: defaultValue,
    onSubmit
  }
}

const formData = getCustomType({
  defaultValue: { dog: 1 },
  onSubmit: (data) => { 
    alert(1)
  }
})

Seeking to let the value in the onSubmit function correspond with the data from the defaultValue object without needing an additional function call. Is this achievable through a more straightforward approach?

typescript

Answer 1

Answer №1

When defining the interface like this:

interface Ciccio <T extends Record<string, unknown> = Record<string, unknown>> {
  value: T
  onSubmit( value: T ): void
}

You can utilize the interface to automatically assign types in the onSubmit function when creating a new object:

const newCiccio: Ciccio <{ cand: number }> = {
  value: { cand: 1 },
  onSubmit: function( arg ) {
    // The argument 'arg' is typed here
  }
}

It's important to note that specifying the type when defining a new value is crucial if you want a more specific type than the default Record<string, unknown>. If you need the type in the onSubmit function to be inferred without explicitly providing it as a type argument when declaring the interface (i.e., replacing Ciccio <{ cand: number }> with just Ciccio), it seems not possible without using a function as in your original approach.

Answer 2

When defining the interface like this:

interface Ciccio <T extends Record<string, unknown> = Record<string, unknown>> {
  value: T
  onSubmit( value: T ): void
}

You can utilize the interface to automatically assign types in the onSubmit function when creating a new object:

const newCiccio: Ciccio <{ cand: number }> = {
  value: { cand: 1 },
  onSubmit: function( arg ) {
    // The argument 'arg' is typed here
  }
}

It's important to note that specifying the type when defining a new value is crucial if you want a more specific type than the default Record<string, unknown>. If you need the type in the onSubmit function to be inferred without explicitly providing it as a type argument when declaring the interface (i.e., replacing Ciccio <{ cand: number }> with just Ciccio), it seems not possible without using a function as in your original approach.

Value-driven parametric typing

Answer №1

Similar questions

Encountering a type error with gatsby-plugin-dark-mode in a Typescript Gatsby setup

Can we use type mapping and conditional types to make it mandatory for an object to have certain specified keys?

Display the chosen HTML template in real-time

Creating an Object with Quoted Key in JavaScript/Typescript for MongoDB's '$push' Feature

Typescript's confidential variables

Exploring the functionality of the Angular 7 date pipe in a more dynamic approach by incorporating it within a template literal using backticks, specifically

Using Jasmine and ReSharper to test TypeScript modules

What is the best way to extract a specific property from an object?

I'm puzzled as to why TypeScript isn't flagging any typing errors in this code

Issue encountered while testing a component that incorporates a templateUrl

Oops! Encounterred a TypeError stating "Unable to access properties of an undefined object" while working with react native

Tips on how to efficiently yield a resolving Promise Like object from a for loop

What's the best way to determine the type of the enum literally?

Angular NX: Managing multiple libraries with identical names

Working with Union Types in the state of React's Context API using TypeScript

JavaScript maintaining records and connections between multiple asynchronous events

Route protection is ineffective when dealing with two observables simultaneously

The variable in my NodeJS code is persisting across multiple requests and not being reset as expected

What is the most effective method for waiting for multiple requests to complete?

Best method for defining an object in JSON in Typescript