Typescript String Literal Types not working in function overloading

Question

According to TypeScript documentation (look for the String Literal Types section), the following code should work on TypeScript:

function createElement(tagName: "img"): HTMLImageElement;
function createElement(tagName: "input"): HTMLInputElement;
// ... more overloads ...

function createElement(tagName: string): Element {
    // ... code goes here ...
}

When I run the code, or some more meaningful variation, on TypeScript Playground, or on Visual Studio, I get the following error:

Specialized overload signature is not assignable to any non-specialized signature.

Any suggestion? I came to this error after trying to implement something very similar on my own code.

Valéry · Accepted Answer · 2016-04-21 21:34:08Z

1

Did you try to start with a non specialized signature?

function createElement(tagName: string): Element;
function createElement(tagName: "img"): HTMLImageElement;
function createElement(tagName: "input"): HTMLInputElement;
// ... more overloads ...

function createElement(tagName: string): Element { /* ... */ }

```

answered Apr 21, 2016 at 21:34

Valéry

4,7381 gold badge16 silver badges26 bronze badges

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

2 Comments

FrancoSF Over a year ago

It works, thanks! Great! Do you have any explanation why does it work? I'm trying to understand.

Valéry Over a year ago

Not sure, maybe because specialized signatures can't see the implementation that comes after them? More details here.

FrancoSF · Accepted Answer · 2016-04-22 16:31:29Z

Answering to my own question: IMHO, the use of Generics can solve this kind of problems in a better way.

String Literals + Function Overloading approach

function createElement(tagName: string): Element;
function createElement(tagName: "img"): HTMLImageElement;
function createElement(tagName: "input"): HTMLInputElement;
// ... more overloads ...

function createElement(tagName: string): Element { /* ... */ }

var inputElement = createElement("input");

Generics approach

function createElement<elementType>(): elementType { /* ... */ }

var inputElement = createElement<HTMLInputElement>();

Generics approach with stronger type constraints

function createElement<elementType extends HTMLElement>(): elementType { /* ... */ }

var inputElement = createElement<HTMLInputElement>();

jocull · Accepted Answer · 2016-09-07 15:09:01Z

0

If you want to restrict to only the specified strings (e.g. when other cases are an error) you apparently have to alias the type first.

type ValidTagOptions = "img" | "input";
function createElement(tagName: ValidTagOptions): HTMLImageElement;
function createElement(tagName: ValidTagOptions): HTMLInputElement;

This is trigger a compiler error when calling:

createElement("a"); // Error!

You can't just start doing it with the literals in the function signature, as you found. Annoying, IMO. I hope they clean this up in future TS versions!

answered Sep 7, 2016 at 15:09

jocull

21.4k25 gold badges110 silver badges154 bronze badges

Collectives™ on Stack Overflow

Typescript String Literal Types not working in function overloading

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related