Typescript: [Feature request] support `from 'module' import xxx`

[NewFuture]

Suggestion

support from 'module' import xxx

As the ES6 import Statements, the module is always at the end of the statements like this:

import {xxx} from 'module';

If we can declare the module name at first, it will be better for typing and IntelliSense.
Just like this:

from 'module' import {xxx};

After compile，the results are the same.
Could we support it like this in TypeScript?

Examples

before(TypeScript)

from 'module' import {xxx};

after(JavaScript)

import {xxx} from 'module';

Checklist

My suggestion meets these guidelines:

• [x] This wouldn't be a breaking change in existing TypeScript/JavaScript code
• [x] This wouldn't change the runtime behavior of existing JavaScript code
• [x] This could be implemented without emitting different JS based on the types of the expressions
• [x] This isn't a runtime feature (e.g. library functionality, non-ECMAScript syntax with JavaScript output, etc.)
• [x] This feature would agree with the rest of TypeScript's Design Goals.

[danvk]

@NewFuture The TS team generally doesn't implement syntax that isn't standard ECMAScript.

Autocomplete of imports is really nice, though. I usually wind up writing:

import {} from 'module';

and then go back inside the {} to get autocomplete.

[NewFuture]

@danvk yes, but

TypeScript is a superset of JavaScript.

The second syntax will be much better for coding, just keep going forward with autocompletion.

I prefer ECMAScript to implement it😄

import React,{Component} from 'react';
// go back
// then go next line

from 'react' import React,{Component};
// continue

[lll000111]

My IDE (WebStorm) has "live templates with variables" that can be used to insert the whole import statement line all at once, but then place the cursor immediately inside the {} Examples (not mine, just found the link to be able to post an example): https://medium.com/@drapegnik/useful-javascript-react-live-templates-for-webstorm-8a6c70aee207 I'm sure there's a plugin for VScode somewhere out there too.

While I might agree (have not really thought about it because it's not a big deal) that maybe the order is not the best, I think using an IDE feature is a much better solution than trying to come up with non-standard syntax.

As it is, right now unless you use two or three special TS features (I think namespaces, enums, and export=/import=require()) you can just change the filename extension and apart from the type annotations, TS == ECMAscript. Please let's keep it that way. When I switched from Flow types to TS (not because TS is better - as far as types are concerned, it isn't - but because I prefer to stay in the mainstream regardless of which product is "better") all I did was rename the files .js => *.ts and change a few types, not a single code change. That compatibility is a *good thing™ That is why the Babel TypeScript plugin is possible: It only removes type annotations and that's it, transpilation of code and imports/exports is left to the usual Babel plugins.

Compatibility is much more important than some very tiny convenience (I myself never even noticed a need) that an IDE can already provide.

[kitsonk]

Duplicate of #3127, #2370, #2371 (and possibly others)

This has been discussed and closed MANY times before.

[NewFuture]

thanks @kitsonk