Posladkajmo si JavaScript z uporabo TypeScript a
-
Upload
peter-a-pirc -
Category
Technology
-
view
235 -
download
7
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
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)
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
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
Primeri uporabe
• JS game engine: http://typedarray.org/introducing-starling-
js/ Demo: http://gamua.com/area-51/
• TypeScript with JSDoc support (for Google Closure)
https://github.com/evanw/typescript-closure-compiler