Tips for creating an interface in TypeScript with multiple properties of a specific type

Question

Tips for creating an interface in TypeScript with multiple properties of a specific type

I am looking to create an interface that can have properties of the same type, regardless of the content. For example:

type Reducer<S, P> = (state: S, payload: P) => S

interface Reducers {
  [name: string]: Reducer
}

This is how I am trying to implement it:

interface MyState {
  foo?: string
  bar?: string
}

const reducers: Reducers = {
  r1: (state: MyState, payload: string) => {
    return {foo: payload}
  }
}

Unfortunately, I am getting a compilation error. The error message is:

Error TS2314: Generic type 'Reducer' requires 2 type argument(s).

Can someone please advise me on what I am doing incorrectly?

typescript

Answer 1

Answer №1

Make sure to pass your generic arguments to the Reducers interface:

interface Reducers<S, P> {
  [name: string]: Reducer<S, P>
}

const reducers: Reducers<MyState, string> = {
  r1: (state: MyState, payload: string) => {
    return {foo: payload}
  }
}

If your compiler doesn't allow you to define the Reducer method inline (I've encountered this issue before), you can define the function externally:

const r1Reducer: Reducer<MyState, string> = (state: MyState, payload: string) => {
    return {foo: payload}
}

const reducers: Reducers<MyState, string> = {
  r1: r1Reducer;
}

Answer 2

Make sure to pass your generic arguments to the Reducers interface:

interface Reducers<S, P> {
  [name: string]: Reducer<S, P>
}

const reducers: Reducers<MyState, string> = {
  r1: (state: MyState, payload: string) => {
    return {foo: payload}
  }
}

If your compiler doesn't allow you to define the Reducer method inline (I've encountered this issue before), you can define the function externally:

const r1Reducer: Reducer<MyState, string> = (state: MyState, payload: string) => {
    return {foo: payload}
}

const reducers: Reducers<MyState, string> = {
  r1: r1Reducer;
}

Answer 3

Answer №2

Your code lacks explicit generic type declarations, causing an issue with determining the correct types for S and P.

type Reducer<S, P> = (state: S, payload: P) => S

interface Reducers<S, P> {
  [name: string]: Reducer<S, P>
}

interface MyState {
  foo?: string
  bar?: string
}

const reducers: Reducers<MyState, string> = {
  r1: (state: MyState, payload: string) => {
    return { foo: payload }
  }
}

Adding these generics type notations will help the compiler to correctly infer the types of S and P.

Answer 4

Your code lacks explicit generic type declarations, causing an issue with determining the correct types for S and P.

type Reducer<S, P> = (state: S, payload: P) => S

interface Reducers<S, P> {
  [name: string]: Reducer<S, P>
}

interface MyState {
  foo?: string
  bar?: string
}

const reducers: Reducers<MyState, string> = {
  r1: (state: MyState, payload: string) => {
    return { foo: payload }
  }
}

Adding these generics type notations will help the compiler to correctly infer the types of S and P.

Tips for creating an interface in TypeScript with multiple properties of a specific type

Answer №1

Answer №2

Similar questions

Unable to build an optional Node.js dependency using the Angular compiler

When attempting to navigate to the index page in Angular, I encounter difficulties when using the back button

The performance of ternary operators in Typescript-based Reactjs fell short of my expectations

Creating a nrwl/nx workspace with Angular Universal and encountering a typing problem in Cypress configuration

Are there advantages to incorporating d3.js through npm in an Angular 2 TypeScript project?

Angular 8 does not allow for the assignment of type '{}' to a parameter

The ts-loader seems to be malfunctioning (It appears that a suitable loader is required to handle this file type, as no loaders are currently set up to process it)

Angular button for opening or closing the menu that redirects the page to a localhost URL

Utilizing string literals as index signatures

What is the best approach to implementing React Hooks in Typescript when using Context?

Simulate a new Date object in Deno for testing purposes

The selected check icon does not appear in the console log

Issue with assigning Type (Date|number)[][] to Array<,Array<,string|number>> in Angular with typescript and google charts

Exploring the power of nested components within Angular 2

The Heart of the Publisher-Subscriber Design Paradigm

I'm encountering a 404 error on Next.js localhost:3000

What is the best way to link together Angular observables?

Enhancing Request JSON Body Validation in Next.js 14 API Handler

Cordova's FileReader takes precedence over TypeScript's FileReader functionality

Is it possible to apply JavaScript object destructuring but make changes to certain values before assigning them to a new object?