Upgrade to Pro — share decks privately, control downloads, hide ads and more …

TypeScript and Immutability

TypeScript and Immutability

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

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

Other Decks in Programming

Transcript

  1. TypeScript
    &
    Immutability

    View full-size slide

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

    View full-size slide

  3. What is
    Immutability?

    View full-size slide

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

    View full-size slide

  5. Why Immutability is
    so important?

    View full-size slide

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

    View full-size slide

  7. Immutability in
    REAL LIFE

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide