SharePoint App using Type Script and Angular JS

What is Typescript

It adds Static Typing and structuring (class, modules, etc..) to JavaScript.
Type Annotations
Static type checking
Type Definitions
Compile-time checking
Open Source
Supported by angular2

Strongly typed

Typescript defines the type of the member variable and function parameters. The type will be removed while translation to JavaScript. It enables the compiler to catch type error at compile time and provides IDE intellisense.

Javascript

Typescript

function test(a ,b ){

return a*b;

}

alert(test('one','two'))

function test(a:number,b:number):number{

return a*b;

}

alert(test(10,20));

Compiler

The code we write in TypeScript is compiled into JavaScript and map file. Map file used to map the JavaScript and TypeScript file lines to debug TypeScript.

Compile: tsc test.ts à test.js

While compiling the TypeScript code into JavaScript, type annotations are removed.

var a:number = 3; var a = 3;

var b:string = 'abc'; var b = 'abc';

DefinitelyTyped

The DefinitelyTyped adds definitions for the existing many JavaScript libraries in the form of interfaces.

Describes the types defined in the external libraries (d.ts)
Not Deployed only used for development purpose
It is used to check the types

Alternatives

Dart
CoffeeScript
ClojureScript
Fay

Module & Export keyword

Modules are same as namespace in C#, to avoid the name collisions and get the functionality of IIFE.

Typescript with Module

To make the internal aspects of the module accessible outside of the module we need to declare with export keyword, As the model and service are accessed by the angular controller we used the keyword export.

Create a sharepoint Hosted App and the necessary typescript definitley file using Nuget Package Manger.

Edit the project and include the lines

</PropertyGroup>

Save and reload the project.

Include the DefinitelyTyped by Package manager console

Install-Package angularjs.TypeScript.DefinitelyTyped

Project.ts

ProjectService.ts

$Inject

Without injecting the program works well until the Js gets Minifed. The minification process will probably alter the names of the parameters and it results in unknown inject of the Angular.

The $inject is a special property of AngularJS to determine that what are the services need to be injected at runtime. It should be marked as static and it is an array of string. The order of the array string and the constructor parameter should be matched.