The first deck of a two part learning deck about TypeScript. Here you can view a first introduction to the language and some attention call for some of TypeScript detailes.

1. LEARNING
TypeScript PART 1
2013,
WWW.DIGITALMINDIGNITION.COM,
ALEXANDRE MARREIROS

2. Learning
About
Alexandre Marreiros
• CTO @ INNOVAGENCY
• Tech Trainner, Speaker & Consultant as Independent
Contacts
• amarreiros@gmail.com
• @alexmarreiros
• www.digitalmindignition.com

3. Learning
What is TypeScript
―TypeScript is a superset of Javascript which primarily
provides static typing, classes and interfaces. One of the big
benefits is to enable IDEs to provide a richer environment for spotting
common errors as you type the code. Other benefits can be having all the
best things of javascript in a strong type language. Is also a Codeplex
initiative.‖
Paul Dixon
TypeScript is a language for application-scale JavaScript
development.
TypeScript is a typed superset of JavaScript that compiles to
plain JavaScript.

4. Learning
Why use TypeScript
For a large Javascript project, adopting Typescript might result in
more robust software, while still being deployable where a regular
javascript application would run.
To easy build clean and mantainable code (costum javascript
programming can sometimes become messy if you don‘t apply
pattern‘s ).
TypeScript allow us to create encapsulation.

5. Learning
Review JavaScript Types
• JavaScript Type System is dynamic
• Dynamic Type System provide us with:
– Variables can hold any object
– Types are determined at the runtime
– Is impossible to ensure right conversion of types or if the types are passed
in the right way, at the development time

6. Learning
JavaScript Language
• Client side language
• Not compiled
• Dynamic typed
• Not Object Oriented
• Procedure language
The mindset of a cliente side language is diferente from the mindset of a server side
language. Large enterprise programs need developer‘s to know the two worlds and made
that worlds interact to build the aplication experience.

7. Learning
TypeScript & JavaScript
TypeScript Provide us with:
• JavaScript Abstration
• Works on Any Browser
Produce • Works on Any host
• Works in Any OS
Abstraction • Tool Support
Is possible to use standard
JavaScript when coding in
TypeScript language

8. Learning
TypeScript Fundamentals
Object Oriented
Static Typing Encapsulation
Modules Classes
Compiled Intelisense
Contructors,
Language Lambda Interfaces Syntax
Functions,
(Compiles to Functions checking
Properties
JavaScript)

9. Learning
TypeScript Language first contact
Compile
Class Message{ Var Message = (function(){
innerMsg:string; function Message(msg){
this.innerMsg= msg;
constructor(msg:string){ }
thid.innerMsg=msg Message.prototype.ShowMSG =
} function (){
ShowMsg(){ return ―test‖ + this.innerMsg
return ―test‖ + }
innerMsg; return Message
} })();
}
File.ts File.js

10. Learning
TypeScript Language
• Don‘ t Forget TypeScript is a superste of JavaScript so what is
supported by javascript syntax is supported by TypeScript.
• A scope of a codeblock is limited by {}
• A codeblock ends with ;
• All ecma script defined keywords are suported and means the
same in TypeScript

11. Learning
TypeScript Language
http://weblogs.asp.net/dwahlin/default.aspx

12. Learning
TypeScript Language code hierarchy
Defines a naming container, that can export
Module
diferent members
0..*
Defines a group of Is a construct that enables you to create
behaviours associated Interface Class your own custom types.
with a concept 0..*
0..*
Fields
Constructor
Functions
Members
Properties
Implement
Contains

13. Learning
Play with TypeScript
http://www.typescriptlang.org/Playground/

14. Learning
TypeScript Tools support
• Sublime;
• Emacs;
• Vi
• Visual Studio
• TypeScript Playground

15. Learning
TypeScript Syntax
Variable Declaration:
• Type inference
– Var xpto = 2;
( declare give a name set value , the type will be infered from the right
operator parammeter)
• Type Annotation
– Var xpto: number = 2;
(declare give a name set the type set the value)

16. Learning
TypeScript Syntax
Variable Declaration examples:
• Type inference
– Var xpto1;
xpto1 = ‗test‘
( declare give a name, the type will be infered from the set that is done in
the second line)
– Var xpto = 2 + ‗this is a test‘;
( declare give a name set value , the type will be infered from the right
operator parammeter, since the right parameter is a number concat with a
string the runtime will assume xpto is a string )

17. Learning
TypeScript Syntax
Ambient Variable Declaration:
• To get a declared variable of a included file we can use the
TypeScript declare
declare var document
(lib.d.ts is referenced by default in TypeScript and has references for the
DOM tree and javascript functions)
(jquery.d.ts is a file where we can reference the jquery library)

18. Learning
TypeScript Syntax
Use variables of other modules and having intellisence:
• Firt you should have your d.ts file in a known place
• Second you should reference the file like
• Third declare the type instance you want to use
///<reference path=―jquery.d.ts‖>
declare var $;

19. Learning
TypeScript Syntax
The keyword any
• Any is the language primitive used to decorate a variable in a
way that he can assume any type. When you declare a variable
like this no static type validation will be done.
var str: any;
The keyword null
• Except void and undefined null is the value who can set any type
meaning theres no value in that instance type
The keyword undefined
• Represnts the same as null but with a diferente semantic
mean, undefinded says that the variable wasn t iniciated yet

20. Learning
TypeScript Syntax
Primitive Types
any
(The Any type is used to represent any JavaScript value. A value of the Any type supports the
same operations as a value in JavaScript and no static type checking)
number
(The Number primitive type corresponds to the similarly named JavaScript primitive type and
represents double-precision 64-bit format IEEE 754 floating point values.)
string
(The String primitive type corresponds to the similarly named JavaScript primitive type and
represents sequences of characters stored as Unicode UTF-16 code units..)

21. Learning
TypeScript Syntax
Primitive Types
null
(The Null type is a subtype of all types, except the Void and Undefined types. This means that
null is considered a valid value for all primitive and object types, including even the Number and
Boolean primitive types)
undefined
(The Undefined type corresponds to the similarly named JavaScript primitive type and is the
type of the undefined literal.)
Type Arrays
(Represents a container of values of a specific static or dynamic type. In the second case we ca
illustrate with the following example:
var names: string[] = [‗Antonio‘,‘John‘,‘Manuel‘];
To índex the array you use the following notation
names[num] ;
Where num is the índex in the array starting at 0 for the first elemento)

22. Learning
Play with TypeScript
http://www.typescriptlang.org/Playground/

23. Learning
TypeScript Syntax
TypeScript
Dynamic Approach Static Aproach
Dynamic Typing (type inference) Static Typing
Evaluated at runtime Evaluated at compile time is type safe
Just like JavaScript

24. Learning
TypeScript Syntax
Object Types
• Can be functions, class, module, interface, literal
• Canbe a container of Properties (public or private, required or
optional) call signatures, Contruct Signatures, Index Signatures
Examples
Var
Var square:object = {x:100,y:100;}; sum:object=function(first:number, sec:
number){return first+sec;};

25. Learning
TypeScript Function Type
• Declare functions
– var squareAreaFunc = function (h:number , w:number){
return h * w;
} Emit the same
JavaScript
• Using arrow functions
– var squareAreaFunc = (h:number, w:number) => h*w;
• Option parameter
– var Hthere = (str?:string) => alert( name|| ‗no name‘);
• Void keyword
var squareAreaFunc = (h:number, w:number) => void;

26. Learning
Play with TypeScript

27. Learning
Typscript Interface Functions
• Interfaces provide the ability to give names to object types and
the ability to compose existing named object types into new ones.
• Interfaces have no run-time representation—they are purely a
compile-time construct.
• Use the keyword extends to build a interface
interface Mover
that extends other interface. {
move(): void;
getStatus(): { speed: number; };
}
var Moverobj:Mover =
{
move: function() {….}, Declare a interface
getStatus:function(){…}
} Implement a interface

28. Learning
Play with TypeScript

29. Learning
TypeScript Classes
• A class is a container
• His a role is encapsulate code and variables in a encapsolated
concept

30. Learning
TypeScript Classes
• To define a Class
class Person {
}
• Constructors are used to initialize class instances If you use the
keyword public in a
Class Person {
constructor
engine: string; parameter you dont
construct (engine : string ){ this.engine = engine;} need to declare the
field
}

31. Learning
TypeScript Classes
• Instantiate a new instance of a class
var Personinst = new Person (‗test‘);
• Field members in typescript are public by default but we can change
the visibility
class Person {
private engine:string;
}
• Properties allow you to get or set members value TypeScript supports
ComplexTypes
get myEngine:string { return this.engine;}

32. Learning
TypeScript Classes
• Cast between 2 types
var table: HTMLTableElement =<HTMLTableElement>
document.createElement(‗table‘);
TypeScript knows
what types exist
with the reference
of type definition
files
You can find a lot of type definition files for third party libraries at https://github.com/borisyankov/DefinitelyTyped

33. Learning
TypeScript Extending Classes
Animal
inheritance
Bird Cat
• TypeScript defines the keyword extends as a way to allow types
to extend other thypes
class Bird extends Anima{
You have to
constructor(){ super();} call the base
} class
constructor

34. Learning
TypeScript Interfaces and Classes
• TypeScript defines the keyword implements as a way to allow
types to ―sign‖ a interface contract
class Bird implements IAnimal ….
(Note: Consider that IAnimal is a interface that defines the
contract associated to a Animal)
• The rules to use Interfaces in a Typescript are similar to the
rules of .NET or JAVA

35. Learning
Play with TypeScript

36. Learning
Questions
Your turn to talk, if you have any question
feel free to ask

37. Learning
References
• http://www.typescriptlang.org/
• http://www.typescriptlang.org/Content/TypeScript%20Language
%20Specification.pdf
• http://www.sellsbrothers.com/posts/Details/12724
• http://typescript.codeplex.com/
• http://weblogs.asp.net/dwahlin/default.aspx
• http://channel9.msdn.com/posts/Anders-Hejlsberg-Introducing-
TypeScript