Typescript generics，使用泛型字段作为映射类型

Question

Horrible title, I know. I'm not sure how to describe this concisely.

I'm trying to make a function which takes an array of objects, each with a 'type' field, and a set of functions that handle the various types.

The code below is my attempt at what I'm doing:

You can see the object I'm trying to describe in the call to handler.

type Foo = {type: "foo", name: string}
type Bar = {type: "bar", score: number}

type Props<T extends {type: string}> = {
  variables: T[];
  functions: {
    [k in T["type"]]: (args: T) => void;
  }
}

function handler<T extends {type: string}>({variables, functions}: Props<T>) {
  variables.forEach(v => {
    functions[v.type](v); 
    // ^^^^^^^^^^^^^
    // No index signature with a parameter of type 'string' was found on type '{ [k in T["type"]]: (args: T) => void; }'.
  })
}

handler({
  variables: [{type: "foo", name: ""}, {type: "bar", score: 0}],
  functions: {
    "foo": (args) => {args.name}, // <--- args has type Foo | Bar, ideally would just be Foo
    "bar": (args) => {args.score},
  }
})

I'm not sure where I'm going wrong, any help would be greatly appreciated.

Answer 1

you can set the key as string in your Props type definition

type Props<T extends {type: string}> = {
  variables: T[];
  functions: {
    [k in T["type"] as string]: (args: T) => void;
  }
}

However, you have noticed that you do not use your Foo and Bar types in your code. Using them as follows throws an error that shows that there is something wrong in your design.

type Foo = {type: "foo", name: string}
type Bar = {type: "bar", score: number}

type Props<T extends {type: string}> = {
  variables: T[];
  functions: {
    [k in T["type"] as string]: (args: T) => void;
  }
}

function handler<T extends {type: string}>({variables, functions}: Props<T>) {
  variables.forEach(v => {
    functions[v.type](v); 
    
  })
}

handler<Foo | Bar>({
  variables: [{type: "foo", name: ""}, {type: "bar", score: 0}],
  functions: {
    "foo": (args:Foo) => {args.name}, // <--- error here as name is not in Bar
    "bar": (args:Bar) => {args.score}, // <--- error here as name is not in Foo
  }
})

I would suggest to change your definition of Props