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.8k
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
3.1k
Parsing Javascript
brn
14
9.3k
JSON & Object Tips
brn
1
510
CA 1Day Youth Bootcamp for Frontend LT
brn
0
980
Modern TypeScript
brn
2
820
javascript - behind the scene
brn
3
750
tc39 proposals
brn
0
900
プロダクト開発とTypeScript
brn
8
2.9k
React-Springでリッチなアニメーション
brn
1
720
Other Decks in Programming
See All in Programming
Web フロントエンドエンジニアに開かれる AI Agent プロダクト開発 - Vercel AI SDK を観察して AI Agent と仲良くなろう! #FEC余熱NIGHT
izumin5210
3
560
大規模アプリのDIフレームワーク刷新戦略 ~過去最大規模の並行開発を止めずにアプリ全体に導入するまで~
mot_techtalk
1
460
理論と実務のギャップを超える
eycjur
0
140
Go言語の特性を活かした公式MCP SDKの設計
hond0413
1
240
(Extension DC 2025) Actor境界を越える技術
teamhimeh
1
260
Devvox Belgium - Agentic AI Patterns
kdubois
1
130
bootcamp2025_バックエンド研修_WebAPIサーバ作成.pdf
geniee_inc
0
120
uniqueパッケージの内部実装を支えるweak pointerの話
magavel
0
1k
Swift Concurrency - 状態監視の罠
objectiveaudio
2
540
タスクの特性や不確実性に応じた最適な作業スタイルの選択(ペアプロ・モブプロ・ソロプロ)と実践 / Optimal Work Style Selection: Pair, Mob, or Solo Programming.
honyanya
3
180
チームの境界をブチ抜いていけ
tokai235
0
180
3年ぶりにコードを書いた元CTOが Claude Codeと30分でMVPを作った話
maikokojima
0
540
Featured
See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3k
The Straight Up "How To Draw Better" Workshop
denniskardys
238
140k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
980
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
The Illustrated Children's Guide to Kubernetes
chrisshort
49
51k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
620
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
GraphQLとの向き合い方2022年版
quramy
49
14k
How GitHub (no longer) Works
holman
315
140k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Keith and Marios Guide to Fast Websites
keithpitt
411
23k
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