Import suggestion/fix should respect ES module target

[OliverJAsh]

TypeScript Version: 3.4.1

Search Terms: import suggestion fix module esnext es modules target assignment

Code

// ./typings.d.ts
declare module 'foo' {
    const _default: number;
    export = _default;
}

// ./tsconfig.json
{
    "compilerOptions": {
        "module": "esnext"
    }
}

// main.ts
foo;

When I activate the import suggestion/fix for foo:

Expected behavior:

import * as foo from "foo";

foo

Actual behavior:

// Error:
// Import assignment cannot be used when targeting ECMAScript modules. Consider using 'import * as ns from "mod"', 'import {a} from "mod"', 'import d from "mod"', or another module format instead.
import foo = require("foo");

foo

[andrewbranch]

👍 I've been hit by something similar myself—when using JS with @ts-check and CommonJS, auto-imports give me ES6 module imports.

[rpgeeganage]

@DanielRosenwasser ,
May I give a try to fix this?

[DanielRosenwasser]

Sure! Here's what I think is the expected behavior for an export =

• esModuleInterop/allowSyntheticDefaultImport is on: import foo from "foo"
• Otherwise, if the entity is an object type that's not callable/constructable, import * as foo from "foo";
• Otherwise, import foo = require("foo")

Even though that last one will cause an error in es2015+ module targets.

[rpgeeganage]

@DanielRosenwasser
Thanks a lot. I will work on this.

[rpgeeganage]

@DanielRosenwasser ,
Is getTargetOfImportClause method (at line 2024) in https://github.com/microsoft/TypeScript/blob/master/src/compiler/checker.ts
Or
is getHelperExpressionForImport in https://github.com/microsoft/TypeScript/blob/master/src/compiler/transformers/module/module.ts#L750
handling this ?

[DanielRosenwasser]

I'm unfortunately not familiar enough with that part of the codebase but I think the first one is what you want.

[rpgeeganage]

@DanielRosenwasser ,
Thanks. I'll look into it.

[rpgeeganage]

@DanielRosenwasser ,
I'm sorry that I could find the location where this causes. Can you give me some more details if possible? Thanks a lot.

[andrewbranch]

@rpgeeganage if you’re still interested, I think the place to look is around here:

TypeScript/src/services/codefixes/importFixes.ts

Lines 79 to 82 in a150d55

	case ImportKind.Equals:
	case ImportKind.Namespace:
	Debug.assert(entry.namespaceLikeImport === undefined || entry.namespaceLikeImport.name === symbolName);
	entry.namespaceLikeImport = { importKind, name: symbolName };

Otherwise, I’ll probably circle around to this next week.