TypeScript and Immutability

by Taketoshi Aono(青野健利 a.k.a brn)

Slide 1

Slide 1 text

TypeScript & Immutability

Slide 2

Slide 2 text

Name @brn (ꫬꅿ⨳ⵃ) Occupation ؿٗٝزؒٝسؒٝآص،٥ط؎ذ؍ـؒٝآص، Company Cyberagent ،سذؙأةآؔ AI Messenger OSS Contributor of V8 About http://info.b6n.ch

Slide 3

Slide 3 text

What is Immutability?

Slide 4

Slide 4 text

Immutablityהכ㢌刿♶〳腉䚍ךֿה TypeScript(javascript)דכ㛇劤涸חכׅץג㢌刿〳腉(Mutable) 㹋植ׅ׷׋׭חכ㢩鿇ךٓ؎ـٓٔך⸂׾⦵׶׷ַծأفٖحس 怴皾㶨׾⢪ְתֻ׷׃ַזְ What is Immutability?

Slide 5

Slide 5 text

Why Immutability is so important?

Slide 6

Slide 6 text

ؔـآؙؑزך㢌刿ָ♶〳腉ד֮׷ֿהכفؚٗٓي׾⟃♴ך銲挿ד知患חׅ׷ •  ⿫撑鷲麓䚍(ꟼ侧ָ⦼׾㢌刿׃זְ) •  ⶰ⡲欽ָ饯ֹזְ ؙٓ؎،ٝز؟؎سךفؚٗٓىؚٝדכ⟃♴ךⵃ挿׮֮׷׌׹ ֲ •  ReactךPureComponentד知⽃ח嫰鯰דֹ׷ What is Immutability is so important?

Slide 7

Slide 7 text

Immutability in REAL LIFE

Slide 8

Slide 8 text

׃ַ׃TypeScript(js)ד㹋植׃״ֲהׅ׷ה⟃♴ך㉏겗ָ֮׷ •  ٓ؎ـٓٔ⢪ֲ •  IOכוֲׅ׷(DOMծhttpծStorage) •  㘗דⴻⴽדֹ׷ Immutability in REAL LIFE

Slide 9

Slide 9 text

Immtauble.js Immutable.jsכTypeScriptה湱䚍ָ䝤ְ הֻחⰅ׸㶨ךRecord׾㘗ד邌植׃״ֲהׅ׷ה immutableז㘗ה׉ֲדכזְ㘗׾㹀纏2ꅾד㹀纏ׅ׷䗳銲ָ֮ ׷ Immutability in REAL LIFE

Slide 10

Slide 10 text

immer immerכPlainObject׾Immutableח׃גֻ׸׷ךד⢪ְװְׅ ָծclassָ⢪ִזְךד䮶׷莸ְ׾׮׋ׇ׷㜥さכ Objectחًاحس׾㹀纏ׅ׷䕎חז׷ ָծ׉ֿכ䧮䢧׃גimmer׾⢪ֲֿהח׃׋ Immutability in REAL LIFE

Slide 11

Slide 11 text

How to treat IO 姻湫10ⴓד鑧׃ֹ׸זְךד㸣穠ח •  MVI(Cyclejs괏)׾ⵃ欽׃גծIO׾㢩ך⚅歲חꟗׄ鴥׭׷ (Driver) •  穠卓׌ֽ׾ActionהⰟח「ֽ《׷ •  reduxד֮׸לmiddlewareחIO׾ע׿䫎־׷ Immutability in REAL LIFE

Slide 12

Slide 12 text

Model View Intent ًٔحز •  ٌشسקו搀椚זֻIO׾ꟗׄ鴥׭׵׸׷ •  asyncחאְג罋ִ׷䗳銲ָזֻז׷ رًٔحز •  Actionךװ׶ה׶ָꬊ䌢ח㟓ִ׷ Immutability in REAL LIFE

Slide 13

Slide 13 text

How to express immutable type. TypeScriptדImmutability׾邌植ׅ׷׋׭חכ⟃♴ך倯岀ָ֮׷կ •  readonly׾⢪ֲ •  ConstArray٥ConstMap׾⢪ֲ Immutability in REAL LIFE

Slide 14

Slide 14 text

Readonly فٗػذ؍ָ铣׫《׶ך׫ד剣׷ֿה׾㹑鎉ׅ׷ ׋׌׃ؔـآؙؑزך⚥魦כ㢌刿〳腉 Immutability in REAL LIFE

Slide 15

Slide 15 text

ReadonlyArray٥ReadonlyMap 灶㠨涸ז㢌刿׾遤ֲꟼ侧ָ⵴ꤐׁ׸׋غ٦آّٝך㘗㹀纏 TypeScriptח穈׫鴥ת׸גְ׷ sort٥reverse٥spliceהַדֹזְ(㘗㹀纏♳) Immutability in REAL LIFE

Slide 16

Slide 16 text

ֿ׸׵׾穈׫さ׻ׇג邌植ׅ׷ C++ח֮װַ׏גConst㘗הㄏせ׃׋ ׁ׵חׅץגך㾩䚍׾《׶ꤐֻMutable㘗׮㹀纏ׅ׷ (׋׌׃ծConstMapכ⢪׻זְךד♧傉㹀纏׃זְ) Immutability in REAL LIFE

Slide 17

Slide 17 text

type Primitive = undefined | null | boolean | string | number | Function;! ! interface ConstArray extends ReadonlyArray> {}! type ConstObject = {! readonly [P in keyof T]: Const! };! ! type Const = T extends Primitive! ? T! : T extends ConstArray! ? T! : T extends (infer R)[]! ? ConstArray! : T extends object ? ConstObject : T;!

Slide 18

Slide 18 text

type Mutable = T extends Primitive! ? T! : T extends MutableArray! ? T! : T extends (infer R)[]! ? MutableArray! : T extends ConstArray! ? MutableArray! : T extends object ? MutableObject : T;! ! interface MutableArray extends Array> {}! ! type MutableObject = {! -readonly [P in keyof T]: Mutable! };!

Slide 19

Slide 19 text

ֿ׸דطأز׃׋Ⰻגךؔـآؙؑز׾Immutableחדֹ׷ ׋׌ծOptionalהַPromiseהַָ窃׬ה꬗⦜זֿהחז׷ (ConditionalTypeך勴⟝ָו׿ו׿㟓ִ׷) Immutability in REAL LIFE

Slide 20

Slide 20 text

Writable/Writer 荈⡲ךؒٝذ؍ذ؍ד׮ReadOnlyXXX׫׋ְזך׾װ׶׋ְ ؒٝذ؍ذ؍׾㹀纏ׅ׷הֹחفٗػذ؍ך׫ךؔـآؙؑزה 刿倜ך׫׾遤ֲWriterחⴓꨄ׃ג㹀纏ׅ׷ Writableכ朐䡾ך㝄 Writerכ朐䡾׾䭯׋׆ծ刿倜ׅ׷׋׭ך乼⡲ך׫ָ㹀纏ׁ׸גְ ׷ Immutability in REAL LIFE

Slide 21

Slide 21 text

interface HumanEntityWriter extends Writer {! updateName(name: string): void;! updateAge(age: number): void;! }! ! interface HumanEntity extends Writable {! name: string;! age: number;! }!

Slide 22

Slide 22 text

interface Writer {! _target: T;! }! interface Writable, U> {! _writer: T;! }!

Slide 23

Slide 23 text

mutate Writableַ׵Writer׾《׶⳿׃ծMutableח㢌䳔ׅ׷կ Immutability in REAL LIFE

Slide 24

Slide 24 text

const next = mutate(humanEntity, writer => {! writer.updateName('Roppongi.js');! writer.updateAge(6);! })!

Slide 25

Slide 25 text

import produce from 'immer';! function mutate, U>(! entity: T, ! callback: (writer: U) => void! ) {! produce(entity, draft => {! callback({! ...entity._writer,! _target: entity! });! });! }!

Slide 26

Slide 26 text

Beneﬁt ReadהWrite׾ⴓֽג㹀纏ׅ׷ֿהד搀꼽ז✲佦ָ幾׷ ת׋ծWriterךًاحس⟃㢩ד⦼׾㢌刿ׅ׷ֿהכדֹזְךד (㘗٥暟椚ך⚕꬗ד)㸜Ⰻ Componentך⚥ד⦼׾剅ֹ䳔ִ׋׶דֹזְ Immutability in REAL LIFE

Slide 27

Slide 27 text

Complicated types… 㹋ꥷחכmutateꟼ侧ך㹀纏כ׮׏ה醱꧟ד ConstהMutableך㢌䳔㹀纏ָⰅ׏גְ׋׶ׅ׷ Immutability in REAL LIFE

Slide 28

Slide 28 text

Problems immerָؕأةيؙٓأ׾「ֽ➰ֽזְֶַ־ד entityワ׶ָ׍׳׏הES5괏חז׏ג׷ •  class׾⢪׻זְ •  竰䪫כأفٖحس怴皾㶨 •  فٓ؎ك٦زفٗػذ؍כ،ٝت٦أ؝، Immutability in REAL LIFE

Slide 29

Slide 29 text

Summary ׍׳׏ה㉏겗כ֮׷ֽו筨ׄגװ׶װֻׅז׏׋կ Immutable.jsד气䒦׃גְ׋ךד⡭鎘״ַ׏׋ Plain Object剑넝 Immutability in REAL LIFE