Typescript接口模板使用keyof查找

Question

I want something like

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

but without requiring to pass the K as a template; basically, I want to be able to do:

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

// this is valid
const operation: Operation<User> = {
  key: 'name',
  operation: 'add',
  value: 'the value',
}
// this is valid
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
}

How do I do this?

Answer 1

Personally we can if we refine the way of creating the object by using function. The idea is like below:

First of all, create the type getting value type of any property:

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

Then define Operation type:

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

Now the key thing is here to define the build function instead of create the object directly since we're keen to read the argument:

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 use our function by setting key as const to make sure Typescript won't infer as string:

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

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

Answer 2

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

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

// this is valid
const operation1: Operation<User, "name"> = {
  operation: "add",
  value: "the value",
};

// this is valid
const operation2: Operation<User, 'age'> = {
  operation: "add",
  value: 123,
};

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

I recommend use keyof . but, I agree comments. Why is it needed? it not work on runtime application. It just check when it is compiled.