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
3k
Parsing Javascript
brn
14
9.2k
JSON & Object Tips
brn
1
490
CA 1Day Youth Bootcamp for Frontend LT
brn
0
950
Modern TypeScript
brn
2
810
javascript - behind the scene
brn
3
740
tc39 proposals
brn
0
880
プロダクト開発とTypeScript
brn
8
2.9k
React-Springでリッチなアニメーション
brn
1
700
Other Decks in Programming
See All in Programming
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
250
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
120
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
770
技術同人誌をMCP Serverにしてみた
74th
1
640
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
760
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
890
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
1
140
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
280
PicoRuby on Rails
makicamel
2
130
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
510
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
11k
ふつうの技術スタックでアート作品を作ってみる
akira888
1
840
Featured
See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
740
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
Faster Mobile Websites
deanohume
307
31k
How to Think Like a Performance Engineer
csswizardry
25
1.7k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Designing Experiences People Love
moore
142
24k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
Automating Front-end Workflow
addyosmani
1370
200k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Balancing Empowerment & Direction
lara
1
430
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