bug: Ionic 2 starter templates use invalid JS syntax

[mirkonasato]

Type: bug

Ionic Version: 2.x

Platform: all

ionic start my-app --v2 supposedly generates ES6 code by default, requiring a --typescript switch to use typescript instead.

However the *.js files include type annotations, so (even putting decorators aside) they're not valid ES6, they really are TypeScript files despite the *.js extension. See app.js in the ionic2-starter-tabs and ionic2-starter-sidemenu.

This raises the bigger question of whether defaulting to ES6 is a good choice. Injecting Angular 2 services without type annotations is not straightforward. Personally I would rather see the Ionic CLI generate TypeScript projects by default, or even as the only choice.

[tlancina]

Thanks for the issue! The constructor parameter types have been removed in favor of decorators for now, so they are at least not TypeScript.

Regardless of whether it is standard or not, we would like to support the scenario of not having to add types. For new users, there is already quite a lot of overhead and TypeScript is another thing to learn, so we would like it to remain opt-in.

That being said, pretty much all of the examples and documentation out there for Angular2 are in TypeScript, so in a sense we are swimming against the current on this, which may actually be worse for new users.

As of this exact moment, we will be supporting both, but this is something we have discussed internally quite a bit and are open to defaulting to TypeScript if the data suggests that it is the better decision.

[manucorporat]

+1 for typeScript as default option.

[mirkonasato]

constructor(@Inject(Platform) platform) looks nice, and I agree it would be easier to learn (and teach as well, in my case) without the added complexity of TypeScript, especially around configuring type definitions for third party libraries.

Unfortunately Babel will throw a SyntaxError on parameter decorators - see e.g. babel-plugin-angular2-annotations/issues/16. So it still only works with the TypeScript compiler, and that's not ideal because you can't really tell if you're using "pure" JavaScript or accidentally mixing in some TypeScript-specific features. I guess the root of the problem here is that decorators are still experimental.

Also worth noting that in the angular.io docs you can choose TypeScript (default), JavaScript, or Dart, and JavaScript shows you ES5 code. There are no ES6 examples.

[tlancina]

We've been keeping an eye on https://phabricator.babeljs.io/T1301 for some time now. As soon as there is an easy way to use Babel we will (and have) do it, but if you're building an Angular2 app and you don't want to have weirdly verbose syntax like

@Reflect.metadata('parameters', [[new AttributeMetadata()], [new OptionalMetadata()]])

or

  constructor(http) {
    this.http = http;
  }

  static get parameters() {
    return [[Http]];
  }

(which we don't want for starter projects) then the reality is you have to use the TypeScript compiler, which I agree is less than ideal, but is still not a strong enough case (yet) for us to force types on everyone.

[jgw96]

+1 for typescript by default, makes angular 2 syntax much nicer in places, like constructors. And it's not like you absolutely have to use types anyways.

[tlancina]

Just an update, we've removed the parameter decorators in favor of the class variable parameters: https://github.com/driftyco/ionic-conference-app/blob/master/app/app.js#L17-L19 and moved to Babel transpilation. After discussing it, we believe the wonky syntax is worth the issues avoided by removing the TypeScript compiler from the equation.

Just a note, Babel 6 is ridiculously slow if you install your node_modules with npm2, I highly recommend upgrading to npm3. If this becomes an issue for too many people, we will look into downgrading to Babel 5 for the time being, but it would be nice to recommend npm3 in general because of the way it handles peerDependencies.

Going to close this, but please feel free to comment if you have questions/concerns, thanks!

[mirkonasato]

That makes sense if the hope is that Babel will add support for parameter decorators soon.

As it is now you might as well not use decorators at all, so at least it truly is standard ES6. Something like

let appMetadata = new App({
  template: '<ion-nav [root]="rootPage"></ion-nav>',
  config: {}
});
export class MyApp {
  constructor(platform) {
    this.rootPage = TabsPage;
    platform.ready().then(() => { /*...*/ });
  }
}

MyApp.annotations = [appMetadata];
MyApp.parameters = [[Platform]];

Just my opinion anyway.

[mirkonasato]

Looks like the babel-plugin-angular2-annotations now supports parameter decorators (again).

[ranisalt]

Bumping this issue since as of now, even without the --ts flag, ionic start generates typescript files including .ts extension. How can I rip typescript off the project?

[jgw96]

@ranisalt Hello! So because of all the advantages that Typescript gives Ionic 2 developers we have decided to go all in with Typescript. This means that we no longer provide JavaScript starters or JavaScript docs. If you would like to read more about the awesome advantages that TypeScript gives you you can check out our resources article here Thanks for using Ionic!

[ranisalt]

Fine, it's just that the documentation still says it's JS and you have to use --ts to enable TS and I got very confused.

Also there's an entry on ionic.config.json that says "typescript": true and it could be removed then.

[jgw96]

@ranisalt Ahh, yep i see that on this page http://ionicframework.com/docs/v2/cli/generate/. I will make sure that gets fixed, sorry about that. Also that line in the ionic.config.json file is there for backwards compatibility with older versions of the ionic beta cli and will be removed eventually. Thanks!