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
@Environment(\.keyPath)那么好我不允许你们不知道! / atEnvironment keyPath is so good and you should know it!
lovee
0
120
Navigating Dependency Injection with Metro
zacsweers
3
260
奥深くて厄介な「改行」と仲良くなる20分
oguemon
1
520
知っているようで知らない"rails new"の世界 / The World of "rails new" You Think You Know but Don't
luccafort
PRO
1
110
アルテニア コンサル/ITエンジニア向け 採用ピッチ資料
altenir
0
100
Android 16 × Jetpack Composeで縦書きテキストエディタを作ろう / Vertical Text Editor with Compose on Android 16
cc4966
1
200
もうちょっといいRubyプロファイラを作りたい (2025)
osyoyu
1
430
概念モデル→論理モデルで気をつけていること
sunnyone
1
100
AIを活用し、今後に備えるための技術知識 / Basic Knowledge to Utilize AI
kishida
22
5.7k
Android端末で実現するオンデバイスLLM 2025
masayukisuda
1
150
Vue・React マルチプロダクト開発を支える Vite
andpad
0
110
Updates on MLS on Ruby (and maybe more)
sylph01
1
180
Featured
See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
810
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Become a Pro
speakerdeck
PRO
29
5.5k
What's in a price? How to price your products and services
michaelherold
246
12k
Site-Speed That Sticks
csswizardry
10
810
Designing for Performance
lara
610
69k
How to Ace a Technical Interview
jacobian
279
23k
Producing Creativity
orderedlist
PRO
347
40k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
580
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
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શͯจࣈྻܕʹ͢Δͷ͕͓͢ ͢Ί จࣈྻఆͪΌΜͱมʹೖΕ·͠ΐ͏
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠