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
780
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.1k
JSON & Object Tips
brn
1
460
CA 1Day Youth Bootcamp for Frontend LT
brn
0
900
javascript - behind the scene
brn
3
720
tc39 proposals
brn
0
840
プロダクト開発とTypeScript
brn
8
2.9k
React-Springでリッチなアニメーション
brn
1
670
javascript internationalization API
brn
0
850
Other Decks in Programming
See All in Programming
ニックトレイン登壇資料
ryotakurokawa
0
140
List とは何か? / PHPerKaigi 2025
meihei3
0
550
複数ドメインに散らばってしまった画像…! 運用中のPHPアプリに後からCDNを導入する…!
suguruooki
0
430
AtCoder Heuristic First-step Vol.1 講義スライド(山登り法・焼きなまし法編)
takumi152
3
970
Go1.24 go vetとtestsアナライザ
kuro_kurorrr
2
460
リアクティブシステムの変遷から理解するalien-signals / Learning alien-signals from the evolution of reactive systems
yamanoku
2
960
英語文法から学ぶ、クリーンな設計の秘訣
newnomad
1
270
requirements with math
moony
0
520
AIエージェントを活用したアプリ開発手法の模索
kumamotone
1
740
いまさら聞けない生成AI入門: 「生成AIを高速キャッチアップ」
soh9834
12
3.6k
PHPer's Guide to Daemon Crafting Taming and Summoning
uzulla
2
1k
아직도 SOLID 를 '글'로만 알고 계신가요?
sh1mj1
0
360
Featured
See All Featured
What's in a price? How to price your products and services
michaelherold
245
12k
How to Ace a Technical Interview
jacobian
276
23k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
30k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Mobile First: as difficult as doing things right
swwweet
223
9.5k
Gamification - CAS2011
davidbonilla
81
5.2k
Into the Great Unknown - MozCon
thekraken
36
1.7k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.2k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.3k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
A Tale of Four Properties
chriscoyier
158
23k
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શͯจࣈྻܕʹ͢Δͷ͕͓͢ ͢Ί จࣈྻఆͪΌΜͱมʹೖΕ·͠ΐ͏
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠