Posladkajmo si JavaScript z uporabo TypeScript a

22
Posladkajmo si JavaScript z uporabo TypeScript-a 1.10.2013, @papsl SLODUG - Slovenian Developers User Group

Transcript of Posladkajmo si JavaScript z uporabo TypeScript a

Posladkajmo si

JavaScript z uporabo

TypeScript-a

1.10.2013, @papsl

SLODUG - Slovenian Developers User Group

Peter?

• Since 1986

• IT SysAdmin (MCSE NT 4.0 :)

• C#, T-SQL

• Web and Mobile

• Security & WhiteHacks

• Computer history

• Agile practices

• Working at pixi* labs d.o.o.

• Moje Kartice project

@papsl

peterpsi.blogspot.com

Svetla stran

• „JavaScript is x86 of the web“

• Deluje na vseh platformah

• Hiter začetek; Široka uporaba

• dynamic, prototype; closure, curry, …

Temna stran

• Standardizacija

• Kompleksna sintaksa, nejasna koda

• JS postal programski jezik tudi za strežniški del (svetla

stran)

• Težavno strukturiranje, uporaba razredov, modulov

• Pomanjkljivo znanje

Umetna sladila

• Prevajalniki

• CoffeScript

• Google Closure (JSDoc)

• Orodja za preverjanje kvalitete

• JSLint, JSHint, …

• Drugo

• Dart „Ultimately to replace JavaScript as the

lingua franca of web development on

the open web platform“

Kaj pa TypeScript?

• TypeScript se prevede v JavaScript

• JavaScript je TypeScript (superset)

• Pripravljen z mislijo na ECMAScript 6

• Deluje na vseh platformah, ki podpirajo JavaScript

• Prinaša:

• Optional static typing

• Clean syntax

• Class based Objet Oriented Programing, Interface, Modules…

• Is just a syntactic sugar

• Header (definition) files for existing JavaScript libs.

• Great tools (VS+InteliSense)

Kratka zgodovina

• Razvija ga Microsoft

• Izdan v December 2012 Apache 2 License (trenutno 0.9.1.1)

• Izvorna koda na codeplex.com

• Anders Hejlsberg• Pascal compiler (DOS and CP/M)

• Borland: Turbo Pascal & Delphi

• Microsoft: C#

„No, you can write large programs in JavaScript. You just can’t maintain them.“

Umažimo si roke!

• Igrišče (brez vseh namestitev)

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

• Prenos in namestitev

• http://www.typescriptlang.org/#Download

• Visual Studio 2012/2013 RC

• node.js

• npm install –g typescript

• tsc helloworld.ts

• node helloword.js

• tsc hellomodule.ts --module "amd"

• lib.d.ts

Podatkovni tipi

• Osnovni

• Boolean

• Number

• String

• Any

• Null (nima vrednosti)

• Undefined (ni instanciran)

• Object

• Void

• HTMLElement …

Podatkovne tipe se preverja le med prevajanjem

Class

Interfaces

Moduli

• Zakaj?

• Strukturiranje

• „Global scope pollution“

• Poznamo

• Interne

• Imenski prostor (beri: namespace)

• Ne pozabi „//<reference path=‚nekaj.ts'/>“ ni dovolj

• Zunanje

• AMD

• requireJS (uporaba v spletnih brskalnikih)

• commonJS

• node.js (za strežniško stran in tudi za brskalnik)

Moduli - interni

Moduli - zunanji

Triki

• Kreiraj „references.ts“, v njem referenciraj vse ts skripte in

nato referenciraj le references.ts

• NuGet:

• Install-Package RequireJS

• Install-Package RequireJS.TypeScript.DefinitelyTyped

• Web Essentials 3.x brez podpore za TypeScript

• http://madskristensen.net/post/Web-Essentials-2013-Where-is-the-

TypeScript-support.aspx

• Izklopi nadležni „The file has been modified outside of the

source editor “

• Tools -> Options, Environment -> Documents

• „Detect when files changed outside the environment“

Time for Coffe?

TypeScript

• Individual can chose

• Sugar is optional

• Syntax familiar to

C#, Java

CoffeScript

• All team „must“ switch

• Syntax familiar to

Ruby, Phyton, Haskell

• Older, mature, very

popular

Type, Coffee or

vanilla?

VPRAŠANJA?

HVALA!

http://peterpsi.blogspot.com

@papsl

Še zadnji nasvet: pred resno uporabo preberi:

„TypeScript Language Specification.pdf“

I want more

• TypeScript Download (or install it via node npm)

• http://www.typescriptlang.org/#Download

• http://www.typescriptlang.org/tutorial/

• The repository for high quality TypeScript type definition

(node, jQuery, knockout,

• https://github.com/borisyankov/DefinitelyTyped

• Source Code

• http://typescript.codeplex.com/

• JavaScript Patterns

• WebEssentials 2012 (VS addin)

Resources

• http://channel9.msdn.com/posts/Anders-Hejlsberg-Introducing-TypeScript (1.10.2012) :)

• http://blogs.msdn.com/b/typescript/

• http://www.typescriptlang.org/Tutorial/

• https://github.com/DefinitelyTyped/typescript-directory *

• http://en.wikipedia.org/wiki/TypeScript

• http://en.wikipedia.org/wiki/Anders_Hejlsberg

• Nathan Smith, fotografija • http://www.flickr.com/photos/nathansmith/4704268314/sizes/l/in/ph

otostream/

• Internet