TypeScript and Immutability

Transcript

1. 1.

   TypeScript & Immutability

2. 2.

   Name @brn (ꫬꅿ⨳ⵃ) Occupation ؿٗٝزؒٝسؒٝآص،٥ط؎ذ؍ـؒٝآص، Company Cyberagent ،سذؙأةآؔ AI Messenger

   OSS Contributor of V8 About http://info.b6n.ch
3. 3.

   What is Immutability?
   

4. 4.

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

5. 5.

   Why Immutability is so important?
   

6. 6.

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

   What is Immutability is so important?
   
7. 7.

   Immutability in REAL LIFE
   

8. 8.

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

   LIFE
   
9. 9.

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

10. 10.

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

11. 11.

    How to treat IO
    姻湫10ⴓד鑧׃ֹ׸זְךד㸣穠ח •  MVI(Cyclejs괏)׾ⵃ欽׃גծIO׾㢩ך⚅歲חꟗׄ鴥׭׷ (Driver) •  穠卓׌ֽ׾ActionהⰟח「ֽ《׷

    •  reduxד֮׸לmiddlewareחIO׾ע׿䫎־׷ Immutability in REAL LIFE
    
12. 12.

    Model View Intent
    ًٔحز •  ٌشسקו搀椚זֻIO׾ꟗׄ鴥׭׵׸׷ •  asyncחאְג罋ִ׷䗳銲ָזֻז׷ رًٔحز • 

    Actionךװ׶ה׶ָꬊ䌢ח㟓ִ׷ Immutability in REAL LIFE
    
13. 13.

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

    Immutability in REAL LIFE
    
14. 14.

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

15. 15.

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

16. 16.

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

17. 17.

    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;!
18. 18.

    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]>! };!
19. 19.

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

20. 20.

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

    LIFE
    
21. 21.

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

    void;! }! ! interface HumanEntity extends Writable<HumanEntityWriter> {! name: string;! age: number;! }!
22. 22.

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

    U> {! _writer: T;! }!
23. 23.

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

24. 24.

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

25. 25.

    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! });! });! }!
26. 26.

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

27. 27.

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

28. 28.

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

    in REAL LIFE
    
29. 29.

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