CODEWITHSUNDEEP
typescript
Socrates
Socrates

Reputation: 9604

Syntax for TypeScript interfaces

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?

Upvotes: 2

Views: 44

Answers (2)

Titian Cernicova-Dragomir
Titian Cernicova-Dragomir

Reputation: 250326

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

Upvotes: 4

m_callens
m_callens

Reputation: 6360

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.

Upvotes: 1

Related Questions