Date post: | 15-Jan-2015 |
Category: |
Technology |
Upload: | alexandre-marreiros |
View: | 1,127 times |
Download: | 2 times |
LEARNING
TypeScriptTypeScript2013, WWW.DIGITALMINDIGNITION.COM, ALEXANDRE MARREIROS
PART 1
About
• CTO @ INNOVAGENCY
• Tech Trainner, Speaker & Consultant as Independent
Contacts
• @alexmarreiros
• www.digitalmindignition.com
Learning
Alexandre Marreiros
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.
Learning
Learning
Why use TypeScriptFor 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.
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
Learning
JavaScript Language
• Client side language
• Not compiled
• Dynamic typed
• Not Object Oriented
• Procedure language
Learning
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.
TypeScript & JavaScript
Learning
Produce
Abstraction
TypeScript Provide us with:
•JavaScript Abstration•Works on Any Browser•Works on Any host•Works in Any OS•Tool Support
Is possible to use standard JavaScript when coding in TypeScript language
TypeScript Fundamentals
Learning
Object Oriented Static Typing Encapsulation
Modules Classes
Contructors, Functions, Properties
Lambda Functions
InterfacesIntelisense
Syntax checking
Compiled Language(Compiles
to JavaScript)
TypeScript Language first contact
Learning
File.ts File.js
Compile
Class Message{ innerMsg:string;
constructor(msg:string){ thid.innerMsg=msg } ShowMsg(){ return “test” + innerMsg; }}
Var Message = (function(){ function Message(msg){ this.innerMsg= msg; } Message.prototype.ShowMSG = function (){ return “test” + this.innerMsg } return Message})();
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
Learning
TypeScript Language
Learning
http://weblogs.asp.net/dwahlin/default.aspx
TypeScript Language code hierarchy
Learning
ModuleDefines a naming container, that can export diferent members
ClassIs a construct that enables you to create your own custom types. Interface
Defines a group of behaviours associated with a concept
FieldsConstructorFunctionsMembersProperties
Implement
Contains
0..*
0..*0..*
Play with TypeScript
Learning
http://www.typescriptlang.org/Playground/
TypeScript Tools support
• Sublime;
• Emacs;
• Vi
• Visual Studio
• TypeScript Playground
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)
Learning
TypeScript 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 )
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)
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
Learning
///<reference path=“jquery.d.ts”>declare var $;
TypeScript 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 type
The keyword undefined
•Represnts the same as null but with a diferente semantic mean, undefinded says that the variable wasn t iniciated yet
Learning
TypeScript Syntax
Primitive Types
Learning
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..)
TypeScript Syntax
Primitive Types
Learning
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)
Play with TypeScript
Learning
http://www.typescriptlang.org/Playground/
Learning
TypeScript Syntax
TypeScript
Dynamic Approach Static Aproach
Dynamic Typing (type inference)
Evaluated at runtime
Static Typing
Evaluated at compile time is type safe
Just like JavaScript
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
Learning
Examples
Var square:object = {x:100,y:100;};
Var sum:object=function(first:number, sec:number){return first+sec;};
TypeScript Function Type
• Declare functions– var squareAreaFunc = function (h:number , w:number){
return h * w;
}
• 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;
Learning
Emit the same JavaScript
Play with TypeScript
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
that extends other interface.
Learning
interface Mover{ move(): void; getStatus(): { speed: number; };}
var Moverobj:Mover ={ move: function() {….}, getStatus:function(){…}}
Declare a interfaceImplement a interface
Play with TypeScript
Learning
TypeScript Classes
• A class is a container
• His a role is encapsulate code and variables in a encapsolated concept
Learning
TypeScript Classes
• To define a Class
class Person {
}
• Constructors are used to initialize class instancesClass Person {
engine: string;
construct (engine : string ){ this.engine = engine;}
}
Learning
If you use the keyword public in
a constructor parameter you dont need to
declare the field
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 valueget myEngine:string { return this.engine;}
Learning
TypeScript supports
ComplexTypes
TypeScript Classes
• Cast between 2 typesvar table: HTMLTableElement =<HTMLTableElement>
document.createElement(‘table’);
Learning
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
TypeScript Extending Classes
• TypeScript defines the keyword extends as a way to allow types to extend other thypes
class Bird extends Anima{
constructor(){ super();}
}
Learning
Animal
Bird Cat
inheritance
You have to call the base
class constructor
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
Learning
Play with TypeScript
Learning
Questions
Your turn to talk, if you have any question
feel free to ask
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
Learning