Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

TypeScript 101 - Studio Session - Accenture Liquid Studio

285 views

Published on

Presented March 8th, 2017

I presented a 45-minute version of my "TypeScript 101" talk that serves as a short introduction to TypeScript and the benefits it provides to large-scale projects.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

TypeScript 101 - Studio Session - Accenture Liquid Studio

  1. 1. A brief class that introduces the benefits TypeScript provides to large scale projects. Prerequisites: JavaScript 202 TypeScript 101
  2. 2. ๐ŸŽ“ Professor Frances Coronel @fvcproductions fvcproductions in/fvcproductions
  3. 3. Syllabus (1) The Rise of TypeScriptโ€™s Popularity ๐Ÿ“ˆ (2) TypeScript vs JavaScript ๐ŸŽญ (3) Homework Assignments ๐Ÿ“š @fvcproductions
  4. 4. W8, what is TypeScript? ๐Ÿค” โ€ข strict syntactical superset of JavaScript โ€ข programming language developed & maintained by Microsoft that is completely open-source โ€ข eases development of large scale applications written in JS with less boilerplate code & better tooling โ€ข extends JS by adding optional typing, static analysis, & interfaces to create code that's easier to maintain๐Ÿ—“ October 2012 @fvcproductions
  5. 5. TypeScript ๐Ÿ–ฅ TypeScript & Me ๐Ÿ’› Me ) Programming language Clean freaks ๐Ÿ›€ Human being Anal retentive ๐Ÿ‘ฟ October babies ๐Ÿ‘ถ @fvcproductions
  6. 6. (1) The Rise of TypeScriptโ€™s Popularity ๐Ÿ“ˆ @fvcproductions
  7. 7. Companies โค TypeScript
  8. 8. Developers โค TypeScript
  9. 9. Why all the love? Modular structure Friendly with all editors Scalable Easy to learn Easy to debug so less bugs! Has Types Good tooling and library support Powers major production apps Devs can be onboard fairly quickly Works on both client and server ๐Ÿ˜
  10. 10. Evaluating the Popularity of a Programming Language ๐Ÿค“
  11. 11. 9 1
  12. 12. 11 3
  13. 13. "The platform no developer should live without" - me
  14. 14. 15 Most Popular Languages On GitHub by Opened Pull Requests With Percentage Change from Previous Year
  15. 15. (2) TypeScript vs JavaScript ๐ŸŽญ .ts .js @fvcproductions
  16. 16. The Nitty Gritty ๐Ÿ’ป npm i -g typescript Installing TypeScript Compiling our file to JS tsc multiplication.ts Configuring options touch tsconfig.json npm i -g tslint Optional Installing TSLint @fvcproductions
  17. 17. JavaScript is TypeScript but TypeScript is not JavaScript. Superset vs Subset ๐Ÿ”˜ @fvcproductions
  18. 18. 1. Referenced a symbol/ variable which is not declared in program 2. Not able to fully infer the type of a particular variable and warns against using it as is 3. Even if your source code has TypeScript errors, it will still produce JavaScript code which you can execute Spell Checker @fvcproductions
  19. 19. What Types Provide โœ“ modular development โœ“ can be learned easily โœ“ non-invasive โœ“ long-term vision โœ“ clean output To Type or Not To Type Pros of JavaScript โ€ข EVERYWHERE โ€ข awesome libraries โ€ข flexible Cons of JavaScript โ€ข dynamic typing โ€ข lack of modularity โ€ข verbose patterns @fvcproductions
  20. 20. My somewhat morbid dog analogy ๐Ÿพ > @fvcproductions
  21. 21. THE TODAY
  22. 22. @fvcproductions
  23. 23. (3) Homework Assignments ๐Ÿ“š @fvcproductions
  24. 24. 3 ) ) ) ) ) @fvcproductions
  25. 25. ListeningTastingSeeing Touching Smelling @fvcproductions
  26. 26. Option 1. ๐ŸŽฅ Watch the creator of TypeScript talk about TypeScript at the #MSBuild Conference โ€œWhatโ€™s New In TypeScriptโ€ by Anders Hejlsberg @fvcproductions
  27. 27. Option 2. ๐ŸŽ“ Enroll in an edX course on TypeScript. @fvcproductions
  28. 28. Option 3. ๐ŸŽฎ Screw homework and go play instead! typescriptlang.org/play@fvcproductions
  29. 29. Option 4. ๐ŸŽ™ Podcasts! @fvcproductions
  30. 30. Option 5. ๐Ÿฐ Let them eat cake ! @fvcproductions
  31. 31. Bonus Lesson - Cool $hit! @fvcproductions
  32. 32. Abstract Syntax Trees (AST)
  33. 33. TypeScript 2.6 JSDoc & Inferring Types
  34. 34. TypeScript 2.5 Extracting Functions
  35. 35. Bonus Bonus Lesson Jingle Time! ๐ŸŽน โ€ข You know that one part of class you werenโ€™t really expecting but that you ended up enjoying anyways? โ€ข This is that part. TypeScript 101 We just had so much fun ECMAScript was not enough We want JavaScript that scales And with types and transpilation There is no way we can fail TypeScript is super anal But we get way less bugs Just useeeee TypeScript. @fvcproductions
  36. 36. Thanks for listening! โ˜บ @fvcproductions fvcproductions in/fvcproductions Slides will be uploaded ASAP to slideshare.net/fvcproductions
  37. 37. Credits 1. Mathematical Finn Photo: https://glarbinator.deviantart.com/art/Mathematical-Finn-417768395 2. TypeScript Official Website: http://www.typescriptlang.org/ 3. Severus Snape Video: https://www.youtube.com/watch?v=PnOyBLT07R8 4. GitHub Icon: https://www.iconfinder.com/iconsets/ionicons 5. Twitter & LinkedIn Icons: https://www.iconfinder.com/iconsets/free-social-icons 6. Fonts: Segoe UI, SF Pro Text, Input Mono 7. Google Trends: https://g.co/trends/2M11R 8. TypeScript and JavaScript Logos: egghead.io 9. Stack Overflow 2017 Survey: https://insights.stackoverflow.com/survey/2017 10. TypeScript GIFs: http://twittervideodownloader.com/ & @typescriptlang 11. EdX Course: https://www.edx.org/course/introduction-typescript-2-microsoft-dev273x-0#! 12. List of Editors: https://www.wikiwand.com/en/TypeScript @fvcproductions
  38. 38. Appendix @fvcproductions
  39. 39. @fvcproductions

ร—