TypesScript namespace - dynamic definition of fields (JS to TS)

Question

I am trying to convert this JavaScript code from atom/etch to TypeScript without breaking the public API.

It defines both a dom-function and a dom-array of functions (both have the same name dom):

// called by the following loop
function dom (tag, props, ...children) {
// ...
}

const HTML_TAGS = [
  'a', 'abbr'] // ... has more elements though
// similarly SVG-Tags is defined

// finds the array of functions
for (const tagName of HTML_TAGS) {
  dom[tagName] = (props, ...children) => {
    return dom(tagName, props, ...children)
  }
}

for (const tagName of SVG_TAGS) {
  dom[tagName] = (props, ...children) => {
    return dom(tagName, props, ...children)
  }
}

module.exports = dom

What is the equivalent TypeScript version of this?

Other packages use dom like dom.a(tag, props, childern) an example, or using @jsx etch.dom an example

By running dts-gen, I get a namespace called dom which contains all the functions defined inside the for-loop.

export namespace dom {
    function a(props: any, children: any): any;
    function abbr(props: any, children: any): any;
//...
}

Here is my branch.

hackape · Accepted Answer · 2020-03-12 05:51:04Z

1

I assume you're authoring a dom.d.ts type definition file for dom.js.

Namespace is not a proper type for dom. TS namespace in runtime JS is presented as plain object. But dom is both a callable function and an object with extra properties. Thus you should use an interface with callable signature to represent dom in TS.

dom.d.ts

interface EtchElement<T extends string, P = any> {
  tag: T;
  props: P;
  children: any[];
  ambiguous: any[];
}

type EtchCreateElement<T extends string, P> = (props: P, ...children: any[]) => EtchElement<T, P>;

interface EtchDOM {
  <T extends string, P>(tag: T, props: P, ...children: any[]): EtchElement<T, P>;
  div: EtchCreateElement<"div", any>;
  // ... more tags here
}

declare const dom: EtchDOM;

export = dom;

JSX Support

Now if you also intent to support JSX usage, you'll need to read through the official JSX guide first to learn the requirements. I'll highlight this excerption:

Intrinsic elements are looked up on the special interface JSX.IntrinsicElements. [...] if this interface is present, then the name of the intrinsic element is looked up as a property on the JSX.IntrinsicElements interface.

Put together, here's a modest type definition that works:

interface EtchElement<T extends string, P = any> {
  tag: T;
  props: P;
  children: any[];
  ambiguous: any[];
}

type EtchCreateElement<T extends string, P> = (props: P, ...children: any[]) => EtchElement<T, P>;

interface EtchDOM {
  <T extends string, P>(tag: T, props: P, ...children: any[]): EtchElement<T, P>;
  div: EtchCreateElement<"div", JSX.IntrinsicElements["div"]>;
  // ... more tags here
}

declare const dom: EtchDOM;

export = dom;

declare global {
  namespace JSX {
    interface Element extends EtchElement<any, any> {}
    interface IntrinsicElements {
      div: any; // constraint on props of "div" element
    }
  }
}

answered Mar 12, 2020 at 5:51

hackape

20.3k2 gold badges34 silver badges72 bronze badges

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

2 Comments

Amin Ya Over a year ago

Thank you for your detailed answer! Regarding your first assumption, I am trying to write the whole thing in TS: github.com/aminya/etch/tree/type_definitions/lib_src

hackape Over a year ago

@Amin you can merge my definition right into your .ts file. Copy paste, then change the export: const _dom: EtchDOM = dom as EtchDOM; export default _dom;

Collectives™ on Stack Overflow

TypesScript namespace - dynamic definition of fields (JS to TS)

1 Answer 1

JSX Support

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

JSX Support

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related