SLODUG - Slovenian Developers User Group

Posladkajmo si
JavaScript z uporabo
TypeScript-a

1.10.2013, @papsl
Peter?
•
•
•
•
•
•
•
•
•

Since 1986
IT SysAdmin (MCSE NT 4.0 :)
C#, T-SQL
Web and Mobile
Security & WhiteHacks
Computer h...
Svetla stran
• „JavaScript is x86 of the web“
• Deluje na vseh platformah
• Hiter začetek; Široka uporaba
• dynamic, proto...
Temna stran
• Standardizacija
• Kompleksna sintaksa, nejasna koda
• JS postal programski jezik tudi za strežniški del (sve...
Umetna sladila
• Prevajalniki
• CoffeScript
• Google Closure (JSDoc)
• Orodja za preverjanje kvalitete
• JSLint, JSHint, …...
Kaj pa TypeScript?
• TypeScript se prevede v JavaScript
• JavaScript je TypeScript (superset)
• Pripravljen z mislijo na E...
Kratka zgodovina
• Razvija ga Microsoft

• Izdan v December 2012 Apache

2 License (trenutno 0.9.1.1)
• Izvorna koda na co...
Umažimo si roke!
• Igrišče (brez vseh namestitev)
• http://www.typescriptlang.org/Playground/
• Prenos in namestitev
• htt...
Podatkovni tipi
• Osnovni
• Boolean
• Number
• String
• Any
• Null (nima vrednosti)
• Undefined (ni instanciran)
• Object
...
Class
Interfaces
Moduli
• Zakaj?
• Strukturiranje
• „Global scope pollution“
• Poznamo
• Interne
• Imenski prostor (beri: namespace)
• Ne p...
Moduli - interni
Moduli - zunanji
Triki
• Kreiraj „references.ts“, v njem referenciraj vse ts skripte in

nato referenciraj le references.ts
• NuGet:
• Inst...
Time for Coffe?
TypeScript

CoffeScript

• Individual can chose
• Sugar is optional

• All team „must“ switch

• Syntax fa...
Type, Coffee or
vanilla?
VPRAŠANJA?
HVALA!
Še zadnji nasvet: pred resno uporabo preberi:
„TypeScript Language Specification.pdf“

http://peterpsi.b...
I want more
• TypeScript Download (or install it via node npm)
• http://www.typescriptlang.org/#Download
• http://www.type...
Resources
• http://channel9.msdn.com/posts/Anders-Hejlsberg•
•
•
•
•

Introducing-TypeScript (1.10.2012) :)
http://blogs.m...
Primeri uporabe
• JS game engine: http://typedarray.org/introducing-starling-

js/ Demo: http://gamua.com/area-51/
• TypeS...
Upcoming SlideShare
Loading in …5
×

Posladkajmo si JavaScript z uporabo TypeScript a

390 views
291 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
390
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Posladkajmo si JavaScript z uporabo TypeScript a

  1. 1. SLODUG - Slovenian Developers User Group Posladkajmo si JavaScript z uporabo TypeScript-a 1.10.2013, @papsl
  2. 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. 3. Svetla stran • „JavaScript is x86 of the web“ • Deluje na vseh platformah • Hiter začetek; Široka uporaba • dynamic, prototype; closure, curry, …
  4. 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. 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. 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. 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. 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. 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. 10. Class
  11. 11. Interfaces
  12. 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. 13. Moduli - interni
  14. 14. Moduli - zunanji
  15. 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. 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. 17. Type, Coffee or
  18. 18. vanilla?
  19. 19. VPRAŠANJA? HVALA! Še zadnji nasvet: pred resno uporabo preberi: „TypeScript Language Specification.pdf“ http://peterpsi.blogspot.com @papsl
  20. 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. 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. 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

×