TypeScript and Immutability

TypeScriptでImmutableなエンティティを表現する方法あれこれ

Transcript

1. TypeScript
   &
   Immutability
   

   View Slide

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

   View Slide

3. What is
   Immutability?
   

   View Slide

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

   View Slide

5. Why Immutability is
   so important?
   

   View Slide

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

   View Slide

7. Immutability in
   REAL LIFE
   

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide