Download as PDF, PPTX
Uploaded byFrances Coronel
Scenic City Summit 2018 - TypeScript 101
This document summarizes a class introduction to TypeScript that covers: 1. The key benefits of TypeScript for large projects like adding types and interfaces for modularity. 2. An overview of TypeScript versus JavaScript including how TypeScript extends JavaScript. 3. Assignments for students to explore TypeScript further including completing a Codelab, watching videos, or playing with an online editor.
More Related Content
Similar to Scenic City Summit 2018 - TypeScript 101
Scenic City Summit 2018 - TypeScript 101
- 1. A brief classthat introduces the benefits TypeScript provides to large scale projects. Prerequisites: JavaScript 202 TypeScript 101
- 2. Hi, I’m Frances(your professor)! ! Software Engineer @slackhq @fvcproductions 🐳
- 4.
- 5. Hi, I’m Frances(your professor)! ! @fvcproductions
- 6.
- 7.
- 8.
- 9. Prerequisites (1) “JavaScript 202”& lil bitty math (2) Some open-mindedness (3) The TypeScript compiler @fvcproductions
- 11.
- 12. Learning Objectives 1. Toidentify 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
- 13. TAs (1) Google (2) Stack Overflow (3)GitHub (4) Quora (5) Medium (6) Reddit @fvcproductions
- 14. Outline (1) TypeScript vsJavaScript 🎭 (2) The Rise of TypeScript’s Popularity 📈 (3) Homework Assignments 📚 @fvcproductions
- 15. I’ve never heardof TypeScript?! 😱 @fvcproductions
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29. • strict syntacticalsuperset 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…
- 30. • TypeScript isnot 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
- 31. (1) TypeScript vsJavaScript 🎭 .ts .js @fvcproductions
- 32.
- 33.
- 34.
- 35. The Nitty Gritty/GettingStarted 💻 npm i -g typescript Installing TypeScript npm i -g tslint Installing TSLint @fvcproductions@fvcproductions
- 36. @fvcproductions The Nitty GrittyContinued 💻
- 37. Compiling our fileto JS tsc multiplication.ts @fvcproductions The Nitty Gritty Continued 💻 @fvcproductions
- 38. Configuring options touch tsconfig.json @fvcproductions The NittyGritty Continued 💻 @fvcproductions
- 39. Abstract Syntax Trees(AST) @fvcproductions
- 40.
- 41.
- 42.
- 43.
- 44. JavaScript is TypeScriptbut TypeScript is not JavaScript. Superset vs Subset 🔘 @fvcproductions
- 45.
- 46.
- 47. 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
- 48. 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.
- 50. My somewhat morbiddog analogy 🐾 > @fvcproductions
- 51.
- 52. (2) The Riseof TypeScript’s Popularity 📈 @fvcproductions
- 53.
- 54.
- 55.
- 56.
- 57.
- 58.
- 59.
- 60.
- 61.
- 62. What other metricscan I use? 🤔 @fvcproductions
- 63.
- 64.
- 65.
- 66. "The platform no developer shouldlive without" - me @fvcproductions
- 67.
- 68.
- 69.
- 70. 15 Most PopularLanguages On GitHub by Opened Pull Requests With Percentage Change from Previous Year @fvcproductions
- 71.
- 72.
- 73.
- 74.
- 75.
- 77. (3) Homework Assignments📚 @fvcproductions
- 78.
- 79. Option 1. 🎓Finish the Google Codelab @fvcproductions
- 80.
- 81.
- 82.
- 83.
- 84. Option 2. 🎙Podcasts 📖 Books @fvcproductions
- 85. Option 3. 🎥Watch the creator of TypeScript talk about TypeScript at the #MSBuild Conference “What’s New In TypeScript 2018” by Anders Hejlsberg @fvcproductions
- 86. Bonus Option. 🎮Screw homework and go play instead! typescriptlang.org/play @fvcproductions
- 87.
- 88.
- 89.
- 90. Learning Objectives 1. Toidentify 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
- 91. So did Ipass? 😂 @fvcproductions You pass if you take the time to explore TypeScript out yourself and form your own professional opinion.
- 92. Thanks for listening!🍫🍓 @fvcproductions fvcproductions in/fvcproductions Slides will be uploaded ASAP to slideshare.net/fvcproductions
- 93. 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