Skip to content

Request for alternative import syntax to improve auto-complete experience #2371

Closed

Description

Consider the following import statement:

import { int, float } from '../lang';

With auto-suggest I need to start this by typing:

import {} from '../lang';

Then I can go back inside the {} and get auto-suggestions.

It would be very nice if TypeScript supported an alternate syntax for the same expression that was more conducive to auto-complete features.
For example:

import from '../lang' { int, float };

This doesn't introduce any confusion or ambiguity about the meaning of the expression, either to the transpiler or the human reader, yet it provides a time-saving experience to the author when taking advantage of auto-complete features. I can now simply type the expression naturally from left to right, and get auto-suggestions/completions for both the from '...' and {}.

There are other cases where an alternate syntax would be beneficial. I will update this issue as I compile a list. Hopefully others will comment with suggestions as well.

Activity

  1. danquirk commented on Mar 16, 2015

    @danquirk
    Member

    You're right that this is an awkward piece of syntax for tooling, but new alternate syntax is not the solution you want here. There is a simple and easy solution that doesn't require altering the language and diverging from ES6 syntax though: code snippets. It would look sort of like this:

    importsnippet

    When you type 'imp' you should get a completion that is a snippet for the right import syntax. After committing the snippet (via enter, tab, space, etc) the cursor should be placed on the RHS to type the actual module name. After committing that text (via enter or tab) the cursor jumps back to the import names where you now can get completion suggestions since the module name has been written.

  2. added
    SuggestionAn idea for TypeScript
    DeclinedThe issue was declined as something which matches the TypeScript vision
    Too ComplexAn issue which adding support for may be too complex for the value it adds
    on Mar 16, 2015
  3. gregdorval commented on Mar 17, 2015

    @gregdorval
    Author

    This is a good example of the difference between the developer mindset and
    the designer mindset.

    The developer comes up with a technology solution that assists the user in
    adapting to the product.

    The designer aims to adapt the technology to the natural processes of the
    user.

    In this case the target users are themselves developers, so you might think
    it's not a big deal. However, it actually results in one decision, from a
    developer mindset, sending the message to thousands of other developers
    that this mindset is the best way to address the user experience.

    I'm sure we could debate this until we are old and grey, but consider the
    difference between the user satisfaction numbers of iPhones vs Android
    phones. Which of the user experiences is driven almost entirely from the
    designer mindset? (Yeah, I know, TypeScript is a Microsoft project...
    That's why I left them out of the analogy)

    I'll add the disclaimer that I've spent my entire career as a designer who
    every once in a while learns a new development technology in order to get a
    PoC in front of clients or investors. I do recognize the progress being
    made in making it quick and relatively painless to develop robust and
    impressive solutions, however I remain constantly reminded that the
    industry is still driven by the notion that code in hand is more valuable
    than taking the time to understand who the code is being written for.

    Take my opinions with as many grains of salt necessary. It's my intention
    for this to be constructive as opposed to insulting.

    On Monday, March 16, 2015, Dan Quirk notifications@github.com wrote:

    You're right that this is an awkward piece of syntax for tooling, but new
    alternate syntax is not the solution you want here. There is a simple and
    easy solution that doesn't require altering the language and diverging from
    ES6 syntax though: code snippets. It would look sort of like this:

    [image: importsnippet]
    https://cloud.githubusercontent.com/assets/7121557/6675184/1c9ed450-cbdc-11e4-9906-d314542de565.gif

    When you type 'imp' you should get a completion that is a snippet for the
    right import syntax. After committing the snippet (via enter, tab, space,
    etc) the cursor should be placed on the RHS to type the actual module name.
    After committing that text (via enter or tab) the cursor jumps back to the
    import names where you now can get completion suggestions since the module
    name has been written.

    —
    Reply to this email directly or view it on GitHub
    #2371 (comment)
    .

    Greg Dorval

    https://plus.google.com/+GregDorval https://twitter.com/gregdorval
    https://twitter.com/gregdorval

    http://navcanada.ca

    https://twitter.com/gregdorval https://plus.google.com/+GregDorval/posts
    http://ca.linkedin.com/in/gregdorval
    https://mail.google.com/mail/u/0/greg.dorval

  4. danquirk commented on Mar 17, 2015

    @danquirk
    Member

    We, and especially I, most definitely take the user experience seriously. You'll find more than a few comments from me throughout our issue tracker on where we're failing on that front (whether in the language itself or in the tooling) and what must be fixed. In this case you're simply not understanding the true costs and trade offs of the two proposed solutions. We cannot change the ES6 module syntax, that ship has sailed, it is not under our control, we can only provide another piece of input to the larger committee (which we have/did/do). We have to accept that the majority of future JavaScript brought to TypeScript will use this syntax that you do not like (for the record, I do not like it either, it clearly was designed without prioritizing the tooling related featured). So even if we take your proposed solution, the majority of people will not be able to benefit from it because they have tons of existing code that uses the JavaScript style and will want to remain consistent. On the other hand, by introducing our own syntax we risk future incompatibilities with JavaScript if they ever do change/augment their syntax, we require JavaScript developers to learn a new syntax, and we diverge further from JavaScript. This actually makes the user experience worse by having two pieces of different syntax that do identical things (particularly the initial on boarding experience for new TypeScript users), which is precisely why most languages try to avoid doing that sort of thing.

    We very rarely alter expression level syntax like you're proposing, and that's for good reasons, not because we don't prioritize the quality of the user experience. TypeScript is intended to be a typed superset of JavaScript. If we repeatedly alter expression level syntax for relatively minor gains then we will fail to maintain that design and end up with a very different language that simply compiles to JavaScript. The proposal I've shown above is exactly the type of UX developers are used to in a variety of different IDEs in order to speed up writing out boilerplate code. Snippets like this have been a frequently requested feature in TypeScript specifically since we didn't support them as well as other Visual Studio languages and other editors.

    We are not an iPhone app. We cannot simply make changes and break that functionality later if we decide we don't like it. Likewise any change we make today risks making any future designs harder for ourselves if we use up the valuable, limited design space that syntax and semantics affords us. The language decisions we make we live with forever and impact our future decisions forever.

    Yes, in an ideal world the ES6 syntax would be closer to what you're proposing and autocomplete would 'just work' without any extra tooling support. In reality we have to work with what's there and the snippet experience I showed above is a pretty solid solution that you'll find is actually quite natural and does not require any significant change in workflow or mental model.

  5. RyanCavanaugh commented on Mar 17, 2015

    @RyanCavanaugh
    Member

    See also #2370 for discussions of how no one really likes the ES6 module import/export syntax. It's frustrating for us, too.

    The whole problem of how syntax influences tooling is one the team is intimately aware of -- one reason C# LINQ syntax moved the from clause to the front of the expression (rather than in the middle like SQL or Python does) was so that the tooling experience could be great. It's just a trade-off TypeScript has to make in order to be more JavaScript and less its own language by itself.

  6. gregdorval commented on Mar 17, 2015

    @gregdorval
    Author

    I completely understand that we don't operate in an ideal world where we
    have the freedom to always do things the way we would like. I didn't mean
    to imply that any of the TypeScript team or contributors are not
    considering the user experience or make any kind of less intelligent
    decisions than I could or would. My reply did sound pretty critical and I
    apologize for that. I understand that we all have to work within the
    constraints of legacy systems, standards and mindsets; even as we strive
    for delivering a better experience. Throughout my 17 years designing
    software, every end product has always been a slight (or sometimes
    significant) bastardization of my design, always due to various
    constraints. The good news is that the degree of bastardization has been
    diminishing, which is a good indication of progress.

    So let me take this opportunity to commend the TypeScript team for making
    significant progress in helping people like me achieve our design &
    development goals faster, cheaper and with significantly fewer bugs.

    My comments may come across as harsh or abrasive but please know that I am
    very grateful for the work that everyone in the open source community
    continues to put in.

    I'd rather be part of the solution than the guy standing on the sideline
    complaining yet doing nothing about it. As I learn and work on
    implementing my designs with these new technologies I'd like to contribute
    back to the community any way I can.

    Greg Dorval

    https://plus.google.com/+GregDorval https://twitter.com/gregdorval
    https://twitter.com/gregdorval

    http://navcanada.ca

    https://twitter.com/gregdorval https://plus.google.com/+GregDorval/posts
    http://ca.linkedin.com/in/gregdorval
    https://mail.google.com/mail/u/0/greg.dorval

    On 17 March 2015 at 11:09, Ryan Cavanaugh notifications@github.com wrote:

    See also #2370 #2370 for
    discussions of how no one really likes the ES6 module import/export syntax.
    It's frustrating for us, too.

    The whole problem of how syntax influences tooling is one the team is
    intimately aware of -- one reason C# LINQ syntax moved the from clause to
    the front of the expression (rather than in the middle like SQL or Python
    does) was so that the tooling experience could be great. It's just a
    trade-off TypeScript has to make in order to be more JavaScript and less
    its own language by itself.

    —
    Reply to this email directly or view it on GitHub
    #2371 (comment)
    .

  7. NoelAbrahams commented on Mar 17, 2015

    @NoelAbrahams

    Dan Quirk (@danquirk), is anything being done about #312?

  8. danquirk commented on Mar 17, 2015

    @danquirk
    Member

    I don't know where it currently lies in our scheduled work but it is definitely not forgotten about. The import one in particular was the first thing I thought about when shown a demo of typing the ES6 module syntax.

  9. NoelAbrahams commented on Mar 17, 2015

    @NoelAbrahams

    It would be nicer to have it sooner than later - especially as people start converting from the legacy import statements to the new syntax.

  10. changed the title [-]Request for alternative syntax to improve auto-complete experience[/-] [+]Request for alternative import syntax to improve auto-complete experience[/+] on Sep 21, 2015
  11. locked and limited conversation to collaborators on Jun 18, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    DeclinedThe issue was declined as something which matches the TypeScript visionSuggestionAn idea for TypeScriptToo ComplexAn issue which adding support for may be too complex for the value it adds

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions