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

Hi, I’m Frances (your professor)! !
Software Engineer @slackhq
@fvcproductions
🐳

@fvcproductions

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

Norfolk, VA @fvcproductions

@fvcproductions
fvcproductions
fvcproductions.com
hello@fvcproductions.com

The Syllabus 📝
@fvcproductions

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

Grading
@fvcproductions
Pass/Fail

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

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 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…

• 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

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

@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 enough”
• Having to persuade a team
• Another layer of complexity
@fvcproductions

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

To Be
is
To Type
@fvcproductions@fvcproductions

My somewhat morbid dog analogy 🐾
> @fvcproductions

THE TODAY
@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

📚📚📚
@fvcproductions

Option 1. 🎓 Finish the Google Codelab
@fvcproductions

@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 2018” by Anders Hejlsberg
@fvcproductions

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

So did I pass? 😂
@fvcproductions
You pass if you take the time to
explore TypeScript out yourself
and form your own
professional opinion.

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

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