Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Learning typescript


Published on

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.

Published in: Technology

Learning typescript

  2. 2. LearningAbout Alexandre Marreiros • CTO @ INNOVAGENCY • Tech Trainner, Speaker & Consultant as Independent Contacts • • @alexmarreiros •
  3. 3. LearningWhat is TypeScript―TypeScript is a superset of Javascript which primarilyprovides static typing, classes and interfaces. One of the bigbenefits is to enable IDEs to provide a richer environment for spottingcommon errors as you type the code. Other benefits can be having all thebest things of javascript in a strong type language. Is also a Codeplexinitiative.‖ Paul DixonTypeScript is a language for application-scale JavaScriptdevelopment.TypeScript is a typed superset of JavaScript that compiles toplain JavaScript.
  4. 4. LearningWhy use TypeScriptFor a large Javascript project, adopting Typescript might result inmore robust software, while still being deployable where a regularjavascript application would run.To easy build clean and mantainable code (costum javascriptprogramming can sometimes become messy if you don‘t applypattern‘s ).TypeScript allow us to create encapsulation.
  5. 5. LearningReview 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. 6. LearningJavaScript 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. 7. LearningTypeScript & JavaScript TypeScript Provide us with: • JavaScript Abstration • Works on Any Browser Produce • Works on Any host • Works in Any OSAbstraction • Tool Support Is possible to use standard JavaScript when coding in TypeScript language
  8. 8. LearningTypeScript Fundamentals Object Oriented Static Typing Encapsulation Modules Classes Compiled Intelisense Contructors, Language Lambda Interfaces Syntax Functions,(Compiles to Functions checking Properties JavaScript)
  9. 9. Learning TypeScript Language first contact CompileClass 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. 10. LearningTypeScript 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. 11. Learning TypeScript Language
  12. 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 createbehaviours associated Interface Class your own custom types.with a concept 0..* 0..* Fields Constructor Functions Members Properties Implement Contains
  13. 13. Learning Play with TypeScript
  14. 14. LearningTypeScript Tools support• Sublime;• Emacs;• Vi• Visual Studio• TypeScript Playground
  15. 15. LearningTypeScript SyntaxVariable 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. 16. LearningTypeScript SyntaxVariable 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. 17. LearningTypeScript SyntaxAmbient 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. 18. LearningTypeScript SyntaxUse 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. 19. LearningTypeScript SyntaxThe 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 typeThe keyword undefined• Represnts the same as null but with a diferente semantic mean, undefinded says that the variable wasn t iniciated yet
  20. 20. LearningTypeScript SyntaxPrimitive Types any(The Any type is used to represent any JavaScript value. A value of the Any type supports thesame operations as a value in JavaScript and no static type checking) number(The Number primitive type corresponds to the similarly named JavaScript primitive type andrepresents double-precision 64-bit format IEEE 754 floating point values.) string(The String primitive type corresponds to the similarly named JavaScript primitive type andrepresents sequences of characters stored as Unicode UTF-16 code units..)
  21. 21. LearningTypeScript SyntaxPrimitive Types null(The Null type is a subtype of all types, except the Void and Undefined types. This means thatnull is considered a valid value for all primitive and object types, including even the Number andBoolean primitive types) undefined(The Undefined type corresponds to the similarly named JavaScript primitive type and is thetype of the undefined literal.) Type Arrays(Represents a container of values of a specific static or dynamic type. In the second case we caillustrate 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. 22. Learning Play with TypeScript
  23. 23. LearningTypeScript 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. 24. LearningTypeScript SyntaxObject 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. 25. LearningTypeScript 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. 26. LearningPlay with TypeScript
  27. 27. LearningTypscript 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 Moverthat extends other interface. { move(): void; getStatus(): { speed: number; }; } var Moverobj:Mover = { move: function() {….}, Declare a interface getStatus:function(){…} } Implement a interface
  28. 28. LearningPlay with TypeScript
  29. 29. LearningTypeScript Classes• A class is a container• His a role is encapsulate code and variables in a encapsolated concept
  30. 30. LearningTypeScript 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. 31. LearningTypeScript 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. 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 filesYou can find a lot of type definition files for third party libraries at
  33. 33. LearningTypeScript 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. 34. LearningTypeScript 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 thecontract associated to a Animal)• The rules to use Interfaces in a Typescript are similar to the rules of .NET or JAVA
  35. 35. LearningPlay with TypeScript
  36. 36. Learning Questions Your turn to talk, if you have any question feel free to ask
  37. 37. Learning References • • %20Specification.pdf • • • • TypeScript