SlideShare a Scribd company logo
A brief class that introduces the benefits
TypeScript provides to large scale projects.
Prerequisites: JavaScript 202
TypeScript 101
🎓 Professor Frances Coronel
@fvcproductions
fvcproductions
in/fvcproductions
Syllabus
(1) TypeScript vs JavaScript 🎭
(2) The Rise of TypeScript’s
Popularity 📈
(3) Homework Assignments 📚
@fvcproductions
W8, what is TypeScript? 🤔
@fvcproductions
TypeScript 101 - We RISE Tech Conference
TypeScript 101 - We RISE Tech Conference
TypeScript 101 - We RISE Tech Conference
TypeScript 101 - We RISE Tech Conference
TypeScript 101 - We RISE Tech Conference
TypeScript 101 - We RISE Tech Conference
TypeScript 101 - We RISE Tech Conference
TypeScript 101 - We RISE Tech Conference
60 million6 million
• 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
(1) TypeScript vs JavaScript 🎭
.ts .js
@fvcproductions
TypeScript 101 - We RISE Tech Conference
@fvcproductions
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
@fvcproductions
JavaScript is TypeScript but
TypeScript is not JavaScript.
Superset vs
Subset 🔘
@fvcproductions
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
To Be
is
To Type
@fvcproductions
(2) The Rise of TypeScript’s Popularity 📈
@fvcproductions
@fvcproductions
TypeScript 101 - We RISE Tech Conference
Companies ❤ TypeScript
@fvcproductions
Developers ❤ TypeScript
@fvcproductions
TypeScript 101 - We RISE Tech Conference
@fvcproductions
9
1
@fvcproductions
@fvcproductions
11
3
"The platform
no developer
should live
without"
- me
@fvcproductions
TypeScript 101 - We RISE Tech Conference
TypeScript 101 - We RISE Tech Conference
@fvcproductions
15 Most Popular Languages
On GitHub by Opened Pull Requests
With Percentage Change from Previous Year
@fvcproductions
@fvcproductions
@fvcproductions
@fvcproductions
@fvcproductions
TypeScript 101 - We RISE Tech Conference
TypeScript 101 - We RISE Tech Conference
*+,
@fvcproductions
(3) Homework Assignments 📚
Option 1. 🎓 Finish the Google Codelab
@fvcproductions
@fvcproductions
@fvcproductions
TypeScript 101 - We RISE Tech Conference
Option 2. 🎙 Podcasts!
@fvcproductions
Option 3. 🎥 Watch the creator of TypeScript talk about
TypeScript at the #MSBuild Conference
“What’s New In TypeScript” by Anders Hejlsberg
@fvcproductions
Bonus Option. 🎮 Screw homework and go play instead!
typescriptlang.org/play
@fvcproductions
TypeScript 101 - We RISE Tech Conference
TypeScript 101 - We RISE Tech Conference
TypeScript 101 - We RISE Tech Conference
TypeScript 101 - We RISE Tech Conference
Thanks for listening! 🍫🍓
@fvcproductions
fvcproductions
in/fvcproductions
Slides will be uploaded ASAP to
slideshare.net/fvcproductions
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
My somewhat morbid dog analogy 🐾
> @fvcproductions
THE TODAY
@fvcproductions
Option 1. 🎥 Watch the creator of TypeScript talk about
TypeScript at the #MSBuild Conference
“What’s New In TypeScript” by Anders Hejlsberg
Option 2. 🎓 Enroll in an edX course on TypeScript
created by Microsoft that starts tomorrow
Option 3. 🎮 Screw homework and go play instead!
typescriptlang.org/play
Thanks for listening! ☺
@fvcproductions
fvcproductions
in/fvcproductions
Slides will be uploaded ASAP at
speakerdeck.com/fvcproductions
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
Appendix
TypeScript 101 - We RISE Tech Conference
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
😍
Evaluating the Popularity of a Programming Language 🤓
TypeScript 101 - We RISE Tech Conference
15 Most Popular Languages
On GitHub by Opened Pull Requests
With Percentage Change from Previous Year
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.
Abstract Syntax Trees (AST)
Extracting
Functions
TypeScript 101 - We RISE Tech Conference
TypeScript 101 - We RISE Tech Conference
TypeScript 101 - We RISE Tech Conference
My somewhat morbid dog analogy
>

More Related Content

PDF
TypeScript 101 - Women Who Code - CONNECT 2018
PPTX
Ready, set, go! An introduction to the Go programming language
PDF
Mobile Apps by Pure Go with Reverse Binding
PDF
【初心者歓迎】Gitハンズオンセミナー 導入編
PPTX
PDF
Agile team workflow
PDF
iTHome Gopher Day 2017: What can Golang do? (Using project 52 as examples)
PDF
Pycon2011 android programming-using_python
TypeScript 101 - Women Who Code - CONNECT 2018
Ready, set, go! An introduction to the Go programming language
Mobile Apps by Pure Go with Reverse Binding
【初心者歓迎】Gitハンズオンセミナー 導入編
Agile team workflow
iTHome Gopher Day 2017: What can Golang do? (Using project 52 as examples)
Pycon2011 android programming-using_python

What's hot (18)

PDF
Go for Mobile Games
PPTX
Hacktoberfest 2020 - Open source for beginners
PDF
The Awesomeness of Go
PPTX
Android developing in a wrong way
PDF
PDF
如何透過 Golang 與 Heroku 來一鍵部署 臉書機器人與 Line Bot
PDF
Contributing to Open Source #Hacktoberfest
PPTX
Let's Git Together! - Hacktoberfest 2020
PDF
iThome Chatbot Day: 透過 Golang 無痛建置機器學習聊天機器人
PDF
Running jenkins in a public cloud - common issues and some solutions
PPTX
Write microservice in golang
PDF
Gitting better
PDF
Documenting apps ti confnyc
PDF
Git intro fajar muslim
PDF
Golang taipei #45 10th birthday
PDF
Understanding pseudo-version and Go1.14+ with notes
PDF
Introduction to the Kotlin programming language - Andrzej Jóźwiak - JUG Łódź ...
Go for Mobile Games
Hacktoberfest 2020 - Open source for beginners
The Awesomeness of Go
Android developing in a wrong way
如何透過 Golang 與 Heroku 來一鍵部署 臉書機器人與 Line Bot
Contributing to Open Source #Hacktoberfest
Let's Git Together! - Hacktoberfest 2020
iThome Chatbot Day: 透過 Golang 無痛建置機器學習聊天機器人
Running jenkins in a public cloud - common issues and some solutions
Write microservice in golang
Gitting better
Documenting apps ti confnyc
Git intro fajar muslim
Golang taipei #45 10th birthday
Understanding pseudo-version and Go1.14+ with notes
Introduction to the Kotlin programming language - Andrzej Jóźwiak - JUG Łódź ...
Ad

Similar to TypeScript 101 - We RISE Tech Conference (20)

PDF
TypeScript 101 - Studio Session - Accenture Liquid Studio
PDF
TypeScript 101 - Beer City Code
PDF
Scenic City Summit 2018 - TypeScript 101
PDF
2020 [pweb] 13 typescript
PDF
[Google I/O 2018 Highlights] Flutter / WearOS
PDF
One language to rule them all type script
PDF
JavaScript - The Universal Platform?
PDF
Hands On With OpenSocial and Embedded Experiences
PPTX
Hacktoberfest'24 _ GDG on Campus BU.pptx
PPT
Lunch and learn as3_frameworks
PDF
Continuous delivery of embedded systems embedded meetup
PDF
How to get trusted AI in your favorite IDE
PDF
Resume
PPTX
Javascript Apps at Build Artifacts
PPTX
Tools & Frameworks + Save Nature & Save Animal.pptx
PPT
TypeScript - Javascript done right
PPTX
Introductory session flutter festival
PDF
Everyone wants (someone else) to do it: writing documentation for open source...
PPTX
Rome 2017: Building advanced voice assistants and chat bots
PDF
MaxGrosshandlerResume
TypeScript 101 - Studio Session - Accenture Liquid Studio
TypeScript 101 - Beer City Code
Scenic City Summit 2018 - TypeScript 101
2020 [pweb] 13 typescript
[Google I/O 2018 Highlights] Flutter / WearOS
One language to rule them all type script
JavaScript - The Universal Platform?
Hands On With OpenSocial and Embedded Experiences
Hacktoberfest'24 _ GDG on Campus BU.pptx
Lunch and learn as3_frameworks
Continuous delivery of embedded systems embedded meetup
How to get trusted AI in your favorite IDE
Resume
Javascript Apps at Build Artifacts
Tools & Frameworks + Save Nature & Save Animal.pptx
TypeScript - Javascript done right
Introductory session flutter festival
Everyone wants (someone else) to do it: writing documentation for open source...
Rome 2017: Building advanced voice assistants and chat bots
MaxGrosshandlerResume
Ad

More from Frances Coronel (20)

PDF
Conexión y Cultura con Asana
PDF
Stories from Latinas in Engineering with KeepTruckin
PDF
Uncharted Territories: On Being the First in Tech
PDF
Pride Month Event with Blend: Intersecting Identities in Tech
PDF
My State of Work | MS&E 184 - Spring 2020
PDF
Engineering Mentorship with Asana
PDF
Pluralsight LIVE 2019 | Progressive Web Apps 101
PDF
Welcome to Slack, Mindot!
PDF
RevolutionConf 2019 - Progressive Web Apps 101
PDF
JSConf EU 2019 - Being a Unicorn Working for Another Unicorn
PDF
Welcome to Slack, Diablo Valley College!
PDF
Welcome to Slack, Coro Fellows!
PDF
Telegraph Track - Progressive Web Apps 101
PDF
JSConf Hawaiʻi 2019
PDF
Side Hustle: Techqueria.org
PDF
General Assembly - So You Want To Be A Wizard
PDF
GDG DevFest 2018 - Progressive Web Apps 101
PDF
Scenic City Summit 2018 - Progressive Web Apps 101
PDF
GDG SF Meetup - Progressive Web Apps 101
PDF
A Fullstack Future - Progressive Web Apps
Conexión y Cultura con Asana
Stories from Latinas in Engineering with KeepTruckin
Uncharted Territories: On Being the First in Tech
Pride Month Event with Blend: Intersecting Identities in Tech
My State of Work | MS&E 184 - Spring 2020
Engineering Mentorship with Asana
Pluralsight LIVE 2019 | Progressive Web Apps 101
Welcome to Slack, Mindot!
RevolutionConf 2019 - Progressive Web Apps 101
JSConf EU 2019 - Being a Unicorn Working for Another Unicorn
Welcome to Slack, Diablo Valley College!
Welcome to Slack, Coro Fellows!
Telegraph Track - Progressive Web Apps 101
JSConf Hawaiʻi 2019
Side Hustle: Techqueria.org
General Assembly - So You Want To Be A Wizard
GDG DevFest 2018 - Progressive Web Apps 101
Scenic City Summit 2018 - Progressive Web Apps 101
GDG SF Meetup - Progressive Web Apps 101
A Fullstack Future - Progressive Web Apps

Recently uploaded (20)

PPTX
TLE Review Electricity (Electricity).pptx
PDF
Per capita expenditure prediction using model stacking based on satellite ima...
PPTX
Spectroscopy.pptx food analysis technology
PDF
Encapsulation theory and applications.pdf
PDF
NewMind AI Weekly Chronicles - August'25-Week II
PDF
Encapsulation_ Review paper, used for researhc scholars
PDF
Advanced methodologies resolving dimensionality complications for autism neur...
PPTX
Tartificialntelligence_presentation.pptx
PDF
Reach Out and Touch Someone: Haptics and Empathic Computing
PDF
Mushroom cultivation and it's methods.pdf
PDF
Architecting across the Boundaries of two Complex Domains - Healthcare & Tech...
PPTX
1. Introduction to Computer Programming.pptx
PDF
MIND Revenue Release Quarter 2 2025 Press Release
PDF
Diabetes mellitus diagnosis method based random forest with bat algorithm
PDF
August Patch Tuesday
PPTX
Programs and apps: productivity, graphics, security and other tools
PPTX
Digital-Transformation-Roadmap-for-Companies.pptx
PDF
Network Security Unit 5.pdf for BCA BBA.
PDF
Video forgery: An extensive analysis of inter-and intra-frame manipulation al...
PDF
Building Integrated photovoltaic BIPV_UPV.pdf
TLE Review Electricity (Electricity).pptx
Per capita expenditure prediction using model stacking based on satellite ima...
Spectroscopy.pptx food analysis technology
Encapsulation theory and applications.pdf
NewMind AI Weekly Chronicles - August'25-Week II
Encapsulation_ Review paper, used for researhc scholars
Advanced methodologies resolving dimensionality complications for autism neur...
Tartificialntelligence_presentation.pptx
Reach Out and Touch Someone: Haptics and Empathic Computing
Mushroom cultivation and it's methods.pdf
Architecting across the Boundaries of two Complex Domains - Healthcare & Tech...
1. Introduction to Computer Programming.pptx
MIND Revenue Release Quarter 2 2025 Press Release
Diabetes mellitus diagnosis method based random forest with bat algorithm
August Patch Tuesday
Programs and apps: productivity, graphics, security and other tools
Digital-Transformation-Roadmap-for-Companies.pptx
Network Security Unit 5.pdf for BCA BBA.
Video forgery: An extensive analysis of inter-and intra-frame manipulation al...
Building Integrated photovoltaic BIPV_UPV.pdf

TypeScript 101 - We RISE Tech Conference

  • 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
  • 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
  • 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
  • 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
  • 23. (2) The Rise of TypeScript’s Popularity 📈 @fvcproductions
  • 32. "The platform no developer should live without" - me @fvcproductions
  • 36. 15 Most Popular Languages On GitHub by Opened Pull Requests With Percentage Change from Previous Year @fvcproductions
  • 44. Option 1. 🎓 Finish the Google Codelab @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
  • 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
  • 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.
  • 77. My somewhat morbid dog analogy >