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

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

3. Svetla stran
• „JavaScript is x86 of the web“
• Deluje na vseh platformah
• Hiter začetek; Široka uporaba
• dynamic, prototype; closure, curry, …

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

5. 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“

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

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

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

9. Podatkovni tipi
• Osnovni
• Boolean
• Number
• String
• Any
• Null (nima vrednosti)
• Undefined (ni instanciran)
• Object
• Void
• HTMLElement …
Podatkovne tipe se preverja le med prevajanjem

10. Class

11. Interfaces

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

13. Moduli - interni

14. Moduli - zunanji

15. 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-theTypeScript-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“

16. Time for Coffe?
TypeScript
CoffeScript
• Individual can chose
• Sugar is optional
• All team „must“ switch
• Syntax familiar to
Ruby, Phyton, Haskell
• Older, mature, very
popular
C#, Java
• Syntax familiar to

17. Type, Coffee or

18. vanilla?

19. VPRAŠANJA?
HVALA!
Še zadnji nasvet: pred resno uporabo preberi:
„TypeScript Language Specification.pdf“
http://peterpsi.blogspot.com
@papsl

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

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

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