2. 2
What’s TypeScript?
TypeScript
First appered 2012
Free and OpenSource project by Microsoft
Created by the father of C# Anders Hejlsberg
Typed superset of JavaScript
A new language that compiles to plain JavaScript
ES3 - ES5, ES6
2009
5. 5
Why TypeScript?
JS is interpreted, not compiled
There are no design-time intellisense or compile-time assistance to help you point out errors
A function is your contract with your caller
Function with parameters are more like guidelines
Global Scope
Why is the method called includes and not contains in Array?
MooTools adds this method to Array.prototype.
Scope
TypeScript
function func(anyvar) {
console.log(arguments.length);
return anyvar+ 1;
}
func();
func(“Change to TypeScript");
func("Change to", "TypeScript");
func(function(){});
f(1,2,3,4,5); //5
var foo = 1;
function test1() { foo = 2; console.log(foo); };
test1(); console.log(foo);
var foo = 3;
function test2() { var foo = 4; console.log(foo); };
test2(); console.log(foo);
6. 6
Why TypeScript?
Object extension
Object inheritance is possible, but too messy
Some pitfalls
TypeScript
var a = "2";
var b = "2";
var c = a * b; //4
var a = "a";
var b = "b";
var c = a * b; //NaN
console.log('4' - 4);
console.log('4' + 4);
//0
//44
undefined == undefined //true
null == undefined //true
null === undefined //false
0 == undefined //false
”” == undefined //false
false == undefined //false
false == 0 //true
false == ”” //true
void 0
var x = { a : 1, b : 2 }
x.c = 3;
console.log(x[“a”] + x.b + x.c);
7. 7
Features of TypeScript
Namespaces & Modules
Nomenclature has changed
Align with ECMAScript 2015
TypeScript
namespace Animal {
export namespace Domestic {
export function move(distance: number): boolean {
}
}
}
var moved = Animal.Domestic.move(100);
8. 8
Features of TypeScript
Interfaces
TypeScript
enum Direction{
Right = 0,
Left = 1
}
interface Animal {
name: string;
age: number;
domestic: boolean;
}
interface Animal {
move(distance: number, direction: Direction);
}
export class Cat implements Animal{
...
}
9. 9
TypeScript Features
Abstract & Classes
TypeScript
abstract class Animal {
abstract getName(): string;
}
class Cat extends Animal {
constructor() {
super();
}
public getName(): string {
return "";
}
}
class Dog extends Animal {
constructor() {
super();
}
getName(): string {
return "";
}
}
class Kennel<T extends Animal> {
getName<T extends Animal>(animal: T) : string {
return animal.getName();
}
}
var cat = new Cat();
var dog: Dog = new Dog();
var kennel = new Kennel();
var animal1 = kennel.getName(cat);
var animal2 = kennel.getName(dog);
10. 10
TypeScript Features
Variable Scoping
TypeScript
for (var i = 0; i < this.length; i++) {
…
}
for (var i = 0; i < this.length; i++) { //Error
…
}
if(this.length > 0) {
let self = this[1]; //scoped only to if conditional
}
11. 11
TypeScript Features
Declaration Files
.d.ts files containing declarative statements to describe TypeScript modules, classes, objects, etc.
Definition files for common JavaScript libraries makes them very easy to work with, and provides strong type checking
TypeScript
12. 12
TypeScript Declaration Files
Variable Scoping
TypeScript
for (var i = 0; i < this.length; i++) {
…
}
for (var i = 0; i < this.length; i++) { //Error
…
}
if(this.length > 0) {
let self = this[1]; //scoped only to if conditional
}
13. 13
Problems TypeScript Solves
Type safety
All the features are optionals
We can not use types
All valid JavaScript is valid TypeScript
Modules
TypeScript
module outer {
var str = "hello world";
}
var outer;
(function (outer) {
var str = "hello world";
})(outer || (outer = {}));
15. 15
Problems TypeScript Doesn’t Solve
Mistakes
Logical mistakes
Lack of knowledge
Still need to understand JS
TS without knowing JS == disaster
what output will TS provide?
Won't make it faster
Won't make you code faster
Won't make app run faster
The any type
Stands for NO TYPE
Very easy and tempting to use
Will spoil your app if used in big amounts
Debug
browsers don't execute TS
source and output: different
TypeScript
