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.
A brief class that introduces the
benefits TypeScript provides to large
scale projects.
TypeScript 101
The Syllabus 📝
@fvcproductions
Prerequisites
(1) “JavaScript 202” & lil bitty math
(2) Some open-mindedness
(3) The TypeScript compiler
@fvcproductions
Grading
@fvcproductions
Pass/Fail
Course Overview
• Meeting Days & Times
• Saturday - June 23rd, 2018
• 10:00 am to 10:50 am
• Calvin College, Bizstream Aud...
Learning Objectives
1. To identify the key benefits and traits of TypeScript. 🗝
2. To be able to understand the role TypeS...
Instructor
@fvcproductions
Frances Coronel
Present Future (?)Past
@fvcproductions
fvcproductions
in/fvcproductions
TAs
(1) Google
(2) Stack
Overflow
(3) GitHub
(4) Quora
(5) Medium
(6) Reddit
@fvcproductions
Outline
(1) TypeScript vs JavaScript 🎭
(2) The Rise of TypeScript’s
Popularity 📈
(3) Homework Assignments 📚
@fvcproductions
I’ve never heard of TypeScript?! 😱
@fvcproductions
@fvcproductions
@fvcproductions
@fvcproductions
@fvcproductions
@fvcproductions
@fvcproductions
@fvcproductions
@fvcproductions
@fvcproductions
@fvcproductions
@fvcproductions
@fvcproductions
60 million6 million
@fvcproductions
• strict syntactical superset of JavaScript
• programming language developed & maintained by
Microsoft that is completely ...
• TypeScript is not trying to replace JavaScript
• TypeScript is extending JavaScript
• TypeScript is not trying to replac...
(1) TypeScript vs JavaScript 🎭
.ts .js
@fvcproductions
@fvcproductions
@fvcproductions
@fvcproductions@fvcproductions
The Nitty Gritty/Getting Started 💻
npm i -g typescript
Installing TypeScript
npm i -g tslint
Installing TSLint
@fvcproduct...
@fvcproductions
The Nitty Gritty Continued 💻
Compiling our file to JS
tsc multiplication.ts
@fvcproductions
The
Nitty Gritty
Continued 💻
@fvcproductions
Configuring options
touch tsconfig.json
@fvcproductions
The
Nitty Gritty
Continued 💻
@fvcproductions
Abstract Syntax Trees (AST)
@fvcproductions
@fvcproductions
@fvcproductions
@fvcproductions
@fvcproductions
JavaScript is TypeScript but
TypeScript is not JavaScript.
Superset vs
Subset 🔘
@fvcproductions
@fvcproductions
@fvcproductions
The Dark Side
• Missing types
• especially with libraries
• Not as flexible or popular as
JavaScript
• JavaScript is “good...
What Types Provide
✓ modular development
✓ can be learned easily
✓ non-invasive
✓ long-term vision
✓ clean output
To Type ...
To Be
is
To Type
@fvcproductions@fvcproductions
My somewhat morbid dog analogy 🐾
> @fvcproductions
THE TODAY
@fvcproductions
@fvcproductions
(2) The Rise of TypeScript’s Popularity 📈
@fvcproductions
@fvcproductions
@fvcproductions
@fvcproductions
@fvcproductions
@fvcproductions
@fvcproductions
Companies ❤ TypeScript
@fvcproductions
Developers ❤ TypeScript
@fvcproductions
@fvcproductions
What other metrics can I use? 🤔
@fvcproductions
@fvcproductions
9
1
@fvcproductions
11
3
@fvcproductions
"The platform
no developer
should live
without"
- me
@fvcproductions
@fvcproductions
@fvcproductions
@fvcproductions
15 Most Popular Languages
On GitHub by Opened Pull Requests
With Percentage Change from Previous Year
@fvcproductions
@fvcproductions
@fvcproductions
@fvcproductions@fvcproductions
@fvcproductions
@fvcproductions
(3) Homework Assignments 📚
@fvcproductions
./0
@fvcproductions
Option 1. 🎓 Finish the Google Codelab
@fvcproductions
I’ve never heard of these… 😒
• Google Developers Codelabs provide a guided, tutorial,
hands-on coding experience.
• Most c...
@fvcproductions
@fvcproductions
@fvcproductions
@fvcproductions
Option 2. 🎙 Podcasts 📖 Books
@fvcproductions
Option 3. 🎥 Watch the creator of TypeScript talk about
TypeScript at the #MSBuild Conference
“What’s New In TypeScript 201...
Bonus Option. 🎮 Screw homework and go play instead!
typescriptlang.org/play
@fvcproductions
@fvcproductions
@fvcproductions
@fvcproductions
Learning Objectives
1. To identify the key benefits and traits of TypeScript. 🗝
2. To be able to understand the role TypeS...
So did I pass? 😂
@fvcproductions
You pass if you take the time to
explore TypeScript out yourself
and form your own
profes...
Thanks for listening! 🍫🍓
@fvcproductions
fvcproductions
in/fvcproductions
Slides will be uploaded ASAP to
slideshare.net/f...
Readings & References
1. TypeScript Official Website: http://www.typescriptlang.org/
2. Severus Snape Video: https://www.y...
TypeScript 101 - Beer City Code
TypeScript 101 - Beer City Code
TypeScript 101 - Beer City Code
TypeScript 101 - Beer City Code
Upcoming SlideShare
Loading in …5
×

TypeScript 101 - Beer City Code

331 views

Published on

Presented Saturday - June 23rd, 2018

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

TypeScript 101 - Beer City Code

  1. 1. A brief class that introduces the benefits TypeScript provides to large scale projects. TypeScript 101
  2. 2. The Syllabus 📝 @fvcproductions
  3. 3. Prerequisites (1) “JavaScript 202” & lil bitty math (2) Some open-mindedness (3) The TypeScript compiler @fvcproductions
  4. 4. Grading @fvcproductions Pass/Fail
  5. 5. Course Overview • Meeting Days & Times • Saturday - June 23rd, 2018 • 10:00 am to 10:50 am • Calvin College, Bizstream Auditorium @fvcproductions
  6. 6. 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
  7. 7. Instructor @fvcproductions Frances Coronel Present Future (?)Past
  8. 8. @fvcproductions fvcproductions in/fvcproductions
  9. 9. TAs (1) Google (2) Stack Overflow (3) GitHub (4) Quora (5) Medium (6) Reddit @fvcproductions
  10. 10. Outline (1) TypeScript vs JavaScript 🎭 (2) The Rise of TypeScript’s Popularity 📈 (3) Homework Assignments 📚 @fvcproductions
  11. 11. I’ve never heard of TypeScript?! 😱 @fvcproductions
  12. 12. @fvcproductions
  13. 13. @fvcproductions
  14. 14. @fvcproductions
  15. 15. @fvcproductions
  16. 16. @fvcproductions
  17. 17. @fvcproductions
  18. 18. @fvcproductions
  19. 19. @fvcproductions
  20. 20. @fvcproductions
  21. 21. @fvcproductions
  22. 22. @fvcproductions
  23. 23. @fvcproductions
  24. 24. 60 million6 million @fvcproductions
  25. 25. • 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…
  26. 26. • 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
  27. 27. (1) TypeScript vs JavaScript 🎭 .ts .js @fvcproductions
  28. 28. @fvcproductions
  29. 29. @fvcproductions
  30. 30. @fvcproductions@fvcproductions
  31. 31. The Nitty Gritty/Getting Started 💻 npm i -g typescript Installing TypeScript npm i -g tslint Installing TSLint @fvcproductions@fvcproductions
  32. 32. @fvcproductions The Nitty Gritty Continued 💻
  33. 33. Compiling our file to JS tsc multiplication.ts @fvcproductions The Nitty Gritty Continued 💻 @fvcproductions
  34. 34. Configuring options touch tsconfig.json @fvcproductions The Nitty Gritty Continued 💻 @fvcproductions
  35. 35. Abstract Syntax Trees (AST) @fvcproductions
  36. 36. @fvcproductions
  37. 37. @fvcproductions
  38. 38. @fvcproductions
  39. 39. @fvcproductions
  40. 40. JavaScript is TypeScript but TypeScript is not JavaScript. Superset vs Subset 🔘 @fvcproductions
  41. 41. @fvcproductions
  42. 42. @fvcproductions
  43. 43. 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
  44. 44. 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
  45. 45. To Be is To Type @fvcproductions@fvcproductions
  46. 46. My somewhat morbid dog analogy 🐾 > @fvcproductions
  47. 47. THE TODAY @fvcproductions
  48. 48. @fvcproductions
  49. 49. (2) The Rise of TypeScript’s Popularity 📈 @fvcproductions
  50. 50. @fvcproductions
  51. 51. @fvcproductions
  52. 52. @fvcproductions
  53. 53. @fvcproductions
  54. 54. @fvcproductions
  55. 55. @fvcproductions
  56. 56. Companies ❤ TypeScript @fvcproductions
  57. 57. Developers ❤ TypeScript @fvcproductions
  58. 58. @fvcproductions
  59. 59. What other metrics can I use? 🤔 @fvcproductions
  60. 60. @fvcproductions
  61. 61. 9 1 @fvcproductions
  62. 62. 11 3 @fvcproductions
  63. 63. "The platform no developer should live without" - me @fvcproductions
  64. 64. @fvcproductions
  65. 65. @fvcproductions
  66. 66. @fvcproductions
  67. 67. 15 Most Popular Languages On GitHub by Opened Pull Requests With Percentage Change from Previous Year @fvcproductions
  68. 68. @fvcproductions
  69. 69. @fvcproductions
  70. 70. @fvcproductions@fvcproductions
  71. 71. @fvcproductions
  72. 72. @fvcproductions
  73. 73. (3) Homework Assignments 📚 @fvcproductions
  74. 74. ./0 @fvcproductions
  75. 75. Option 1. 🎓 Finish the Google Codelab @fvcproductions
  76. 76. 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
  77. 77. @fvcproductions
  78. 78. @fvcproductions
  79. 79. @fvcproductions
  80. 80. @fvcproductions
  81. 81. Option 2. 🎙 Podcasts 📖 Books @fvcproductions
  82. 82. Option 3. 🎥 Watch the creator of TypeScript talk about TypeScript at the #MSBuild Conference “What’s New In TypeScript 2018” by Anders Hejlsberg @fvcproductions
  83. 83. Bonus Option. 🎮 Screw homework and go play instead! typescriptlang.org/play @fvcproductions
  84. 84. @fvcproductions
  85. 85. @fvcproductions
  86. 86. @fvcproductions
  87. 87. 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
  88. 88. So did I pass? 😂 @fvcproductions You pass if you take the time to explore TypeScript out yourself and form your own professional opinion.
  89. 89. Thanks for listening! 🍫🍓 @fvcproductions fvcproductions in/fvcproductions Slides will be uploaded ASAP to slideshare.net/fvcproductions
  90. 90. 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

×