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
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
Taketoshi Aono(青野健利 a.k.a brn)
March 23, 2020
Programming
2
850
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
3.1k
Parsing Javascript
brn
14
9.4k
JSON & Object Tips
brn
1
540
CA 1Day Youth Bootcamp for Frontend LT
brn
0
1k
javascript - behind the scene
brn
3
790
tc39 proposals
brn
0
940
プロダクト開発とTypeScript
brn
8
3k
React-Springでリッチなアニメーション
brn
1
740
javascript internationalization API
brn
0
940
Other Decks in Programming
See All in Programming
ZJIT: The Ruby 4 JIT Compiler / Ruby Release 30th Anniversary Party
k0kubun
1
380
IFSによる形状設計/デモシーンの魅力 @ 慶應大学SFC
gam0022
1
260
それ、本当に安全? ファイルアップロードで見落としがちなセキュリティリスクと対策
penpeen
7
2.4k
AI Agent Tool のためのバックエンドアーキテクチャを考える #encraft
izumin5210
6
1.7k
LLM Observabilityによる 対話型音声AIアプリケーションの安定運用
gekko0114
2
400
余白を設計しフロントエンド開発を 加速させる
tsukuha
7
2k
Combinatorial Interview Problems with Backtracking Solutions - From Imperative Procedural Programming to Declarative Functional Programming - Part 2
philipschwarz
PRO
0
150
The Art of Re-Architecture - Droidcon India 2025
siddroid
0
170
AIエージェントの設計で注意するべきポイント6選
har1101
6
3.3k
コントリビューターによるDenoのすゝめ / Deno Recommendations by a Contributor
petamoriken
0
200
Deno Tunnel を使ってみた話
kamekyame
0
350
AI Agent Dojo #4: watsonx Orchestrate ADK体験
oniak3ibm
PRO
0
130
Featured
See All Featured
State of Search Keynote: SEO is Dead Long Live SEO
ryanjones
0
99
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
35
2.3k
Ecommerce SEO: The Keys for Success Now & Beyond - #SERPConf2024
aleyda
1
1.8k
The B2B funnel & how to create a winning content strategy
katarinadahlin
PRO
0
250
Marketing to machines
jonoalderson
1
4.6k
Building Better People: How to give real-time feedback that sticks.
wjessup
370
20k
Six Lessons from altMBA
skipperchong
29
4.1k
The Organizational Zoo: Understanding Human Behavior Agility Through Metaphoric Constructive Conversations (based on the works of Arthur Shelley, Ph.D)
kimpetersen
PRO
0
220
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
aleyda
1
1.1k
Designing for Performance
lara
610
70k
Fireside Chat
paigeccino
41
3.8k
Redefining SEO in the New Era of Traffic Generation
szymonslowik
1
200
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શͯจࣈྻܕʹ͢Δͷ͕͓͢ ͢Ί จࣈྻఆͪΌΜͱมʹೖΕ·͠ΐ͏
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠