Typescript export named default of module

Question

I have just converted my React project from javascript to typescript, and I have many instances where I'll have an index file in a directory and export all the functions/components from the respective directory. For example, the directory might look like this:

components
|--index.js
|--ComponentA
|--ComponentB
|--ComponentC
|...

And index.js would contain:

export ComponentA from './ComponentA'
export ComponentB from './ComponentB'
export ComponentC from './ComponentC'
...

Which I believe babel converts to:

export { default as ComponentA } from './ComponentA'
...

I've converted all .js/.jsx files to .ts/.tsx and I'm using webpack with babel-loader to compile these files. Everyting runs just fine, but I get eslint errors in my editor because typescript doesn't understand these exports. Here's my tsconfig.json file:

{
    "compilerOptions": {
        "baseUrl": ".",
        "outDir": "./dist/",
        "sourceMap": true,
        "noImplicitAny": false,
        "module": "es6",
        "target": "es6",
        "jsx": "preserve",
        "lib": ["es5", "es6", "dom"],
        "esModuleInterop": true,
        "allowJs": true,
        "moduleResolution": "node",
        "allowSyntheticDefaultImports": true
    },
    "include": [
        "./src/**/*"
    ],
    "types": [
    "@reachify/graphql-schema"
    ],
    "awesomeTypescriptLoaderOptions": {
        "reportFiles": [
            "./src/**/*"
        ]
    }
}

And .eslintrc.json:

{
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "env": {
    "browser": true
  },
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 2019,
    "sourceType": "module"
  },
  "plugins": [
    "@typescript-eslint/eslint-plugin"
  ]
}

How can I get typescript to understand export Component from './Component?

Does this answer your question? TypeScript export imported interface — c1moore
I understand I can just change the code to make it typescript compatible, but I'm wondering if there's a way I can maybe modify my tsconfig to understand my method of exporting. — Ryan McClure
typescript doesn't support export Thing from './place'. The closest you can get is export { default as Thing } from './place' — Dan
The export default from syntax proposal is currently in stage 1, so not available in TS yet. — ford04

Ryan McClure Ryan McClure · Accepted Answer · 2019-12-22T16:21:16

As mentioned in the comments, it looks like this is still a stage 1 feature and not yet implemented in Typescript.

Typescript export named default of module

1 Answers