Presented Thursday - June 21st, 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.

1. A brief class that introduces the benefits
TypeScript provides to large scale projects.
Prerequisites: JavaScript 202
TypeScript 101

2. 🎓 Professor Frances Coronel
@fvcproductions
fvcproductions
in/fvcproductions

3. Syllabus
(1) TypeScript vs JavaScript 🎭
(2) The Rise of TypeScript’s
Popularity 📈
(3) Homework Assignments 📚
@fvcproductions

4. W8, what is TypeScript? 🤔
@fvcproductions

13. 60 million6 million

14. • 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

15. (1) TypeScript vs JavaScript 🎭
.ts .js
@fvcproductions

17. @fvcproductions

18. 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

19. @fvcproductions

20. JavaScript is TypeScript but
TypeScript is not JavaScript.
Superset vs
Subset 🔘
@fvcproductions

21. Pros of TypeScript
✔ scalability
✔ less runtime errors
✔ zero overhead
Cons of TypeScript
✗ small learning curve
✗ extra tooling needed
✗ extra step - compilation
To Type or
Not To Type
Pros of JavaScript
✔ EVERYWHERE
✔ awesome libraries
✔ flexible
Cons of JavaScript
✗ dynamic typing
✗ lack of modularity
✗ verbose patterns
@fvcproductions

22. To Be
is
To Type
@fvcproductions

23. (2) The Rise of TypeScript’s Popularity 📈
@fvcproductions

24. @fvcproductions

26. Companies ❤ TypeScript
@fvcproductions

27. Developers ❤ TypeScript
@fvcproductions

29. @fvcproductions

30. 9
1
@fvcproductions

31. @fvcproductions
11
3

32. "The platform
no developer
should live
without"
- me
@fvcproductions

35. @fvcproductions

36. 15 Most Popular Languages
On GitHub by Opened Pull Requests
With Percentage Change from Previous Year
@fvcproductions

37. @fvcproductions

38. @fvcproductions

39. @fvcproductions

40. @fvcproductions

43. *+,
@fvcproductions
(3) Homework Assignments 📚

44. Option 1. 🎓 Finish the Google Codelab
@fvcproductions

45. @fvcproductions

46. @fvcproductions

48. Option 2. 🎙 Podcasts!
@fvcproductions

49. Option 3. 🎥 Watch the creator of TypeScript talk about
TypeScript at the #MSBuild Conference
“What’s New In TypeScript” by Anders Hejlsberg
@fvcproductions

50. Bonus Option. 🎮 Screw homework and go play instead!
typescriptlang.org/play
@fvcproductions

55. Thanks for listening! 🍫🍓
@fvcproductions
fvcproductions
in/fvcproductions
Slides will be uploaded ASAP to
slideshare.net/fvcproductions

56. 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

57. My somewhat morbid dog analogy 🐾
> @fvcproductions

58. THE TODAY

59. @fvcproductions

60. Option 1. 🎥 Watch the creator of TypeScript talk about
TypeScript at the #MSBuild Conference
“What’s New In TypeScript” by Anders Hejlsberg

61. Option 2. 🎓 Enroll in an edX course on TypeScript
created by Microsoft that starts tomorrow

62. Option 3. 🎮 Screw homework and go play instead!
typescriptlang.org/play

63. Thanks for listening! ☺
@fvcproductions
fvcproductions
in/fvcproductions
Slides will be uploaded ASAP at
speakerdeck.com/fvcproductions

64. 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

65. Appendix

67. Why all the love?
1. Modular structure
2. Friendly with all editors
3. Scalable
4. Easy to learn
5. Easy to debug so less bugs!
1. Has Types
2. Good tooling and library support
3. Powers major production apps
4. Devs can be onboard fairly quickly
5. Should work on both client and
server
😍

68. Evaluating the Popularity of a Programming Language 🤓

70. 15 Most Popular Languages
On GitHub by Opened Pull Requests
With Percentage Change from Previous Year

71. Bonus Chapter -
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
Plus we get way less bugs
Just useeeee TypeScript.

72. Abstract Syntax Trees (AST)

73. Extracting
Functions

77. My somewhat morbid dog analogy
>