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.7k
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
3k
Parsing Javascript
brn
14
9.2k
JSON & Object Tips
brn
1
480
CA 1Day Youth Bootcamp for Frontend LT
brn
0
930
Modern TypeScript
brn
2
800
javascript - behind the scene
brn
3
730
tc39 proposals
brn
0
870
プロダクト開発とTypeScript
brn
8
2.9k
React-Springでリッチなアニメーション
brn
1
690
Other Decks in Programming
See All in Programming
ワンバイナリWebサービスのススメ
mackee
10
7.4k
人には人それぞれのサービス層がある
shimabox
3
460
ユーザーにサブドメインの ECサイトを提供したい (あるいは) 2026年函館で一番熱くなるかもしれない言語の話
uvb_76
0
170
テスト分析入門/Test Analysis Tutorial
goyoki
11
2.7k
鯛変だったRubyKaigi 2025 ── それでも楽しかった!
pndcat
0
130
『Python → TypeScript』オンボーディング奮闘記
takumi_tatsuno
1
140
AI Coding Agent Enablement in TypeScript
yukukotani
17
7.1k
TypeScript Language Service Plugin で CSS Modules の開発体験を改善する
mizdra
PRO
3
2.4k
UPDATEがシステムを複雑にする? イミュータブルデータモデルのすすめ
shimomura
0
170
Parallel::Pipesの紹介
skaji
2
870
事業KPIを基に価値の解像度を上げる
nealle
0
200
マテリアルって何者?RealityKitで扱うマテリアル入門
nao_randd
0
140
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
How to Think Like a Performance Engineer
csswizardry
23
1.6k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
15
890
The Power of CSS Pseudo Elements
geoffreycrofte
76
5.8k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
5
620
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
42
2.3k
Statistics for Hackers
jakevdp
799
220k
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