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.

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

2. The Syllabus 📝
@fvcproductions

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

5. Grading
@fvcproductions
Pass/Fail

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

9. Instructor
@fvcproductions
Frances Coronel
Present Future (?)Past

11. @fvcproductions
fvcproductions
in/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

27. 60 million6 million
@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

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

48. To Be
is
To Type
@fvcproductions@fvcproductions

49. My somewhat morbid dog analogy 🐾
> @fvcproductions

50. THE TODAY
@fvcproductions

51. @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. ./0
@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