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

Learning typescript

Embed Size (px)

DESCRIPTION

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.

Citation preview

Page 1: Learning typescript

LEARNING

TypeScriptTypeScript2013, WWW.DIGITALMINDIGNITION.COM, ALEXANDRE MARREIROS

PART 1

Page 2: Learning typescript

About

• CTO @ INNOVAGENCY

• Tech Trainner, Speaker & Consultant as Independent

Contacts

[email protected]

• @alexmarreiros

• www.digitalmindignition.com

Learning

Alexandre Marreiros

Page 3: Learning typescript

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

Page 4: Learning typescript

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.

Page 5: Learning typescript

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

Page 6: Learning typescript

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.

Page 7: Learning typescript

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

Page 8: Learning typescript

TypeScript Fundamentals

Learning

Object Oriented Static Typing Encapsulation

Modules Classes

Contructors, Functions, Properties

Lambda Functions

InterfacesIntelisense

Syntax checking

Compiled Language(Compiles

to JavaScript)

Page 9: Learning typescript

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})();

Page 10: Learning typescript

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

Page 11: Learning typescript

TypeScript Language

Learning

http://weblogs.asp.net/dwahlin/default.aspx

Page 12: Learning typescript

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..*

Page 13: Learning typescript

Play with TypeScript

Learning

http://www.typescriptlang.org/Playground/

Page 14: Learning typescript

TypeScript Tools support

• Sublime;

• Emacs;

• Vi

• Visual Studio

• TypeScript Playground

Learning

Page 15: Learning typescript

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

Page 16: Learning typescript

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

Page 17: Learning typescript

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

Page 18: Learning typescript

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 $;

Page 19: Learning typescript

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

Page 20: Learning typescript

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..)

Page 21: Learning typescript

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)

Page 22: Learning typescript

Play with TypeScript

Learning

http://www.typescriptlang.org/Playground/

Page 23: Learning typescript

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

Page 24: Learning typescript

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;};

Page 25: Learning typescript

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

Page 26: Learning typescript

Play with TypeScript

Learning

Page 27: Learning typescript

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

Page 28: Learning typescript

Play with TypeScript

Learning

Page 29: Learning typescript

TypeScript Classes

• A class is a container

• His a role is encapsulate code and variables in a encapsolated concept

Learning

Page 30: Learning typescript

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

Page 31: Learning typescript

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

Page 32: Learning typescript

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

Page 33: Learning typescript

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

Page 34: Learning typescript

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

Page 35: Learning typescript

Play with TypeScript

Learning

Page 36: Learning typescript

Questions

Your turn to talk, if you have any question

feel free to ask

Learning

Page 37: Learning typescript

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