keyof becoming union of string literal in emitted type definitions

TypeScript Version: 3.0.1

Search Terms: declaration emit keyof as union type

Code

We’re seeing this problem in LitElement: https://github.com/Polymer/lit-element/blob/master/src/lib/decorators.ts#L43

export const customElement = (tagName: keyof HTMLElementTagNameMap) =>
    (clazz: Constructor<HTMLElement>) => {
      window.customElements.define(tagName, clazz);
      // Cast as any because TS doesn't recognize the return type as being a
      // subtype of the decorated class when clazz is typed as
      // `Constructor<HTMLElement>` for some reason. `Constructor<HTMLElement>`
      // is helpful to make sure the decorator is applied to elements however.
      return clazz as any;
    };

We do this so that users are forced to add their elements to the HTMLElementTagNameMap:

@customElement('my-element')
class MyElement extends HTMLElement {}

declare global {
  interface HTMLElementTagNameMap {
    'my-element': MyElement;
  }
}

Expected behavior:

The declaration for customElement is emitted as:

export declare const customElement: (tagName: keyof HTMLElementTagNameMap) => (clazz: Constructor<HTMLElement>) => any;

And the example user code has no errors.

Actual behavior:

This is the declaration emit for customElement (see https://unpkg.com/@polymer/lit-element@0.6.1/lib/decorators.d.ts):

export declare const customElement: (tagName: "object" | "a" | "abbr" | "acronym" | "address" | "applet" | "area" | "article" | "aside" | "audio" | "b" | "base" | "basefont" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "center" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "dfn" | "dir" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "font" | "footer" | "form" | "frame" | "frameset" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "isindex" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "listing" | "map" | "mark" | "marquee" | "menu" | "meta" | "meter" | "nav" | "nextid" | "nobr" | "noframes" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "plaintext" | "pre" | "progress" | "q" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "slot" | "small" | "source" | "span" | "strike" | "strong" | "style" | "sub" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "tt" | "u" | "ul" | "var" | "video" | "wbr" | "xmp") => (clazz: Constructor<HTMLElement>) => any;

And the above user code has an error, because extending HTMLElementTagNameMap has no effect.

Playground Link: The Playground doesn’t show declaration files.

Related Issues: This is exactly the issue, but it was closed and locked: https://github.com/Microsoft/TypeScript/issues/21445

[dragomirtitian]

@epeli Don’t know if it helps, but as mentioned in other issues #33117 and #17294 this issue does not impact function and class declarations, only function and class expressions. Maybe you could structure your code to use function/class declarations? It’s hard to propose a more concrete solution without actual code.

@justinfagnani The code in the original ticket also works as expected with a function declaration, not sure you came across the workaround:

export type Constructor<T> = new()=> T

export function customElement(tagName: keyof HTMLElementTagNameMap){
    return (clazz: Constructor<HTMLElement>) => {
      window.customElements.define(tagName, clazz);
      // Cast as any because TS doesn't recognize the return type as being a
      // subtype of the decorated class when clazz is typed as
      // `Constructor<HTMLElement>` for some reason. `Constructor<HTMLElement>`
      // is helpful to make sure the decorator is applied to elements however.
      return clazz as any;
    }
};

Outputs in d.ts file:

export declare type Constructor<T> = new () => T;
export declare function customElement(tagName: keyof HTMLElementTagNameMap): (clazz: Constructor<HTMLElement>) => any;

[apexskier]

I’m seeing this issue as well in a function that accesses keys of a type from a peer dependency.

import { SomethingTypes } from "peer-dependency";

export default {
    foo<S extends keyof SomethingTypes>(bar: MyType<S>) { }
}

becomes

    foo<S extends "key1" | "key2" | "key3"...

This is an issue because it means my package needs to be updated in tandem with the peer dependency.