https://angular.io/docs/ts/latest/quickstart.html

.jscsrc

{
  "preset": "google",
  "jsDoc": {
    "checkAnnotations": "jsdoc3",
    "checkParamExistence": true,
    "checkParamNames": true,
    "requireParamTypes": true,
    "checkRedundantParams": true,
    "checkReturnTypes": true,
    "checkRedundantReturns": true,
    "requireReturnTypes": true,
    "checkTypes": "strictNativeCase",
    "checkRedundantAccess": true,
    "leadingUnderscoreAccess": "protected",
    "enforceExistence": {
      "allExcept": ["exports"]
    },
    "requireHyphenBeforeDescription": true,
    "requireNewlineAfterDescription": true,
    "requireDescriptionCompleteSentence": true,
    "requireParamDescription": true,
    "requireReturnDescription": true
  }
}

.jshintrc

{
  "bitwise": true,
  "bitwise": true,
  "browser": true,
  "curly": true,
  "eqeqeq": true,
  "esversion": 6,
  "forin": true,
  "freeze": true,
  "futurehostile": true,
  "iterator": false,
  "latedef": true,
  "noarg": true,
  "nocomma": true,
  "nonbsp": true,
  "nonew": true,
  "notypeof": false,
  "node": true,
  "shadow": false,
  "singleGroups": true,
  "strict": "implied",
  "undef": true,
  "unused": true,
  "varstmt": true,
  "globals": {
    "wrap": true,
    "unwrap": true,
    "Polymer": true,
    "Platform": true,
    "page": true,
    "app": true
  }
}

app.component.ts

import {Component} from 'angular2/core';
import {Hero} from './hero';
import {HeroDetailComponent} from './hero-detail.component';
import {HeroService} from './hero.service';
import {OnInit} from 'angular2/core';

@Component({
    directives: [HeroDetailComponent],
    providers: [HeroService],
    selector: 'my-app',
    styles: [`
       .heroes {list-style-type: none; margin-left: 1em; padding: 0; width: 10em;}
      .heroes li { cursor: pointer; position: relative; left: 0; transition: all 0.2s ease; }
      .heroes li:hover {color: #369; background-color: #EEE; left: .2em;}
      .heroes .badge {
        font-size: small;
        color: white;
        padding: 0.1em 0.7em;
        background-color: #369;
        line-height: 1em;
        position: relative;
        left: -1px;
        top: -1px;
      }
      .selected { background-color: #EEE; color: #369; }`,
    ],
    template: `
    <h1>{{title}}</h1>
    <h2>My Heroes</h2>
    <ul class="heroes">
      <li *ngFor="#hero of heroes"
      [class.selected]="hero === selectedHero"
      (click)="onSelect(hero)">
        <span class="badge">{{hero.id}}</span> {{hero.name}}
      </li>
    </ul>
    <my-hero-detail [hero]="selectedHero"></my-hero-detail>
    `,
})
export class AppComponent implements OnInit {
    public title: string = 'Tour of Heroes';
    public hero: Hero = {
        id: 1,
        name: 'Windstorm',
    };
    public heroes: Hero[];
    public selectedHero: Hero;

    constructor(private _heroService: HeroService) {

    }

    public onSelect(hero: Hero): void {
        this.selectedHero = hero;
    }

    public ngOnInit(): void {
        this.getHeroes();
    }

    private getHeroes(): void {
        this._heroService.getHeroesSlowly().then((heroes: Hero[]) => this.heroes = heroes);
    }
}

boot.ts

import {bootstrap}    from 'angular2/platform/browser'
import {AppComponent} from './app.component'

bootstrap(AppComponent);

hero-detail.component.ts

import {Component} from 'angular2/core';
import {Hero} from './hero';

@Component({
    inputs: ['hero'],
    selector: 'my-hero-detail',
    template: `
    <div *ngIf="hero">
        <h2>{{hero.name}} details!</h2>
        <div><label>id: </label>{{hero.id}}</div>
        <div>
            <label>name: </label>
            <input [(ngModel)]="hero.name" placeholder="name"/>
        </div>
    </div>
    `,
})
export class HeroDetailComponent {
    public hero: Hero;
}

hero.service.ts

import {Injectable} from 'angular2/core';
import {HEROES} from './mock-heroes';
import {Hero} from './hero';

@Injectable()
export class HeroService {
    public getHeroes(): Promise<Hero[]> {
        return Promise.resolve(HEROES);
    }

    public getHeroesSlowly(): Promise<Hero[]> {
        return new Promise((resolve) =>
            setTimeout(() => resolve(HEROES), 5000) // 2 seconds
        );
    }
}

hero.ts

export interface Hero {
    id: number;
    name: string;
}

index.html

<html>

<head>
    <title>Angular 2 QuickStart</title>

    <!-- 1. Load libraries -->
    <script src="node_modules/es6-shim/es6-shim.js"></script>
    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>

    <!-- 2. Configure SystemJS -->
    <script>
        System.config({
            packages: {
                app: {
                    format: 'register',
                    defaultExtension: 'js'
                }
            }
        });
        System.import('app/boot')
                .then(null, console.error.bind(console));
    </script>

</head>

<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>

</html>

mock-heroes.ts

import {Hero} from './hero';
export const HEROES: Hero[] = [
    {"id": 11, "name": "Mr. Nice"},
    {"id": 12, "name": "Narco"},
    {"id": 13, "name": "Bombasto"},
    {"id": 14, "name": "Celeritas"},
    {"id": 15, "name": "Magneta"},
    {"id": 16, "name": "RubberMan"},
    {"id": 17, "name": "Dynama"},
    {"id": 18, "name": "Dr IQ"},
    {"id": 19, "name": "Magma"},
    {"id": 20, "name": "Tornado"}
];

package.json

{
    "name": "angular2-quickstart",
    "version": "1.0.0",
    "scripts": {
    "tsc": "tsc",
        "tsc:w": "tsc -w",
        "lite": "lite-server",
        "start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
},
    "license": "ISC",
    "dependencies": {
    "angular2": "2.0.0-beta.0",
        "systemjs": "0.19.6",
        "es6-promise": "^3.0.2",
        "es6-shim": "^0.33.3",
        "reflect-metadata": "0.1.2",
        "rxjs": "5.0.0-beta.0",
        "zone.js": "0.5.10"
},
    "devDependencies": {
    "concurrently": "^1.0.0",
        "lite-server": "^1.3.1",
        "typescript": "^1.7.3"
}
}

tsconfig.json

{
  "compilerOptions": {
    "target": "ES5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": true,
    "watch": true,
    "newLine": "LF"
  },
  "exclude": [
    "node_modules"
  ]
}

tslint.json

{
  "rules": {
    "align": [
      true,
      "parameters",
      "arguments",
      "statements"
    ],
    "ban": false,
    "class-name": true,
    "comment-format": [
      true,
      "check-space",
      "check-lowercase"
    ],
    "curly": true,
    "eofline": true,
    "forin": true,
    "indent": [
      true,
      "spaces"
    ],
    "interface-name": false,
    "jsdoc-format": true,
    "label-position": true,
    "label-undefined": true,
    "max-line-length": [
      true,
      140
    ],
    "member-access": true,
    "member-ordering": [
      true,
      "public-before-private",
      "static-before-instance",
      "variables-before-functions"
    ],
    "no-any": true,
    "no-arg": true,
    "no-bitwise": true,
    "no-conditional-assignment": true,
    "no-consecutive-blank-lines": false,
    "no-console": [
      true,
      "debug",
      "info",
      "time",
      "timeEnd",
      "trace"
    ],
    "no-construct": true,
    "no-constructor-vars": false,
    "no-debugger": true,
    "no-duplicate-key": true,
    "no-duplicate-variable": true,
    "no-empty": true,
    "no-eval": true,
    "no-inferrable-types": false,
    "no-internal-module": true,
    "no-null-keyword": true,
    "no-require-imports": true,
    "no-shadowed-variable": true,
    "no-string-literal": true,
    "no-switch-case-fall-through": true,
    "no-trailing-whitespace": true,
    "no-unreachable": true,
    "no-unused-expression": true,
    "no-unused-variable": true,
    "no-use-before-declare": true,
    "no-var-keyword": true,
    "no-var-requires": true,
    "object-literal-sort-keys": true,
    "one-line": [
      true,
      "check-open-brace",
      "check-catch",
      "check-else",
      "check-whitespace"
    ],
    "quotemark": [
      true,
      "single",
      "avoid-escape"
    ],
    "radix": true,
    "semicolon": true,
    "switch-default": true,
    "trailing-comma": [
      true,
      {
        "multiline": "always",
        "singleline": "never"
      }
    ],
    "triple-equals": [
      true,
      "allow-null-check"
    ],
    "typedef": [
      true,
      "call-signature",
      "parameter",
      "property-declaration",
      "variable-declaration",
      "member-variable-declaration"
    ],
    "typedef-whitespace": [
      true,
      {
        "call-signature": "nospace",
        "index-signature": "nospace",
        "parameter": "nospace",
        "property-declaration": "nospace",
        "variable-declaration": "nospace"
      }
    ],
    "use-strict": [
      true,
      "check-module",
      "check-function"
    ],
    "variable-name": [
      true,
      "check-format",
      "allow-leading-underscore",
      "ban-keywords"
    ],
    "whitespace": [
      true,
      "check-branch",
      "check-decl",
      "check-operator",
      "check-separator",
      "check-type"
    ]
  }
}