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
630
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
91
How to Learn 3
airportyh
2
68
How to Learn 2
airportyh
0
72
How To Learn
airportyh
7
1.2k
Test-Driven Development that Feels Great
airportyh
0
8.8k
Other Decks in Programming
See All in Programming
The Future of C++ Interoperability: Insights from Porting a Game to Swift
teamhimeh
0
280
ファイル先頭の use の意味、説明できますか? 〜PHP の namespace と autoloading の関係を正しく理解しよう〜 / namespace and autoloading in php
okashoi
2
470
OpenAPI を守るのは難しい
ohmori_yusuke
1
140
object-oriented-conference-2024
fuwasegu
6
1.9k
プロンプトエンジニアリング入門
tomokusaba
2
980
オブジェクト指向は必要なのか / Is object-oriented needed?
kishida
27
19k
決断するための勇気、そのためのBacklog / Courage to make decisions, Backlog for that.
seike460
PRO
4
1.9k
Compiling Python to WebAssembly with py2wasm
syrusakbary
0
140
AppDeveloperCon 2024 EU: Building polyglot developer experiences in 2024
salaboy
0
380
オブジェクトしこう
okuramasafumi
2
130
Migrating to Signals: A Practical Workshop
manfredsteyer
PRO
0
280
TDDと今まで
kanayannet
0
140
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
272
12k
Designing for humans not robots
tammielis
247
25k
The Brand Is Dead. Long Live the Brand.
mthomps
48
22k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
226
16k
KATA
mclloyd
14
11k
Why Our Code Smells
bkeepers
PRO
330
56k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
Fashionably flexible responsive web design (full day workshop)
malarkey
397
65k
Visualization
eitanlees
135
14k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
101
6.6k
Mobile First: as difficult as doing things right
swwweet
215
8.5k
Why You Should Never Use an ORM
jnunemaker
PRO
50
8.6k
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