using a property key as a generic argument when passing in TypeScript

Question

using a property key as a generic argument when passing in TypeScript

Check out this Codesandbox link to see some code:

type Tags = "TAG1" | "TAG2";

export type S<Tag extends Tags> = {
  tag: Tag;
  get<K, R>(k: K): R;
};

const store = {
  one: "ONE"
};

type Keys = keyof typeof store;

const s: S<"TAG1"> = {
  tag: "TAG1",
  get<K extends Keys>(k: K) {
    return store[k];
  }
};

An error occurs with the line:

get<K extends Keys>(k: K) {

The types are incompatible: Type '<K extends "one">(k: K) => { one: string; }[K]' is not assignable to type '<K, R>(k: K) => R'. Types of parameters 'k' and 'k' are incompatible. Type 'K' is not assignable to type '"one"'.ts(2322

Is it possible to pass a key value like this using TypeScript?

typescript typescript-generics

Answer 1

Answer №1

Avoid using a generic as the return type

type Tags = "TAG1" | "TAG2";

export type S<Tag extends Tags> = {
  tag: Tag;
  get<K extends Keys>(k: K): Store[K];
};

const store = {
  one: "ONE"
};

type Store = typeof store
type Keys = keyof typeof store;

const s: S<"TAG1"> = {
  tag: "TAG1",
    get<K extends Keys>(k: K):Store[K] {
      return store[k];
    }
  };

const x = s.get('one') // string

Playground

Answer 2

Avoid using a generic as the return type

type Tags = "TAG1" | "TAG2";

export type S<Tag extends Tags> = {
  tag: Tag;
  get<K extends Keys>(k: K): Store[K];
};

const store = {
  one: "ONE"
};

type Store = typeof store
type Keys = keyof typeof store;

const s: S<"TAG1"> = {
  tag: "TAG1",
    get<K extends Keys>(k: K):Store[K] {
      return store[k];
    }
  };

const x = s.get('one') // string

Playground

using a property key as a generic argument when passing in TypeScript

Answer №1

Similar questions

Deactivate Search Functionality for Users who are not Logged in on an Angular 2 Application

Attempting to create a bar graph using Angular framework

Angular5 causing all divs to have click events at once instead of individually triggered

What is the best way to manage a promise in Jest?

Issues encountered while developing a ReactJS application using TypeScript

What is the best way to update this payload object?

Resolving typescript error in my custom hook

Developing a node module that includes nested subfolders

Empty initial value of a number type input element in React using TSX

Next.js: Importing from a new endpoint triggers the code execution once more

Is there a way to convert my messages into different languages without relying on the 'translate' directive or pipe?

Struggling with rotating an image in React

The TypeScript import statement is causing a conflict with the local declaration of 'Snackbar'

Customizing MUI V5 Variants

JavaScript - Employing the .every function with an array containing objects

This error message in Typescript occurs when the compiler is unable to locate the specified function name, causing

Using Angular services without specifying a specific type

Error TS2345: The argument provided, which is of type 'Promise<ReadonlyArray<Object>>', cannot be assigned to a parameter that must be of type 'T | PromiseLike<T> | undefined'

Can we deduce the value of a Record datatype in TypeScript?

ES6 Update: Manipulating Nested Arrays with JavaScript