Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
A Non-Zero Number of TypeScript Tips
Search
Toby Ho
August 20, 2018
Programming
0
720
A Non-Zero Number of TypeScript Tips
An introduction to TypeScript.
Toby Ho
August 20, 2018
Tweet
Share
More Decks by Toby Ho
See All by Toby Ho
Debugging Ajax Calls
airportyh
0
100
How to Learn 3
airportyh
2
81
How to Learn 2
airportyh
0
97
How To Learn
airportyh
7
1.4k
Test-Driven Development that Feels Great
airportyh
0
8.8k
Other Decks in Programming
See All in Programming
為你自己學 Python - 冷知識篇
eddie
1
350
今だからこそ入門する Server-Sent Events (SSE)
nearme_tech
PRO
3
220
機能追加とリーダー業務の類似性
rinchoku
2
1.3k
パッケージ設計の黒魔術/Kyoto.go#63
lufia
3
440
AI時代のUIはどこへ行く?
yusukebe
18
8.9k
JSONataを使ってみよう Step Functionsが楽しくなる実践テクニック #devio2025
dafujii
1
530
「待たせ上手」なスケルトンスクリーン、 そのUXの裏側
teamlab
PRO
0
530
MCPとデザインシステムに立脚したデザインと実装の融合
yukukotani
4
1.4k
Design Foundational Data Engineering Observability
sucitw
3
200
個人軟體時代
ethanhuang13
0
320
Ruby×iOSアプリ開発 ~共に歩んだエコシステムの物語~
temoki
0
320
複雑なフォームに立ち向かう Next.js の技術選定
macchiitaka
2
120
Featured
See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
810
A designer walks into a library…
pauljervisheath
207
24k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
Docker and Python
trallard
45
3.6k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
520
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Transcript
A non-zero number of TypeScript Tips
Agenda • What and why • Interfaces • Optional Properties
• Class • Generic functions / methods • Strict Null Checks • VS Code Shortcuts
What is TypeScript?
What is TypeScript • Super set of JavaScript / EcmaScript
• EcmaScript Future Proof
Why TypeScript?
Type Definitions
Interfaces the shape of an object
Interface
Interface
Interface
Interface
Implementing an Interface with a Class
Class Constructor Shorthand Equivalent shorthand to previous slide
Interface Extension
Optional Properties
None
None
Optional Properties This property is optional
Type assertion (or casting)
Type assertion (or casting) Don’t do this!!!
TypeScript Static type checking with loopholes.
Interface with Methods
Implementing an Interface with Methods
Generic Functions
Put a number in a list
Put a string in a list
Generic a thing in a list
Generic Function/Methods
Generic Function/Methods TypeScript knows!!!
Generic Types
Parameterized Types (generics) T is a type parameter
Parameterized Types
Parameterized Type: Promises
Promises Uses the fetch API
Promises
Promises Uses the fetch API
Generic Function with Generic Type!!!
Generic getItems
Generic getItems But what is articles? What is T?
Generic getItems
Generic getItems Define T explicitly
Generic getItems Or define related type and let TS infer
what T is
Generic getItems T is inferred to be IArticle based on
this related type declaration
Generic getItems
Strict Null Checks
Strict Null Checks This property is optional
Strict Null Checks tsconfig.json
Strict Null Checks
Strict Null Checks
Strict Null Checks
VS Code Help
VSCode Auto Import Helper
VSCode Auto Import Helper Click that!!!
VSCode Auto Import Helper
VSCode: Looking up type definitions Mac: Command+click Windows: Control+click Mac:
Command+hover Windows: Control+hover Popup: Drilldown:
Popup
Drilldown
Summary • What and why • Interfaces • Optional Properties
• Class • Generic functions / methods • Strict Null Checks • VS Code Shortcuts