CODEWITHSUNDEEP
typescriptimportexportdefault
Cequiel
Cequiel

Reputation: 3777

typescript: import default export from module

I have the following definition type file:

// index.d.ts
declare module 'Transformer' {
  class EditableElement {
      constructor(target: SVGPoint);
  }
  export = EditableElement;
}

And I want to import EditableElement. But when I write the following line:

import {EditableElement} from 'Transformer';

I get the next error:

Module "Transformer" resolves to a non-module entity and cannot be imported using this construct.

How could I import the EditableElement class? Actually, I just want to make use of that class. I don't want the import directive to have a collateral effect in my code. I just want use it :'(

Upvotes: 26

Views: 58683

Answers (4)

unional
unional

Reputation: 15589

This falls into ES6 / CommonJS interop.

My recommendation is to not relying on interop and use the old syntax instead:

const EditableElement = require('Transformer')

If you NEED to target es6/es2015, then you can do:

import * as EditableElement from 'Transformer'

// with `allowSyntheticDefaultImports`
import EditableElement from 'Transformer'

UPDATE: with [email protected] released, you can now do import EditableElement from 'Transformer' directly.

Turn on esModuleInterop in your tsconfig.json

Upvotes: 36

Dean Martin
Dean Martin

Reputation: 1273

I like to think of this in the following way.

Scenario 1 - Export / import explicit things (Not a default export. This results in the need for wrapping your import name with '{}').

// Export (fileX)
export const something = 'hello world';

// Import (fileY)
import { something } from 'fileX';

Scenario 2 - Export / import a default (This results in no need for wrapping your import name with '{}'). The name that you choose, 'something' below, would be the alias for accessing your import.

// Export (fileX)
export default 'hello world';

// Import (fileY)
import something from 'fileY';

Upvotes: 0

Bogdan Surai
Bogdan Surai

Reputation: 1275

Do you have reference path like that?

 /// <reference path="*/**/myModules.d.ts" />
 import * as m from "SomeModule";

Upvotes: 1

Bogdan Surai
Bogdan Surai

Reputation: 1275

declare module is deprecated to use in your own typescript modules.You have to use either export or export default. 

export class EditableElement {
      constructor(target: SVGPoint);
  }

For import you can use either import {EditableElement} from 'Transformer'; or import * as EditableElement from 'Transformer';

Upvotes: 1

Related Questions