Creating an interface in TypeScript which has a function and an arbitrary number of properties

Question

I have the following interface

interface ErrorHandler {
  [key: string]: string;
}

And I use it like this

let errorHandler: ErrorHandler = {
  name: "Your name cannot be empty",
  email: "Enter a valid email address",
  birthday: "You are too young"
};

function postData(data: any, errorHandler: ErrorHandler){
  // ...
}

postData(someData, errorHandler);

That's good for now. But, say you want the errorHandler object have a function named handler. How would you declare the interface?

For example, you want your errorHandler be like this:

let errorHandler: ErrorHandler = {
  name: "Your name cannot be empty",
  email: "Enter a valid email address",
  birthday: "You are too young",
  handler: (message: string) => alert(message) 
};

Titian Cernicova-Dragomir · Accepted Answer · 2018-06-09 13:05:36Z

2

Typescript doesn't do very well with such types unfortunately because of the incompatibility between the index signature (which states every member of the object will be of type string) and the field handler which has a different type.

You can create such a type using an intersection type, but initializing it will not be posible directlym you will need to use Object.assign (not ideal but workable)

type ErrorHandler = { handler: (msg: string) => void } & { [key: string]: string; }
// Can't directly create the object, we need Object.assign
let errorHandler: ErrorHandler = Object.assign({
    name: "Your name cannot be empty",
    email: "Enter a valid email address",
    birthday: "You are too young"
}, {
    handler: (message: string) => alert(message)
});

The other approach would be to make the index compatible with handler but that would mean you can add any number of functions to the object:

type ErrorHandler = { handler: (msg: string) => void,  [key: string]: string | ((msg: string) => void); } 
let errorHandler: ErrorHandler = { // direct initialization 
    name: "Your name cannot be empty",
    email: "Enter a valid email address",
    birthday: "You are too young",
    handler: (message: string) => alert(message),
    // but now we can add as many functions as we want
    // which is even worse 
    badHandler: (message: string) => alert(message) 
};

answered Jun 9, 2018 at 13:05

Titian Cernicova-Dragomir

253k37 gold badges464 silver badges394 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

hswner Over a year ago

Thanks a lot. Both solutions work in someway :) Not the way I was hoping, but hey.

Collectives™ on Stack Overflow

Creating an interface in TypeScript which has a function and an arbitrary number of properties

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related