TypeScript 101 - Beer City Code
2 likes1,476 views
This document outlines a course on TypeScript, highlighting its benefits for large scale projects, prerequisites, and learning objectives. It covers the differences between TypeScript and JavaScript, the rise of TypeScript's popularity, and provides resources for further learning. The course aims to help participants understand the role of TypeScript in the front-end ecosystem and develop informed opinions on its applicability to their projects.
TypeScript 101 - Beer City Code
- 1. A brief class that introduces the benefits TypeScript provides to large scale projects. TypeScript 101
- 3. Prerequisites (1) “JavaScript 202” & lil bitty math (2) Some open-mindedness (3) The TypeScript compiler @fvcproductions
- 6. Course Overview • Meeting Days & Times • Saturday - June 23rd, 2018 • 10:00 am to 10:50 am • Calvin College, Bizstream Auditorium @fvcproductions
- 8. Learning Objectives 1. To identify the key benefits and traits of TypeScript. 🗝 2. To be able to understand the role TypeScript has in the front-end ecosystem. 🌍 3. To be able to form a profession opinion on whether or not TypeScript would be useful for your projects. 🤔 @fvcproductions
- 12. TAs (1) Google (2) Stack Overflow (3) GitHub (4) Quora (5) Medium (6) Reddit @fvcproductions
- 13. Outline (1) TypeScript vs JavaScript 🎭 (2) The Rise of TypeScript’s Popularity 📈 (3) Homework Assignments 📚 @fvcproductions
- 14. I’ve never heard of TypeScript?! 😱 @fvcproductions
- 15. @fvcproductions
- 16. @fvcproductions
- 17. @fvcproductions
- 18. @fvcproductions
- 19. @fvcproductions
- 20. @fvcproductions
- 21. @fvcproductions
- 22. @fvcproductions
- 23. @fvcproductions
- 24. @fvcproductions
- 25. @fvcproductions
- 26. @fvcproductions
- 28. • 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 TypeScript is…
- 29. • TypeScript is not trying to replace JavaScript • TypeScript is extending JavaScript • TypeScript is not trying to replace JavaScript • TypeScript is extending JavaScript • TypeScript is not trying to replace JavaScript • TypeScript is extending JavaScript TLDR; @fvcproductions
- 30. (1) TypeScript vs JavaScript 🎭 .ts .js @fvcproductions
- 31. @fvcproductions
- 32. @fvcproductions
- 34. The Nitty Gritty/Getting Started 💻 npm i -g typescript Installing TypeScript npm i -g tslint Installing TSLint @fvcproductions@fvcproductions
- 35. @fvcproductions The Nitty Gritty Continued 💻
- 36. Compiling our file to JS tsc multiplication.ts @fvcproductions The Nitty Gritty Continued 💻 @fvcproductions
- 37. Configuring options touch tsconfig.json @fvcproductions The Nitty Gritty Continued 💻 @fvcproductions
- 38. Abstract Syntax Trees (AST) @fvcproductions
- 39. @fvcproductions
- 40. @fvcproductions
- 41. @fvcproductions
- 42. @fvcproductions
- 43. JavaScript is TypeScript but TypeScript is not JavaScript. Superset vs Subset 🔘 @fvcproductions
- 44. @fvcproductions
- 45. @fvcproductions
- 46. The Dark Side • Missing types • especially with libraries • Not as flexible or popular as JavaScript • JavaScript is “good enough” • Having to persuade a team • Another layer of complexity @fvcproductions
- 47. 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
- 49. My somewhat morbid dog analogy 🐾 > @fvcproductions
- 51. @fvcproductions
- 52. (2) The Rise of TypeScript’s Popularity 📈 @fvcproductions
- 53. @fvcproductions
- 54. @fvcproductions
- 55. @fvcproductions
- 56. @fvcproductions
- 57. @fvcproductions
- 58. @fvcproductions
- 61. @fvcproductions
- 62. What other metrics can I use? 🤔 @fvcproductions
- 63. @fvcproductions
- 66. "The platform no developer should live without" - me @fvcproductions
- 67. @fvcproductions
- 68. @fvcproductions
- 69. @fvcproductions
- 70. 15 Most Popular Languages On GitHub by Opened Pull Requests With Percentage Change from Previous Year @fvcproductions
- 71. @fvcproductions
- 72. @fvcproductions
- 74. @fvcproductions
- 75. @fvcproductions
- 77. (3) Homework Assignments 📚 @fvcproductions
- 79. Option 1. 🎓 Finish the Google Codelab @fvcproductions
- 80. I’ve never heard of these… 😒 • Google Developers Codelabs provide a guided, tutorial, hands-on coding experience. • Most codelabs will step you through the process of building a small application, or adding a new feature to an existing application. • They cover a wide range of topics such as Android Wear, Google Compute Engine, Project Tango, and Google APIs on iOS. @fvcproductions
- 81. @fvcproductions
- 82. @fvcproductions
- 83. @fvcproductions
- 84. @fvcproductions
- 85. Option 2. 🎙 Podcasts 📖 Books @fvcproductions
- 86. Option 3. 🎥 Watch the creator of TypeScript talk about TypeScript at the #MSBuild Conference “What’s New In TypeScript 2018” by Anders Hejlsberg @fvcproductions
- 87. Bonus Option. 🎮 Screw homework and go play instead! typescriptlang.org/play @fvcproductions
- 88. @fvcproductions
- 89. @fvcproductions
- 90. @fvcproductions
- 91. Learning Objectives 1. To identify the key benefits and traits of TypeScript. 🗝 2. To be able to understand the role TypeScript has in the front-end ecosystem. 🌍 3. To be able to form a profession opinion on whether or not TypeScript would be useful for your projects. 🤔 @fvcproductions
- 92. So did I pass? 😂 @fvcproductions You pass if you take the time to explore TypeScript out yourself and form your own professional opinion.
- 93. Thanks for listening! 🍫🍓 @fvcproductions fvcproductions in/fvcproductions Slides will be uploaded ASAP to slideshare.net/fvcproductions
- 94. Readings & References 1. TypeScript Official Website: http://www.typescriptlang.org/ 2. Severus Snape Video: https://www.youtube.com/watch?v=PnOyBLT07R8 3. GitHub Icon: https://www.iconfinder.com/iconsets/ionicons 4. Twitter & LinkedIn Icons: https://www.iconfinder.com/iconsets/free-social- icons 5. Fonts: Segoe UI, SF Pro Text, Input Mono 6. Google Trends: https://g.co/trends/2M11R 7. TypeScript and JavaScript Logos: egghead.io 8. Stack Overflow 2017 Survey: https://insights.stackoverflow.com/survey/ 2017 9. TypeScript GIFs: http://twittervideodownloader.com/ & @typescriptlang 10. EdX Course: https://www.edx.org/course/introduction-typescript-2- microsoft-dev273x-0#! 11. List of Editors: https://www.wikiwand.com/en/TypeScript 12. Olgierd Dziamski: https://www.quora.com/What-are-some-good-reasons- to-switch-from-JavaScript-to-Typescript/answer/Olgierd-Dziamski? share=c21b06e4&srid=nukj 13. Kashif Saeed https://www.quora.com/What-are-some-good-reasons-to- switch-from-JavaScript-to-Typescript/answer/Kashif-Saeed-8? share=88d55481&srid=nukj 14. Maciej Dziardziel,: https://www.quora.com/Does-TypeScript-fix-the- problems-JavaScript-has-Will-it-become-common-to-use-on-top-of- JavaScript/answer/Maciej-Dziardziel?share=54019b5c&srid=nukj 15. Pass/Fail Icon: https://icons8.com/icon/46878/test-zum-teil-absolviert 16. Carbon.sh https://carbon.now.sh 17. TypeScript Deep Dive: https://basarat.gitbooks.io/typescript/content/ docs/getting-started.html 18. SitePen: https://www.sitepen.com/ 19. What’s New in TypeScript: https://www.youtube.com/watch?v=hDACN- BGvI8 20. Quokka: https://quokkajs.com/ @fvcproductions