Will I be able to use Typescript with angular 2.0, or should I use Traceur?

As I asked in this post I was wanting to know how compatible Typescript is with ES6, which Typescript 2.0 plans to support:

Should I use Traceur instead of Typescript to target ES5 but be ready for ES6

However as I read this post by google it appears that Traceur is used pretty heavily in the upcoming Angular 2.0.

So I’m trying to decide on whether to go with typescript or Traceur to be better ready for Angular 2.0 (my team will have less refactoring).

typescript angular2.d.ts error “Expecting new line or semicolon”

my latest WebStorm10.0.2 raise Error about "angular2.d.ts" that “Expecting new line or semicolon.” in line 15-19 and line 32-37.

Angular2 team make a mistake at the 5min start example? I can’t believe, it must be my mistake.

So:

I clone step by step follow the “5min quick start of angular2″(https://angular.io/).

I have already move ‘index.html’ and ‘app.ts’ from ‘complete’ to the Base-Path.

I have also change my WebStorm10.0.2 Compiler version to custom directory which contains typescriptService.js.

Still not work…

My typescript version is 1.5Beta.

interface List<T> extends Array<T> {
}
interface Type {}

declare module "angular2/angular2" {
  function bootstrap(appComponentType: any): void;
  function Component({
    selector,
    properties,
    hostListeners,
    injectables,
    lifecycle,
    changeDetection
    }:{
      selector:string,
      properties?:Object,
      hostListeners?:Object,
      injectables?:List<any>,
      lifecycle?:List<any>,
      changeDetection?:string
    });

  function View({
      templateUrl,
      template,
      directives,
      formatters,
      source,
      locale,
      device
    }: {
      templateUrl?: string,
      template?: string,
      directives?: List<Type>,
      formatters?: List<Type>,
      source?: List<any>,
      locale?: string,
      device?: string
    });
  function For();
  function If();
}

Parent and Ancestor annotation in ts

Trying to add the Parent and Ancestor annotations to TypeScript typings so I did:

declare module "angular2/src/core/annotations_impl/visibility"{
   function Parent():(target: any) => any;
   function Ancestor():(target: any) => any;
}

Using either of the annotations throws "TypeError: decorator is not a function".

I am using alpha 22.

Why do I get this error?

Here is a sample:

/// <reference path="typings/angular2/angular2.d.ts" />
import {Component,View,bootstrap} from "angular2/angular2"
import {Ancestor,Parent} from "angular2/src/core/annotations_impl/visibility"

@Component({
    selector:"c"
})
@View({
    template:`<p>{{app.message}}</p>`
})
class C{
    app:App;
    constructor(@Ancestor() app:App){
        this.app = app;
    }
}

@Component({
    selector:"app"
})
@View({
    template:`<c></c>`,
    directives:[C]
})
class App{
    message = "test";
}
bootstrap(App);

HTML:

<html>
  <head>
    <title>Angular 2 Quickstart</title>
    <script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.89/traceur-runtime.js"></script>
    <script src="https://jspm.io/system@0.16.7.js"></script>
    <script src="https://code.angularjs.org/2.0.0-alpha.22/angular2.dev.js"></script>
  <body>
    <!-- The app component created in app.ts -->
    <app></app>
    <script>
      System.import('app');
    </script>
  </body>
</html>

TypeScript Definition manager error on query

Following the Angular 2 5 minutes quickstart, I wanted to install
Angular 2 definitions (for TypeScript compiler and my IDE) provided by DefinitelyTyped using their package manager, tsd.

So I typed this command on a terminal

tsd query angular2 --action install

And all I got is the following error

>> tsd 0.5.7
_http_client.js:73
    throw new TypeError('Request path contains unescaped characters.');
          ^
TypeError: Request path contains unescaped characters.
    at new ClientRequest (_http_client.js:73:11)
    at TunnelingAgent.exports.request (http.js:49:10)
    at TunnelingAgent.createSocket (/usr/local/lib/node_modules/tsd/node_modules/request/node_modules/tunnel-agent/index.js:117:25)
    at TunnelingAgent.createSecureSocket [as createSocket] (/usr/local/lib/node_modules/tsd/node_modules/request/node_modules/tunnel-agent/index.js:184:41)
    at TunnelingAgent.addRequest (/usr/local/lib/node_modules/tsd/node_modules/request/node_modules/tunnel-agent/index.js:80:8)
    at new ClientRequest (_http_client.js:154:16)
    at Object.exports.request (http.js:49:10)
    at Object.exports.request (https.js:136:15)
    at Request.start (/usr/local/lib/node_modules/tsd/node_modules/request/request.js:582:30)
    at Request.end (/usr/local/lib/node_modules/tsd/node_modules/request/request.js:1226:28)

After some search, I check my settings (npm, tsd and git) for proxy, which is well set so it is not that. I’m using tsd version 0.5.7.

Have you got any idea on how to fix this ?

Edit 05/18:

A simple query like tsd query angular2 returns me the same error, and tsd install angular2 is not a valid command, calling it returns me result of tsd --help telling me that I must run tsd query [pkgname] --action insall to install a package.

Edit upgrading to 0.6.0:

After upgrading to version 0.6.0 that had just been released, no problem anymore.

Both tsd install [pkg] and tsd query [pkg] --action install work like a charm.

Angular 2 Directives and its attributes

I have a simple app that fetches data from sample API. Trying to figure out whats wrong when defining a directive as a component:

app.ts

import {Component, View, bootstrap, For} from 'angular2/angular2';
import {ArticlesSvc} from 'services/articlesSvc';
import {ArticleItem} from 'directives/ArticleItem';

@Component({
  selector: 'main-app',
  injectables: [ArticlesSvc]
})

@View({
  template: `<p *for="#post of posts">{{ post.title }} <article-item [body]="post.body"></article-item></p>`,
  directives: [For,ArticleItem]
})

class MainComponent {
  posts: Array<string>;

  constructor(articlesSvc: ArticlesSvc) {
    this.posts = [];

    articlesSvc.get('http://jsonplaceholder.typicode.com/posts').then((data) => {
       this.posts = data;
    });

  }

}

bootstrap(MainComponent);

And here is ArticleItem component:

import {Component, View} from 'angular2/angular2';

@Component({
  selector: 'article-item',
  properties: ['body']
})

@View({
  template: `<p>{{ body }}</p>`
})

export class ArticleItem {
    body:string;
}

For some reason, it gives me Unexpected number error. How to properly connect these two components? And is it a proper way to define a sub-components with its own view?