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
TypeScript and Immutability
Search
Taketoshi Aono(青野健利 a.k.a brn)
September 18, 2018
Programming
2
1.6k
TypeScript and Immutability
TypeScriptでImmutableなエンティティを表現する方法あれこれ
Taketoshi Aono(青野健利 a.k.a brn)
September 18, 2018
Tweet
Share
More Decks by Taketoshi Aono(青野健利 a.k.a brn)
See All by Taketoshi Aono(青野健利 a.k.a brn)
document.write再考
brn
6
2.7k
Parsing Javascript
brn
12
8k
JSON & Object Tips
brn
1
330
CA 1Day Youth Bootcamp for Frontend LT
brn
0
720
Modern TypeScript
brn
2
700
javascript - behind the scene
brn
3
640
tc39 proposals
brn
0
720
プロダクト開発とTypeScript
brn
8
2.7k
React-Springでリッチなアニメーション
brn
1
540
Other Decks in Programming
See All in Programming
Mastering Developer Experience: A Roadmap for Success 【開発生産性Conference 2024】
findyinc
1
380
Namespace on read
tagomoris
2
370
コード生成を伴うLLMエージェント - 2024.07.18 Tokyo AI
smiyawaki0820
11
4.1k
GraphQL はいいぞ! ~Laravel で学ぶ GraphQL 入門~
azuki
1
160
APIのない大学ログインWebサービスをWKWebViewとJavaScriptでアプリ化した話
akidon0000
1
330
小さな開発会社を作った理由
polidog
0
1.9k
Activities at Cairo Library
cairolibrary720
0
1.2k
わかりやすい正解を捨てて、コトに向き合う - スクラムフェス金沢2024 スポンサーセッション
yusukekokubo
0
170
Exploring the Gradually Lost Technical Skills in the Cloud Native Era
hwchiu
2
3.9k
Clean Architecture by TypeScript & NestJS
ryounasso
0
150
大規模マルチテナントを解決するYugabyteDBという選択肢
nnaka2992
1
250
生成AIをkintoneに連携してみた
hideg
0
230
Featured
See All Featured
Thoughts on Productivity
jonyablonski
64
4.1k
How STYLIGHT went responsive
nonsquared
93
5k
The Straight Up "How To Draw Better" Workshop
denniskardys
229
130k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
189
16k
WebSockets: Embracing the real-time Web
robhawkes
59
7.2k
The Language of Interfaces
destraynor
151
23k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
248
20k
The Brand Is Dead. Long Live the Brand.
mthomps
52
36k
What's new in Ruby 2.0
geeforr
338
31k
Fontdeck: Realign not Redesign
paulrobertlloyd
79
5.1k
Creatively Recalculating Your Daily Design Routine
revolveconf
214
11k
We Have a Design System, Now What?
morganepeng
46
7k
Transcript
TypeScript & Immutability
Name @brn (ꫬꅿ⨳ⵃ) Occupation ؿٗٝزؒٝسؒٝآص،٥ط؎ذ؍ـؒٝآص، Company Cyberagent ،سذؙأةآؔ AI Messenger
OSS Contributor of V8 About http://info.b6n.ch
What is Immutability?
Immutablityהכ㢌刿♶〳腉䚍ךֿה TypeScript(javascript)דכ㛇劤涸חכׅץג㢌刿〳腉(Mutable) 㹋植ׅחכ㢩鿇ךٓ؎ـٓٔך⸂⦵ַծأفٖحس 怴皾㶨⢪ְתֻ׃ַזְ What is Immutability?
Why Immutability is so important?
ؔـآؙؑزך㢌刿ָ♶〳腉דֿ֮הכفؚٗٓي⟃♴ך銲 挿ד知患חׅ • 撑鷲麓䚍(ꟼ侧ָ⦼㢌刿׃זְ) • ⶰ⡲欽ָ饯ֹזְ ؙٓ؎،ٝز؟؎سךفؚٗٓىؚٝדכ⟃♴ךⵃ挿֮ ֲ • ReactךPureComponentד知⽃ח嫰鯰דֹ
What is Immutability is so important?
Immutability in REAL LIFE
׃ַ׃TypeScript(js)ד㹋植׃״ֲהׅה⟃♴ך㉏겗ָ֮ • ٓ؎ـٓٔ⢪ֲ • IOכוֲׅ(DOMծhttpծStorage) • 㘗דⴻⴽדֹ Immutability in REAL
LIFE
Immtauble.js Immutable.jsכTypeScriptה湱䚍ָ䝤ְ הֻחⰅ㶨ךRecord㘗ד邌植׃״ֲהׅה immutableז㘗הֲדכזְ㘗㹀纏2ꅾד㹀纏ׅ䗳銲ָ֮ Immutability in REAL LIFE
immer immerכPlainObjectImmutableח׃גֻךד⢪ְװְׅ ָծclassָ⢪ִזְךד䮶莸ְׇ㜥さכ Objectחًاحس㹀纏ׅ䕎חז ָծֿכ䧮䢧׃גimmer⢪ֲֿהח׃ Immutability in REAL LIFE
How to treat IO 姻湫10ⴓד鑧׃ֹזְךד㸣穠ח • MVI(Cyclejs괏)ⵃ欽׃גծIO㢩ך⚅歲חꟗׄ鴥 (Driver) • 穠卓ֽActionהⰟח「ֽ《
• reduxד֮לmiddlewareחIOע䫎־ Immutability in REAL LIFE
Model View Intent ًٔحز • ٌشسקו搀椚זֻIOꟗׄ鴥 • asyncחאְג罋ִ䗳銲ָזֻז رًٔحز •
Actionךװהָꬊ䌢ח㟓ִ Immutability in REAL LIFE
How to express immutable type. TypeScriptדImmutability邌植ׅחכ⟃♴ך倯岀ָ֮կ • readonly⢪ֲ • ConstArray٥ConstMap⢪ֲ
Immutability in REAL LIFE
Readonly فٗػذ؍ָ铣《ךד剣ֿה㹑鎉ׅ ׃ؔـآؙؑزך⚥魦כ㢌刿〳腉 Immutability in REAL LIFE
ReadonlyArray٥ReadonlyMap 灶㠨涸ז㢌刿遤ֲꟼ侧ָꤐׁغ٦آّٝך㘗㹀纏 TypeScriptח穈鴥תגְ sort٥reverse٥spliceהַדֹזְ(㘗㹀纏♳) Immutability in REAL LIFE
ֿ穈さׇג邌植ׅ C++ח֮װַגConst㘗הㄏせ׃ ׁחׅץגך㾩䚍《ꤐֻMutable㘗㹀纏ׅ (׃ծConstMapכ⢪זְךד♧傉㹀纏׃זְ) Immutability in REAL LIFE
type Primitive = undefined | null | boolean | string
| number | Function;! ! interface ConstArray<T> extends ReadonlyArray<Const<T>> {}! type ConstObject<T> = {! readonly [P in keyof T]: Const<T[P]>! };! ! type Const<T> = T extends Primitive! ? T! : T extends ConstArray<any>! ? T! : T extends (infer R)[]! ? ConstArray<R>! : T extends object ? ConstObject<T> : T;!
type Mutable<T> = T extends Primitive! ? T! : T
extends MutableArray<any>! ? T! : T extends (infer R)[]! ? MutableArray<R>! : T extends ConstArray<infer A>! ? MutableArray<A>! : T extends object ? MutableObject<T> : T;! ! interface MutableArray<T> extends Array<Mutable<T>> {}! ! type MutableObject<T> = {! -readonly [P in keyof T]: Mutable<T[P]>! };!
ֿדطأز׃ⰋגךؔـآؙؑزImmutableחדֹ ծOptionalהַPromiseהַָ窃ה⦜זֿהחז (ConditionalTypeך勴⟝ָוו㟓ִ) Immutability in REAL LIFE
Writable/Writer 荈⡲ךؒٝذ؍ذ؍דReadOnlyXXXְזךװְ ؒٝذ؍ذ؍㹀纏ׅהֹחفٗػذ؍ךךؔـآؙؑزה 刿倜ך遤ֲWriterחⴓꨄ׃ג㹀纏ׅ Writableכ朐䡾ך㝄 Writerכ朐䡾䭯׆ծ刿倜ׅך乼⡲ךָ㹀纏ׁגְ Immutability in REAL
LIFE
interface HumanEntityWriter extends Writer<HumanEntity> {! updateName(name: string): void;! updateAge(age: number):
void;! }! ! interface HumanEntity extends Writable<HumanEntityWriter> {! name: string;! age: number;! }!
interface Writer<T> {! _target: T;! }! interface Writable<T extends Writer<U>,
U> {! _writer: T;! }!
mutate WritableַWriter《⳿׃ծMutableח㢌䳔ׅկ Immutability in REAL LIFE
const next = mutate(humanEntity, writer => {! writer.updateName('Roppongi.js');! writer.updateAge(6);! })!
import produce from 'immer';! function mutate<T extends Writable<U>, U>(! entity:
T, ! callback: (writer: U) => void! ) {! produce(entity, draft => {! callback({! ...entity._writer,! _target: entity! });! });! }!
Benefit ReadהWriteⴓֽג㹀纏ֿׅהד搀꼽ז✲佦ָ幾 תծWriterךًاحس⟃㢩ד⦼㢌刿ֿׅהכדֹזְךד (㘗٥暟椚ך⚕ד)㸜Ⰻ Componentך⚥ד⦼剅ֹ䳔ִדֹזְ Immutability in REAL LIFE
Complicated types… 㹋ꥷחכmutateꟼ侧ך㹀纏כה醱꧟ד ConstהMutableך㢌䳔㹀纏ָⰅגְׅ Immutability in REAL LIFE
Problems immerָؕأةيؙٓأ「ֽ➰ֽזְֶַ־ד entityワָ׳הES5괏חזג • class⢪זְ • 竰䪫כأفٖحس怴皾㶨 • فٓ؎ك٦زفٗػذ؍כ،ٝت٦أ؝، Immutability
in REAL LIFE
Summary ׳ה㉏겗כֽ֮ו筨ׄגװװֻׅזկ Immutable.jsד气䒦׃גְךד⡭鎘״ַ Plain Object剑넝 Immutability in REAL LIFE