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
Modern TypeScript
Search
Taketoshi Aono(青野健利 a.k.a brn)
March 23, 2020
Programming
2
820
Modern TypeScript
Modern TypeScript coding techniques and tips.
Taketoshi Aono(青野健利 a.k.a brn)
March 23, 2020
Tweet
Share
More Decks by Taketoshi Aono(青野健利 a.k.a brn)
See All by Taketoshi Aono(青野健利 a.k.a brn)
document.write再考
brn
6
3k
Parsing Javascript
brn
14
9.3k
JSON & Object Tips
brn
1
510
CA 1Day Youth Bootcamp for Frontend LT
brn
0
970
javascript - behind the scene
brn
3
750
tc39 proposals
brn
0
890
プロダクト開発とTypeScript
brn
8
2.9k
React-Springでリッチなアニメーション
brn
1
710
javascript internationalization API
brn
0
910
Other Decks in Programming
See All in Programming
ソフトウェアテスト徹底指南書の紹介
goyoki
1
150
Vue・React マルチプロダクト開発を支える Vite
andpad
0
110
Flutter with Dart MCP: All You Need - 박제창 2025 I/O Extended Busan
itsmedreamwalker
0
150
「手軽で便利」に潜む罠。 Popover API を WCAG 2.2の視点で安全に使うには
taitotnk
0
830
Navigating Dependency Injection with Metro
zacsweers
3
220
[FEConf 2025] 모노레포 절망편, 14개 레포로 부활하기까지 걸린 1년
mmmaxkim
0
1.6k
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
310
Ruby Parser progress report 2025
yui_knk
1
420
AI時代のUIはどこへ行く?
yusukebe
16
8.7k
Updates on MLS on Ruby (and maybe more)
sylph01
1
180
FindyにおけるTakumi活用と脆弱性管理のこれから
rvirus0817
0
480
RDoc meets YARD
okuramasafumi
4
170
Featured
See All Featured
Docker and Python
trallard
45
3.6k
The Language of Interfaces
destraynor
161
25k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.1k
YesSQL, Process and Tooling at Scale
rocio
173
14k
For a Future-Friendly Web
brad_frost
180
9.9k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Gamification - CAS2011
davidbonilla
81
5.4k
A better future with KSS
kneath
239
17k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
920
Transcript
Modern TypeScript
Name !CSO 5BLFUPTIJ"POP੨݈ར Occupation 'SPOUFOE%FWFMPQFS1SPEVDU0XOFS Company $ZCFSBHFOU"EUFDI4UVEJP"*.FTTFOHFS OSS $POUSJCVUPSPG7
About IUUQJOGPCODI
ຊͷ༰ ࠷ۙͷTypeScript৽ػೳ Tips
Null Coalescing
value ?? orValue
// ҎԼͷܗࣜͩͱ0ۭจࣈʹҾ͔͔ͬΔ value || orValue value? value: orValue // Null
CoalescingҎԼͷܗࣜͱಉ͡ޮՌ value != null? value: orValue
Null Coalescing ͕null/undefinedͷ߹ʹ??Ҏ߱Λ࣮ߦ͢Δ ཧORͷԋࢉࢠࠓޙ΄ͱΜͲ͏ඞཁͳ͍ ·ͨɺࠓ·ͰifจதͰऑ͍ൺֱΛ͍ͬͯͨՕॴɺlintΛ੍ͤͣʹࡁ ΉΑ͏ʹॻ͖͑ΒΕΔ
// ࠓ·Ͱͷnull/undefinedͷνΣοΫํ๏ if (value != null) { } // ࠓޙlintʹ==ΛౖΒΕΔࣄͳ͘??Ͱஔ͖͑ΒΕΔ
if (value ?? null) { }
Optional Chaining
foo?.bar?.baz?.qux
Optional Chaining ΦϒδΣΫτ͕null/undefinedͩͬͨ߹ʹϓϩύςΟΞΫηεΛ࣮ ߦͤͣundefinedΛฦ͢ ͕ଘࡏ͢Δͱ͖͚ͩϓϩύςΟΞΫηεΛߦ͏ ࠓ·ͰࣗલͰMaybe/OptionalΫϥεΛ࣮͍ͯͨ͠έʔεΛஔ͖͑Β ΕΔ
// Null CoalescingͱΈ߹ΘͤΔͱڧྗ return foo?.bar?.baz?.qux ?? value; // ؔݺͼग़͕͠ඞཁ const
x = (...args: any): any => {} (foo?.bar?.baz ?? x)()
Top Level Await
await foo();
Top Level Await ࠓ·ͰawaitasyncؔͰͷΈॻ͚͕ͨɺ3.8ΑΓτοϓϨϕϧͰ هड़Ͱ͖ΔΑ͏ʹͳͬͨ
Recursive Type Alias
type ReadonlyDeep<T> = { [P in keyof T]: ReadonlyDeep<T[P]> }
Recursive Type Alias ࠶ؼతͳܕΛ୯७ͳType AliasͰදݱͰ͖ΔΑ͏ʹͳͬͨ Ҏલinterfaceͷextends͕ඞཁͩͬͨ
Tips
const assertion
const value = 'value' as const // value: 'value'
Const assertion ͷ͋ͱʹas constͱ͚ͭΔ͜ͱͰ string/number/boolean/array/object ΛϦςϥϧλΠϓͱͯ͠ఆٛ͢Δ͜ͱ͕Ͱ͖Δ ※ϦςϥϧλΠϓͱ͕ͦͷ··ܕͱͯ͠ѻΘΕΔͷ ͦͷͨΊɺReduxͷܕఆٛΛconst assertionΛͬͯ ΑΓγϯϓϧʹఆٛ͢Δ͜ͱ͕Ͱ͖Δ
const fooAction = (payload: {value: string}) => { return {
type: "FOO" as const, payload } } const barAction = (payload: {value: string}) => { return { type: "BAR" as const, payload } } type ActionTypes = ReturnType<typeof fooAction> | ReturnType<typeof barAction>; // "FOO" | "BAR" const reducer = (state: State, action: ActionTypes) => { switch (action.type) { case "BAZ": // Error '"BAZ"' is not comparable to type '"FOO" | "BAR"' ... } }
String literal type
String literal type ݸਓతʹจࣈྻશͯenum͔ΦϒδΣΫτʹೖΕ͍͕ͯͨɺ TypeScriptશͯstring literal typeͱͯ͠ܕఆٛͯ͠ɺϦς ϥϧϕλॻ͖͕Ұ൪γϯϓϧͳͷͰͳ͍͔ͱߟ͑ΔΑ͏ʹͳͬͨ
const foo = (type: 'foo' | 'bar' | 'baz' |
'qux') => { ... } foo('foo'); foo('bar');
String literal type Θ͔Γ͘͢γϯϓϧͳͷͰɺจࣈྻenumશͯจࣈྻܕʹ͢Δͷ͕͓͢ ͢Ί จࣈྻఆͪΌΜͱมʹೖΕ·͠ΐ͏
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠