Exporting Namespaces in ES6+

Question

I come from the Java world and I am trying to create a vanilla JS (ES2018) Application that has types documented in JSDOC, then I am using the TypeScript compiler to get nice definition files that I can bundle with my app. I have only two main files: client.js (contains an default-exported class) and constants.js (a default-exported object with some constants), both under src/. I want to expose these two under a common namespace, so my index.js looks like this:

import XApiClient from 'src/brokers/xtb/x_api_client';
import {Constants} from 'src/brokers/xtb/x_api_constants';

/**
 * @namespace
 * @property {Constants} Constants
 * @property {XApiClient} XApiClient
 */
const XApi = {Constants: Constants, Client: XApiClient};
export default XApi;

This whole project is used then elsewhere via npm+git, but in this new project the Typescript compiler does not recognize the type of XApi.XApiClient. I'm currently desperate enough to be considering quitting coding and going to look after goats in the hills.

Answer 1

At the end I just had to bite the bullet and migrate everything to Typescript, at the end I'm also having an additional step of parsing the JSDOC tags to get the definition files. It seems the errors were due to misconfiguration on tsconfig.

FWIW here is my tsconfig (I use gts as a baseline, also please note that I'm using webpack to pack everything in one file):

{
  "extends": "./node_modules/gts/tsconfig-google.json",
  "compilerOptions": {
    "outDir": "js/",
    "rootDir": "src/",
    "sourceMap": true,
    "moduleResolution": "node",
    "module": "commonjs",
    "target": "ES2018",
    "lib": ["dom","dom.iterable", "ES2018"],
    "noImplicitAny": true,
    "allowSyntheticDefaultImports": true
  },
  "include": ["src/**/*.ts", "test/**/*.ts"],
  "exclude": ["dist", "node_modules"]
}