Rits Brown Bag - TypeScript

© 2016, Right IT Services. All rights reserved
TypeScript
Friday, 02 December 2016

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

3
Friends - Who’s Using TypeScript?
TypeScript

4
Why TypeScript?
TypeScript
JavaScript
SUCKS!

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
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
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
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
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
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
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
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
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 = {}));

14
Problems TypeScript Solves
Checks Types
Less Runtime Bugs
Less Unit Tests
assert.isString
assert.isNumber
TypeScript

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

WHEN YOU HAVE TO DO IT, DO IT RIGHT
© 2016, Right IT Services. All rights reserved Rua Odette Saint Maurice Lote 3B | Edifício L | Escritório A | Piso -1 | 1700-097 Lisboa | Portugal | +351 218 232 261
Pedro Azevedo – Technical Lead Dynamics CRM
Environment Microsoft Dynamics CRM
Friday, 02 December 2016
TypeScript

Rits Brown Bag - TypeScript

More Related Content

What's hot (19)

Viewers also liked (20)

Similar to Rits Brown Bag - TypeScript (20)

More from Right IT Services (15)

Recently uploaded (20)

Rits Brown Bag - TypeScript