Using the keyof lookup in a Typescript interface is a powerful way to

Question

Using the keyof lookup in a Typescript interface is a powerful way to

I'm looking for a solution similar to:


interface Operation<T, K extends keyof T> {
  key: keyof T;
  operation: 'add' | 'remove';
  value: T[K];
}

but without the necessity of passing K as a template. Essentially, I want to be able to achieve:

interface User {
  name: string;
  age: number;
}

// this is acceptable
const operation: Operation<User> = {
  key: 'name',
  operation: 'add',
  value: 'the value',
}
// this is acceptable
const operation: Operation<User> = {
  key: 'age',
  operation: 'add',
  value: 123,
}

// this is not valid
const operation: Operation<User> = {
  key: 'age',
  operation: 'add',
  value: '123',  // type is wrong, should be number
}

Any suggestions on how I can accomplish this?

javascript typescript

Answer 1

Answer №1

In my opinion, it is possible to enhance the object creation process by using functions. The concept is outlined as follows:

To begin with, create a type that retrieves the value type of any property:

type ValueType<T, K> = K extends keyof T ? T[K] : never;

Next, define the Operation type:

type Operation<T, K> = {
  key: K
  operation: 'add' | 'delete'
  value: ValueType<T, K>
}

The crucial step here is to define the build function instead of directly creating the object because we want to carefully handle the input arguments:

type BuildOperation<T> = <K>(arg: K) => (arg: Operation<T, K>) => Operation<T, K>

function build<T>(): BuildOperation<T> {
  return (key) => (props) => ({
    key,
    ...props,
  });  
}

Finally, we can utilize our function by specifying the key as as const to ensure Typescript does not infer it as a string:

type User = { name: string; age: number }

const obj = build<User>()('age' as const)({
  key: 'age',
  value: 20, // It will indicate this is a number
  operation: 'add',
});

Answer 2

In my opinion, it is possible to enhance the object creation process by using functions. The concept is outlined as follows:

To begin with, create a type that retrieves the value type of any property:

type ValueType<T, K> = K extends keyof T ? T[K] : never;

Next, define the Operation type:

type Operation<T, K> = {
  key: K
  operation: 'add' | 'delete'
  value: ValueType<T, K>
}

The crucial step here is to define the build function instead of directly creating the object because we want to carefully handle the input arguments:

type BuildOperation<T> = <K>(arg: K) => (arg: Operation<T, K>) => Operation<T, K>

function build<T>(): BuildOperation<T> {
  return (key) => (props) => ({
    key,
    ...props,
  });  
}

Finally, we can utilize our function by specifying the key as as const to ensure Typescript does not infer it as a string:

type User = { name: string; age: number }

const obj = build<User>()('age' as const)({
  key: 'age',
  value: 20, // It will indicate this is a number
  operation: 'add',
});

Answer 3

Answer №2

interface Task<T, K extends keyof T> {
  action: "start" | "complete";
  data: T[K];
}

interface Member {
  username: string;
  points: number;
}

// example of valid task
const task1: Task<Member, "username"> = {
  action: "start",
  data: "task123",
};

// another valid task
const task2: Task<Member, 'points'> = {
  action: "complete",
  data: 50,
};

// invalid task
const task3: Task<Member, 'points'> = {
  action: "start",
  data: "50", // incorrect type, should be a number
};

I suggest using keyof. However, I do see the point raised in the comments. Why bother if it doesn't affect runtime behavior? It's just for compile-time validation.

Answer 4

interface Task<T, K extends keyof T> {
  action: "start" | "complete";
  data: T[K];
}

interface Member {
  username: string;
  points: number;
}

// example of valid task
const task1: Task<Member, "username"> = {
  action: "start",
  data: "task123",
};

// another valid task
const task2: Task<Member, 'points'> = {
  action: "complete",
  data: 50,
};

// invalid task
const task3: Task<Member, 'points'> = {
  action: "start",
  data: "50", // incorrect type, should be a number
};

I suggest using keyof. However, I do see the point raised in the comments. Why bother if it doesn't affect runtime behavior? It's just for compile-time validation.

Using the keyof lookup in a Typescript interface is a powerful way to

Answer №1

Answer №2

Similar questions

JavaScript can retrieve the default page name that is hidden within the browser's URL

Enhance your Three.js development with TypeScript autocomplete

Reloading issue with NextJs when utilizing next-i18next for translations on a specific

Connecting radio buttons to data in Vue using render/createElement

Unlock the potential of JavaScript by accessing the local variable values in different functions

The ComponentDidUpdate function treats the previous state (prevState) and the current state (this

Showcasing interactive column titles by employing angularjs in an html table

Angular 6 - The state of the expression was altered after it was verified, different types of constructions

What methods can I use to enable web browsers to remember form field data that is not transmitted in the usual manner?

How to apply a single pipe to filter columns in Angular 2 with an array of values

Setting up a CentOs Linux environment to host and run a node.js server

Error handling in Angular is not properly managing the custom exception being thrown

Tips for adjusting the autocomplete maxitem dynamically

Troubleshooting "Nodejs Socket hang up & ECONNRESET" when sending an HTTP post request from a Meteor app to a Node.js

No overload error encountered with TypeScript function call

Mastering Protractor's end-to-end control flow and managing time outs

Unleash the power of drag-and-drop functionality with cdkDrop

Utilizing JavaScript variable modifiers for enhanced functionality

Tips on accessing close autoComplete/TextField title in AppBar

Merging the outcomes of a JSON call