DEV Community

loading...

WIP: Demystifying JSX namespace

iamandrewluca profile image Andrew Luca ・1 min read

https://www.typescriptlang.org/docs/handbook/jsx.html#intrinsic-elements
https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-0.html
https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts
https://github.com/microsoft/TypeScript/issues/13051
https://www.typescriptlang.org/play/index.html?jsx=2&ssl=1&ssc=1&pln=49&pc=1#code/PQKhAIAECsGcA9wAtwmAWAFBYCYFMBjAGwEMAnPcAOxIFs9YAHEgylAby3GroedfAApAMoANcJ0zduASyoAXPGQBmLSgFEieegokBfLF2lzFKteE3a8CgMKlYsfYanGFS1QMs75AQXnyyGQAjAFdFWAAFMgB7RiV5AE8JI2lwRhjGWAAufQBuFPADbBdZNzNPLW8bJBkiHAoqPwDgsMpJVO4CGrqGnPY9fJLC51TEuPAAGWCycgSAWRIaAHM8HCbA0PCAHhsAGnAIgD5wAF5wRYTBgtLTD0oASQVAqlgZAnWW8OSh1OBgcHwqhCRHkUViOSoIVoQSUBSKBRM7nMj2aLzedhIDg+mwYWwAKsc8PBFFQcI4APJBaCEeTfVLwoaI8oPJ5yV4ELzWeSOdodHAyABufWu0j+4HC8hyQWi0S0ixFAzhRiKDOUISoBHkMmiVGQAAoAJQ5WCopZ08AUeQhMi6gDk93OtHA0BCJvO4BNzyWtsGqvVmu1urmCU5CkN5u4lutushRCIWCKxExjmDofkGIcTmKWAIOrdeEqXNO4C2-IF4GAh0GuZetNoIcLujOW1TjdplZzebrDastnsjmbrd76f7FcOzhrsFleAAdERoks9QXhwbchXgAB+cAAIgddGdrtpJA9pu3WCAA

/** @jsx h */

declare namespace h {
  namespace JSX {
    interface Element {}

    interface ElementClass {}

    interface ElementAttributesProperty {
      props: {};
    }

    interface ElementChildrenAttribute {
      children: {};
    }

    type LibraryManagedAttributes<C, P> = any;

      interface IntrinsicAttributes {
        // defaultProp: number
    }

    interface IntrinsicClassAttributes<T> extends Object {
    }

    interface IntrinsicElements {
      div: {
        // test: boolean
      };
    }
  }
}

function h(): string {
  return 'I am just a string';
}

function MyElement() {
    return null
}
class MyElementClass {}


const element = <div />;
const myElement = <MyElement />
const myElementClass = <MyElementClass />

console.log(element); //? "I am just a string"

Enter fullscreen mode Exit fullscreen mode

Discussion (0)

pic
Editor guide