error importing default function from ambient module

[bcherny]

lib:

https://www.npmjs.com/package/textarea-caret

typing (in textarea-caret.d.ts):

declare module "textarea-caret" {
  export default function getCaretCoordinates(
    element: HTMLElement,
    position: number,
    options?: {debug?: boolean}
  ): {left: number, top: number}
}

consuming it (in app.ts):

import * as getCaretCoordinates from 'textarea-caret'
getCaretCoordinates(element, 42)

the function call fails to compile, throwing Error TS2349: Cannot invoke an expression whose type lacks a call signature.

changing the import to import getCaretCoordinates from 'textarea-caret' fixes the issue.

per the es6 module syntax, it seems that the original version is the correct one, right?

[blakeembrey]

@bcherny That type definition is incorrect according to the source code, it should be export = getCaretCoordinates. Also, import * as <name> imports the exports from the module, not the default. For importing the default, the syntax is import x from '...'.

Once you're using export = syntax, you need to import with the equivalent import statement of import x = require('...').

[bcherny]

Also, import * as imports the exports from the module, not the default. For importing the default, the syntax is import x from '...'.

thanks for clarifying - this makes sense!

Once you're using export = syntax, you need to import with the equivalent import statement of import x = require('...').

this syntax is a bit awkward, since it's using the same keywords as es6, but with different meaning.

[blakeembrey]

Yes, I know 😄 But there's no equivalent for module.exports = in ES6 syntax, so the ES5 export/import can still be used in situations like these. You could, of course, use the raw require APIs in Node, Webpack, etc. but then TypeScript doesn't know to also import type information. So while const x = require('...') would fallback onto your module loader, import x = require('...') works with TypeScript to emit the correct import and import type information.

[bcherny]

actually, with the import a from 'b' syntax, i'm having an issue that typescript compiles import a from 'b' to b.default.a. the problem is, b doesn't have a property called default (a is assigned to b directly).

it's a 3rd party module - what do you suggest?

[blakeembrey]

Use import x = require('...'), it's the issue I mentioned above. import x from '...' is for importing the ES6 default, but for module.exports parity you should use export = and import =.

[bcherny]

the import compiles, but the export fails to compile. i also can't seem to find a relevant example anywhere.

new import:

import getCaretCoordinates = require('textarea-caret')

new export:

declare module 'textarea-caret' {
  export = function getCaretCoordinates( // syntax appears to be wrong
    element: HTMLElement,
    position: number,
    options?: {debug?: boolean}
  ): {left: number, top: number}
}

[PAStheLoD]

I know this is an old issue, and probably solved, but if maybe the following is helpful to others.

declare module 'textarea-caret' {
    function getCaretCoordinates(...): { left: number, top: number }

    export = getCaretCoordinates;
}

[mrdulin]

@blakeembrey @PAStheLoD Thanks. I have this issue too. It works.

Is there some documents about How to write a typescript definition file? You know, for all situations. I read the typescript official documents about the definition files part. But I think the doc is not easy to understand.
Because there is no examples to explain it and lacks of context.

I know what's cmd, amd, umd and global script

But I am confused about when to use export = , export as namespace xxx, declare namespace xxx. And, sometimes, there is no declare keyword. Just some signatures of function and interface.

If there is a repo which has every situation definition file demos, it will be nice. I will star it.