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
13
9.1k
JSON & Object Tips
brn
1
440
CA 1Day Youth Bootcamp for Frontend LT
brn
0
870
Modern TypeScript
brn
2
770
javascript - behind the scene
brn
3
710
tc39 proposals
brn
0
830
プロダクト開発とTypeScript
brn
8
2.9k
React-Springでリッチなアニメーション
brn
1
650
Other Decks in Programming
See All in Programming
さいきょうのレイヤードアーキテクチャについて考えてみた
yahiru
3
760
クリーンアーキテクチャから見る依存の向きの大切さ
shimabox
4
870
Pythonでもちょっとリッチな見た目のアプリを設計してみる
ueponx
1
590
パスキーのすべて ── 導入・UX設計・実装の紹介 / 20250213 パスキー開発者の集い
kuralab
3
830
.NET Frameworkでも汎用ホストが使いたい!
tomokusaba
0
170
バッチを作らなきゃとなったときに考えること
irof
0
400
コミュニティ駆動 AWS CDK ライブラリ「Open Constructs Library」 / community-cdk-library
gotok365
2
170
Amazon ECS とマイクロサービスから考えるシステム構成
hiyanger
2
580
密集、ドキュメントのコロケーション with AWS Lambda
satoshi256kbyte
1
200
PHPのバージョンアップ時にも役立ったAST
matsuo_atsushi
0
170
昭和の職場からアジャイルの世界へ
kumagoro95
1
400
dbt Pythonモデルで実現するSnowflake活用術
trsnium
0
210
Featured
See All Featured
Designing Experiences People Love
moore
140
23k
Become a Pro
speakerdeck
PRO
26
5.1k
How to Think Like a Performance Engineer
csswizardry
22
1.4k
Bootstrapping a Software Product
garrettdimon
PRO
306
110k
Navigating Team Friction
lara
183
15k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Visualization
eitanlees
146
15k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.1k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.6k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
The World Runs on Bad Software
bkeepers
PRO
67
11k
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