What is the proper way to define a generic object interface in Typescript?

Question

What is the proper way to define a generic object interface in Typescript?

Within my code, I have constructs that resemble the following:

{
  classNames: {
    foo: 'foo',
    ....
    bar: 'bar'
  },
  method1: () => {....},
  method2: () => {....},
  stringKey1: 'stringKey1',
  ...
  stringKeyN: 'stringKeyN',
}

I am aiming to define a function parameter like so:

function func1(myObj) { ... }

However, my explanation is lacking

interface IMyObject {
  classNames: [key: string]: string;
  method1: Function;
  method2: Function;
  [key: string]: string | undefined;
}

The resulting issues are:

The 'classNames' property, with type '[any, string]', cannot be assigned to the string index type 'string'.
The 'method1' property, with type 'Function', cannot be assigned to the string index type 'string'.
The 'method2' property, with type 'Function', cannot be assigned to the string index type 'string'.

typescript

Answer 1

Answer №1

The issue you are facing stems from trying to define the indexed type in conjunction with "exceptions" to that type.

If we examine the code below (which should be what you are looking for) - if the Example interface included the index signature, it would clash with the other members. For instance, method1 does not adhere to this: [index: string]: string;

interface Example {
    classNames: { [index: string]: string; };
    method1: () => void;
    method2: () => void;
}

interface Example1 {
    [index: string]: string;
}

type ExampleUnion = Example | Example1;

const x: ExampleUnion = {
  classNames: {
    foo: 'foo',
    bar: 'bar'
  },
  method1: () => {},
  method2: () => {},
  stringKey1: 'stringKey1',
  stringKeyN: 'stringKeyN',
}

Currently, this causes difficulties with access because the two interfaces are still conflicting. It is possible to resolve this with custom type guards, but a different structure would resolve all your issues at once:

interface Example {
    classNames: { [index: string]: string; };
    propertyBag: { [index: string]: string; };
    method1: () => void;
    method2: () => void;
}

const x: Example = {
  classNames: {
    foo: 'foo',
    bar: 'bar'
  },
  method1: () => {},
    method2: () => { },
    propertyBag: {
        stringKey1: 'stringKey1',
        stringKeyN: 'stringKeyN',
    }
}

Answer 2

The issue you are facing stems from trying to define the indexed type in conjunction with "exceptions" to that type.

If we examine the code below (which should be what you are looking for) - if the Example interface included the index signature, it would clash with the other members. For instance, method1 does not adhere to this: [index: string]: string;

interface Example {
    classNames: { [index: string]: string; };
    method1: () => void;
    method2: () => void;
}

interface Example1 {
    [index: string]: string;
}

type ExampleUnion = Example | Example1;

const x: ExampleUnion = {
  classNames: {
    foo: 'foo',
    bar: 'bar'
  },
  method1: () => {},
  method2: () => {},
  stringKey1: 'stringKey1',
  stringKeyN: 'stringKeyN',
}

Currently, this causes difficulties with access because the two interfaces are still conflicting. It is possible to resolve this with custom type guards, but a different structure would resolve all your issues at once:

interface Example {
    classNames: { [index: string]: string; };
    propertyBag: { [index: string]: string; };
    method1: () => void;
    method2: () => void;
}

const x: Example = {
  classNames: {
    foo: 'foo',
    bar: 'bar'
  },
  method1: () => {},
    method2: () => { },
    propertyBag: {
        stringKey1: 'stringKey1',
        stringKeyN: 'stringKeyN',
    }
}

What is the proper way to define a generic object interface in Typescript?

Answer №1

Similar questions

When trying to access the "form" property of a form ElementRef, TypeScript throws an error

Tips for effectively implementing ng-bootstrap in Angular 18

Exploring the nativeElement property of a customized Angular HTML element

I am looking for guidance on how to effectively utilize a JSON object that is stored in the constructor of my component, particularly when triggering

What is the best way to display API error messages to the user?

printer.printFile function is generating a blank output

Acknowledgment Pop-up

What is preventing type guarding in this particular instance for TypeScript?

Interacting with a Web Socket Connection While Editing Inline Content Causes Distractions. Using Angular 9 Material Table

Angular 2: A guide to resetting dropdown and text values when changing radio button selections

Tips for adjusting the language settings on a date picker

Getting environment variables on the client side in Next.js: A step-by-step guide

Ways to resolve the issue with the Argument of type 'Date[]' not matching the parameter type '(prevState: undefined) in React

Tips for implementing a feature in Angular 6 that enables an input box to accept both negative and positive values within the range of 0 to

Enhancing Angular routing with multiple parameters

Error: The Class object cannot be found in Object(...)(...)

Can dynamic string types be declared in Typescript?

The useRef function is malfunctioning and throwing an error: TypeError - attempting to access 'filed2.current.focus' when 'filed2' is null

Observe the classList object of the material element to obtain its properties

Developing a Data Generic State Management System in Angular using TypeScript