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.

1. A brief class that 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. @fvcproductions

5. Hi, I’m Frances (your professor)! !
@fvcproductions

6. Norfolk, VA @fvcproductions

7. @fvcproductions
fvcproductions
fvcproductions.com
hello@fvcproductions.com

8. The Syllabus 📝
@fvcproductions

9. Prerequisites
(1) “JavaScript 202” & lil bitty math
(2) Some open-mindedness
(3) The TypeScript compiler
@fvcproductions

11. Grading
@fvcproductions
Pass/Fail

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

13. TAs
(1) Google
(2) Stack
Overflow
(3) GitHub
(4) Quora
(5) Medium
(6) Reddit
@fvcproductions

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

15. I’ve never heard of TypeScript?! 😱
@fvcproductions

16. @fvcproductions

17. @fvcproductions

18. @fvcproductions

19. @fvcproductions

20. @fvcproductions

21. @fvcproductions

22. @fvcproductions

23. @fvcproductions

24. @fvcproductions

25. @fvcproductions

26. @fvcproductions

27. @fvcproductions

28. 60 million6 million
@fvcproductions

29. • 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…

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

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

32. @fvcproductions

33. @fvcproductions

34. @fvcproductions@fvcproductions

35. The Nitty Gritty/Getting Started 💻
npm i -g typescript
Installing TypeScript
npm i -g tslint
Installing TSLint
@fvcproductions@fvcproductions

36. @fvcproductions
The Nitty Gritty Continued 💻

37. Compiling our file to JS
tsc multiplication.ts
@fvcproductions
The
Nitty Gritty
Continued 💻
@fvcproductions

38. Configuring options
touch tsconfig.json
@fvcproductions
The
Nitty Gritty
Continued 💻
@fvcproductions

39. Abstract Syntax Trees (AST)
@fvcproductions

40. @fvcproductions

41. @fvcproductions

42. @fvcproductions

43. @fvcproductions

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

45. @fvcproductions

46. @fvcproductions

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. To Be
is
To Type
@fvcproductions@fvcproductions

50. My somewhat morbid dog analogy 🐾
> @fvcproductions

51. THE TODAY
@fvcproductions

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

53. @fvcproductions

54. @fvcproductions

55. @fvcproductions

56. @fvcproductions

57. @fvcproductions

58. @fvcproductions

59. Companies ❤ TypeScript
@fvcproductions

60. Developers ❤ TypeScript
@fvcproductions

61. @fvcproductions

62. What other metrics can I use? 🤔
@fvcproductions

63. @fvcproductions

64. 9
1
@fvcproductions

65. 11
3
@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

73. @fvcproductions@fvcproductions

74. @fvcproductions

75. @fvcproductions

77. (3) Homework Assignments 📚
@fvcproductions

78. 📚📚📚
@fvcproductions

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

80. @fvcproductions

81. @fvcproductions

82. @fvcproductions

83. @fvcproductions

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. @fvcproductions

88. @fvcproductions

89. @fvcproductions

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

91. So did I pass? 😂
@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