Downloaded 67 times
![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)](https://image.slidesharecdn.com/learningtypescript-130120173150-phpapp02/75/Learning-typescript-21-2048.jpg)
Uploaded byAlexandre Marreiros
Learning typescript
The document provides an overview of TypeScript, a superset of JavaScript that adds static typing and other features for large-scale application development. It highlights the benefits of using TypeScript for building robust and maintainable code, alongside its fundamental concepts such as classes, interfaces, and type annotations. Additionally, it discusses tools for TypeScript development and includes examples of syntax and type definitions.
More Related Content
Similar to Learning typescript
More from Alexandre Marreiros
Learning typescript
- 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 ―TypeScriptis 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 Fora 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 • Clientside 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 Declarationexamples: • 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 VariableDeclaration: • 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 variablesof 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 keywordany • 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.
- 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.
- 29. Learning TypeScript Classes • Aclass is a container • His a role is encapsulate code and variables in a encapsolated concept
- 30. Learning TypeScript Classes • Todefine 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 • Instantiatea 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 andClasses • 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.
- 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