Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Modern TypeScript
Taketoshi Aono(青野健利 a.k.a brn)
March 23, 2020
Programming
2
570
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)
CA 1Day Youth Bootcamp for Frontend LT
brn
0
360
javascript - behind the scene
brn
3
500
tc39 proposals
brn
0
520
プロダクト開発とTypeScript
brn
8
2.5k
React-Springでリッチなアニメーション
brn
1
440
javascript internationalization API
brn
0
550
How V8 executes WASM
brn
3
1.4k
memory_in_javascript.pdf
brn
0
710
RegExp and Unicode in javascript
brn
0
480
Other Decks in Programming
See All in Programming
Swift Concurrency in GoodNotes
inamiy
4
1.4k
OSSから学んだPR Descriptionの書き方
fugakkbn
4
140
Ruby Pattern Matching
bkuhlmann
0
610
Listかもしれない
irof
1
280
Makuakeの認証基盤とRe-Architectureチーム
bmf_san
0
620
Step Functions Distributed Map を使ってみた
codemountains
0
110
CDKでValidationする本当の方法 / cdk-validation
gotok365
1
220
TSX First な Zero-Runtime SSG potato4d/dodai とその仕組み / owned static site generator #kyotojs
potato4d
0
390
Circuit⚡
monaapk
0
200
ipa-medit: Memory search and patch tool for IPA without Jailbreaking/ipa-medit-bh2022-europe
tkmru
0
130
Swift Observation
shiz
4
290
Form実装基本を学び直してみた
hyugatsukui
0
240
Featured
See All Featured
Faster Mobile Websites
deanohume
295
29k
Scaling GitHub
holman
453
140k
Atom: Resistance is Futile
akmur
256
24k
Stop Working from a Prison Cell
hatefulcrawdad
263
18k
Principles of Awesome APIs and How to Build Them.
keavy
117
15k
10 Git Anti Patterns You Should be Aware of
lemiorhan
643
54k
Building Your Own Lightsaber
phodgson
96
4.9k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
38
3.6k
A Philosophy of Restraint
colly
193
15k
GitHub's CSS Performance
jonrohan
1020
430k
Thoughts on Productivity
jonyablonski
49
2.7k
VelocityConf: Rendering Performance Case Studies
addyosmani
317
22k
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શͯจࣈྻܕʹ͢Δͷ͕͓͢ ͢Ί จࣈྻఆͪΌΜͱมʹೖΕ·͠ΐ͏
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠