Syntax for TypeScript interfaces

Question

I'm still quite new to TypeScript and I have the following syntax that confuses me a bit.

export interface FileDialogFactory {
    (props: FileDialogProps): FileDialog;
}

As far as I understand it, this is an interface that can later be used by some variable. Inside of this interface is a defined variable name named props that has the type FileDialogProps. What I don't understand is the meaning of the colon ":" and the the following FileDialog. So what type is the variable props supposed to be? Is it FileDialogProps or is it FileDialog?

Titian Cernicova-Dragomir · Accepted Answer · 2018-04-30 14:21:49Z

4

That is an interface that contains a function signature. A function that takes an argument of type FileDialogProps and returns a FileDialog. So a variable of this type will be callable:

let fact:FileDialogFactory;
let dialog = fact(props);

An interface can have multiple function signatures, these will act as overloads and any of them is callable with the same rules typescript applies to function overload resolution:

export interface FileDialogFactory {
    (props: FileDialogProps): FileDialog;
    (props: FileDialogProps, isOpen: boolean): FileDialog;
}
let fact:FileDialogFactory;
let dialog = fact(props);
let dialog2 = fact(props, true); // also ok

edited Apr 30, 2018 at 14:21

answered Apr 30, 2018 at 14:09

Titian Cernicova-Dragomir

253k37 gold badges464 silver badges394 bronze badges

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

4 Comments

Socrates Over a year ago

So, the function has no name. It's just called (), right? And, following your example code, when I call fact(props), I call the default function that takes a FileDialogProps parameter and has to return the type FileDialog, right? So, am I right to say, that there can only be one such anonymous function?

Titian Cernicova-Dragomir Over a year ago

@Socrates no, such an interface can have multiple function signatures, they will act as overloads.

Socrates Over a year ago

Ok, so am I right to say, that those multiple function signatures are still anonymous? They don't have a name such as doSomething(props: FileDialogProps). If there is more than one like this, the differentiation is done by the type of the argument and the return type, right?

Titian Cernicova-Dragomir Over a year ago

@Socrates Yes, I added an example, to ilustrate, make it more clear.

m_callens · Accepted Answer · 2018-04-30 14:09:48Z

1

The FileDialogFactory interface you have in the code sample contains a function definition in which there is a single parameter props of type FileDialogProps and the function returns an instance of interface/type FileDialog.

answered Apr 30, 2018 at 14:09

m_callens

6,4029 gold badges35 silver badges59 bronze badges

Collectives™ on Stack Overflow

Syntax for TypeScript interfaces

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related