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

TypeScript Evolution

TypeScript Evolution

For html5 Conference 2018

Yosuke Kurami

November 24, 2018
Tweet

More Decks by Yosuke Kurami

Other Decks in Programming

Transcript

  1. 5ZQF4DSJQU
    &WPMVUJPO
    IUNMDPOGFSFODF
    CZ!2VSBNZ

    View full-size slide

  2. "CPVUNF
    w ૔ݟ༸ีBLB!2VSBNZ
    w ϑϩϯτΤϯυΤϯδχΞ
    w ීஈ͸3FBDU3FEVY ͱ'MPX

    Ͱ8FCΞϓϦॻ͍ͯ·͢

    View full-size slide

  3. ๻ͱ5ZQF4DSJQU
    w ΋ͱ΋ͱ"OHVMBS͕޷͖
    w ೥݄ʹ(PPHMF͕ʮ"OHVMBSY͸5ZQF4DSJQUʹ͢
    ΔΘʔʯͱએݴͨ͠λΠϛϯάͰ5ZQF4DSJQUʹڵຯΛ࣋ͭ
    w Ͱ΋7JNͰॻ͖͔ͨͬͨͷͰɺQMVHJOͭ͘Δ

    IUUQTHJUIVCDPN2VSBNZUTVRVZPNJ
    w ࢓ࣄͰ΋UTॻ͖ͨ͘ͳͬͯϑϩϯτʹδϣϒνΣϯ

    View full-size slide

  4. "HFOEB
    5ZQF4DSJQU֓ཁ
    ͜͜೥ͷ৽ػೳ$PNQJMFSฤ
    ͜͜೥ͷ৽ػೳ-BOHVBHF4FSWJDFฤ

    View full-size slide

  5. 5ZQF4DSJQU֓ཁ

    View full-size slide

  6. 5ZQF4DSJQUͱ͸
    w IUUQTXXXUZQFTDSJQUMBOHPSH
    w .JDSPTPGU͕։ൃͨ͠"MU+BWB4DSJQU

    ओཁͳઃܭऀʹ"OEFST)FKMTCFSH͕͍Δ
    w ੩తͳܕ෇ݴޠ
    w #PPUTUSBQQJOH
    w ΤσΟλϑϨϯυϦʔ

    View full-size slide

  7. ܕνΣοΫͱਪ࿦
    w ؔ਺TVNͷ໭Γ஋͸OVNCFSͰ͋Δ͜ͱΛਪ࿦͢Δ
    function sum(a: number, b: number) {
    return a + b;
    }
    console.log(sum(1, sum(1, 1))); // OK
    // Argument of type '"a"' is not assignable to
    // parameter of type 'number'
    console.log(sum('a', 'b'));

    View full-size slide

  8. 4USVDUVBM4VCUZQJOH
    w 5ZQF4DSJQU͸ߏ଄త෦෼ܕΛ࠾༻͍ͯ͠Δ
    w %VDL5ZQJOHͷܕόʔδϣϯͷΑ͏ͳ΋ͷ
    w ܕͷܧঝؔ܎͸ؾʹͤͣɺܕ͕΋͍ͬͯΔϝιουɾϓϩ
    ύςΟͷ߹கͷΈΛؾʹ͢Δ

    View full-size slide

  9. 4USVDUVBM4VCUZQJOH
    class Hoge {
    name = "Kurami";
    }
    class Foo {
    name = "Quramy";
    }
    function sayHello(obj: { name: string }) {
    console.log(obj.name);
    }
    sayHello(new Hoge());
    sayHello(new Foo());
    sayHello(new Error("error"));

    View full-size slide

  10. ༨ஊ
    /PNJOBMʹ͍ͨ͠ͱ͖
    w ͨ·ʹߏ଄త෦෼ܕͩͱࠔΔ͜ͱ͕͋Δ
    w QSJWBUFϑΟʔϧυΛ࢖͏ϋοΫͰճආ͢Δ
    class DateISOString {
    private _ = Symbol("DateISOString");
    readonly isoString = new Date().toISOString();
    }
    function hoge(x: DateISOString) {
    console.log(x.isoString);
    }
    hoge(new DateISOString());
    hoge({ isoString: "hoge" }); // Error

    View full-size slide

  11. 4USJDUDIFDL
    w TUSJDUΦϓγϣϯʢσϑΥϧτͰPOʣΛ෇͚͓ͯ͘ͱɺݎ
    ࿚ͳνΣοΫ͕Մೳʹ
    function hoge(x?: string) {
    //Object is possibly 'undefined'.
    return x.trim();
    }
    function hoge(x?: string) {
    if (!x) return "";
    return x.trim(); // OK
    }

    View full-size slide

  12. BMMPXKTDIFDLKT
    w ৽͘͠ϓϩδΣΫτΛ࡞Δͱ͖͸ɺTUSJDUͰΑ͍
    w Ұํɺطଘͷ+BWB4DSJQUϓϩδΣΫτʹ5ZQF4DSJQUΛಋೖ
    ͢Δ͜ͱ΋Մೳ
    w BMMPXKTDIFDLKTΦϓγϣϯΛPOʹ͢ΔͱɺUT͚ͩͰ
    ͳ͘ɺKTϑΝΠϧΛѻ͏͜ͱ΋Ͱ͖ΔͷͰɺগͣͭ͠UT΁
    ஔ͖׵͑Δ͜ͱ͕Ͱ͖Δ

    View full-size slide

  13. ϥΠϒϥϦͷܕఆٛ
    w ༗໊ͳϥΠϒϥϦ͸OQNJ!UZQFϥΠϒϥϦ໊Ͱܕఆٛ
    ͕ެ։͞Ε͍ͯΔ
    npm i @types/node
    import path from "path";
    export function hoge() {
    const x = path.join("src", "main.ts");
    }

    View full-size slide

  14. !UZQFT
    w IUUQTHJUIVCDPN%FpOJUFMZ5ZQFE%FpOJUFMZ5ZQFE

    View full-size slide

  15. 3FMFBTFDZDMF
    w ϲ݄पظͰϚΠφʔόʔδϣϯ͕VQEBUF͞Ε͍ͯ͘
    w ηϚϯςΟοΫόʔδϣϯχϯάͰ͸ͳ͍
    w ͷΑ͏ͳNJOPSVQEBUFͰ͋ͬͯ΋ɺഁյతม
    ߋ͕ՃΘΔ͜ͱ΋͋Δ
    w CMPHͰഁյతมߋʹ͍ͭͯΞφ΢ϯε͕͋ΔͷͰɺͦΕΛ
    ΑΜͰ͔ΒVQEBUF͢ΔͱΑ͍

    View full-size slide

  16. #SFBLJOH$IBOHFT

    View full-size slide

  17. 5$ͱͷ݉Ͷ߹͍
    w جຊతʹ5$ͰTUBHFʹͳͬͨ࢓༷͕औΓࠐ·ΕΔ
    w ྫ
    w /VNFSJD4FQBSBUPS
    w #JH*OU
    const i = 60_000;

    View full-size slide

  18. ͍͔ͭ͘ͷྫ֎
    w FYQFSJNFOUBM%FDPSBUPS FNJU%FDPSBUPS.FUBEBUB
    w WY͔Βར༻Մೳɻ"OHVMBS͸͜Ε͕ͳ͍ͱ੒Γཱͨ
    ͳ͍
    w KTYSFBDU
    w WY͔Βར༻ՄೳɻΈΜͳେ޷͖+49

    View full-size slide

  19. ͜͜೥ͷ৽ػೳ
    $PNQJMFSฤ

    View full-size slide

  20. FT.PEVMF*OUFSPQ

    View full-size slide

  21. FT.PEVMFT*OUFSPQ
    w ೥Նࠒʹ/PEFKTͷ&4.PEVMFTʹ͍ͭͯͷऔѻʹಈ
    ͖͕͋ͬͨͷΛड͚ͯɺWYͰಋೖ͞ΕͨΦϓγϣϯ
    w ৄ͘͠͸IUUQTUFQQFJTIBUFOBCMPHDPNFOUSZ
    FTNPEVMFTJOOPEFKTͳͲΛࢀর
    w &4.PEVMFT͔Β$PNNPO+4NPEVMFΛJNQPSU͢Δࡍ͸
    EFGBVMUJNQPSUΛ࢖ΘͶ͹ͳΒͳ͍

    View full-size slide

  22. FT.PEVMFT*OUFSPQ
    w /PEFKTͰ͸ɺ$PNNPO+4͔ΒOBNFEJNQPSU͢ΔͱΤ
    ϥʔʹ
    /* hoge.mjs */
    import { readFile } from "fs";
    $ node --experimental-modules hoge.mjs
    SyntaxError: The requested module does not provide an export
    named ‘readFile'
    at checkComplete (internal/loader/ModuleJob.js:75:27)
    at moduleJob.linked.then (internal/loader/ModuleJob.js:
    58:11)
    at

    View full-size slide

  23. FT.PEVMFT*OUFSPQ
    w Ұํɺ5ZQF4DSJQUͰ͸ඇ&4.PEVMFT͔ΒͷEFGBVMU
    JNQPSU͸ར༻Ͱ͖ͳ͔ͬͨͨΊɺ$PNNPO+4ΛJNQPSU͢
    Δʹ͸ɺOBNFEJNQPSUͰهड़͢Δ͔͠ͳ͔ͬͨ
    import * as fs from "fs";
    import { readFile } from "fs";

    View full-size slide

  24. FT.PEVMFT*OUFSPQ
    w WYҎ߱Ͱ͸ɺ$PNNPO+4͔ΒͷEFGBVMUJNQPSU͕ڐ༰͞
    ΕΔΑ͏ʹͳͬͨ
    w ैདྷͷOBNFEJNQPSUͷॻ͖ํ΋ґવڐ༰͸͞Ε͍ͯΔ΋ͷ
    ͷɺ5ZQF4DSJQU΋ެࣜʹEFGBVMUJNQPSUͷॻ͖ํΛਪ঑ͯ͠
    ͍Δɻ

    IUUQTXXXUZQFTDSJQUMBOHPSHEPDTIBOECPPLSFMFBTF
    OPUFTUZQFTDSJQUIUNMTVQQPSUGPSJNQPSUEGSPN
    DKTGPSNDPNNPOKTNPEVMFTXJUIFTNPEVMFJOUFSPQ
    import fs from "fs";

    View full-size slide

  25. *NQSPWF.BQQFE
    5ZQF.PEJpFS

    View full-size slide

  26. .BQQFE5ZQF.PEJpFS
    w WYͰಋೖ
    w ैདྷͷ.BQQFE5ZQFͰ͸ɺSFBEPOMZ Λ෇༩͢Δ͜ͱ
    ͸Ͱ͖ͯ΋ɺղআ͢Δ͜ͱ͸Ͱ͖ͳ͔ͬͨ
    type Optional = {
    [P in keyof T]?: T[P]
    };
    type ReadOnly = {
    readonly [P in keyof T]: T[P]
    };

    View full-size slide

  27. XJUINPEJpFS
    w ͷ෇༩Ͱɺ࡞༻ͷ޲͖ ෇͚Δ֎͢
    ΛදݱՄೳʹ
    type Optional = {
    [P in keyof T]+?: T[P]
    };
    type Strict = {
    [P in keyof T]-?: T[P]
    };
    type ReadOnly = {
    +readonly [P in keyof T]: T[P]
    };
    type Mutable = {
    -readonly [P in keyof T]: T[P]
    };

    View full-size slide

  28. XJUINPEJpFS
    type Strict = {
    [P in keyof T]-?: T[P]
    };
    // Property 'name' is missing in type '{}'
    // but required in type 'Strict<{ name?: string |
    undefined; }>'.
    const x: Strict<{ name?: string }> = { };

    View full-size slide

  29. $POEJUJPOBMUZQFT

    View full-size slide

  30. $POEJUJPOBMUZQFT
    w WYͰಋೖ
    w "TTJHOBCMFΛ৚݅ͱͯ͠෼ذ͢ΔܕΛදݱՄೳ
    w ʮܕ5͕ܕ6ͷ෦෼ܕͰ͋Ε͹ɺܕ9ɺͦ͏Ͱͳ͚Ε͹ܕ:ʯ
    ͱ͍͏ҙຯ
    type MyType = T extends U ? X : Y;

    View full-size slide

  31. -FUTUZQF
    w ༡ΜͰΈΑ͏$POEJUJPOBM5ZQFT
    w %J⒎
    w %J⒎͸ͲΜͳܕͰ͠ΐ͏͔ʁ
    type DiffKey = K1 extends K2 ? never : K1;
    type $Diff = {
    [P in DiffKey]: T[P];
    };

    View full-size slide

  32. %JTUSJCVUJPO
    w $POEJUJPOBM5ZQFTͱ6OJPO5ZQFTͷؒʹ͸෼഑཯͕੒ཱ
    w OFWFS͸͍͔ͳΔܕʹ΋୅ೖෆՄೳͳܕʢϘτϜܕʣ
    w
    type DiffKey = K1 extends K2 ? never : K1;
    let key: DiffKey<("name" | "age"), "age">;
    // ("name" extends "age" ? never : "name")
    // | ("age" extends "age" ? never : "age")
    // = ("name" | never)
    // = "name"

    View full-size slide

  33. $POEJUJPOJONBQQFEUZQFT
    w %J⒎,FZLFZPG5 LFZPG6͸ʮܕ5ͷLFZશମ͔Βɺܕ6
    ͷLFZશମͷू߹ΛҾ͍ͨू߹ʯ
    w .BQQFE5ZQF͸͋ΔLFZͷू߹ʹର͢ΔϓϩύςΟͷϚο
    ϐϯά
    type $Diff = {
    [P in DiffKey]: T[P];
    };

    View full-size slide

  34. %J⒎ͷਖ਼ମ
    w 'MPXUZQFʹಉ໊ͷ6UJMJUZUZQF͕͋Γ·͢
    type DiffKey = K1 extends K2 ? never : K1;
    type $Diff = {
    [P in DiffKey]: T[P];
    };
    const defaultProps = { age: 0 };
    let requiredProps: $Diff<{
    name: string;
    age: number;
    }, typeof defaultProps>;
    requiredProps = { name: "Quramy" };

    View full-size slide

  35. 5ZQFJOGFSFODFJO

    DPOEJUJPOBMUZQFT

    View full-size slide

  36. 5ZQFJOGFSFODFJO
    DPOEJUJPOBMUZQFT
    w WYͰ$POEJUJPOBM5ZQFTͱಉ࣌ʹϦϦʔε͞Εͨػೳ
    w $POEJUJPOBM5ZQFTͷ৚݅෦෼ʹͯϚονϯά࣌ʹਪ࿦͞
    ΕͨܕΛ࠶ར༻Ͱ͖ΔΑ͏ʹ
    T extends MyCondition ? SomeType : Y;

    View full-size slide

  37. *OGFSBOE$BQUVSF
    w ਖ਼نදݱͷΩϟϓνϟϦϯάʢάϧʔϓԽʣͱࣅ͍ͯΔ
    w Ϛονͨ͠άϧʔϓ෦෼Λޙ͔Βར༻Ͱ͖Δ
    const regexp = /hoge(\d+)/;
    const hit = "hoge10".match(regexp);
    console.log(hit[1]) // 10

    View full-size slide

  38. *OGFSBOE$BQUVSF
    w 5͕ؔ਺Ͱ͋Ε͹ɺͦͷ໭Γ஋ͱͯ͠ਪ࿦͞ΕΔܕ͕3ʹ֨
    ೲ͞ΕΔ
    type Return =
    T extends (...args: any[]) => infer R ? R : never;
    let r: Return<() => number>; // typeof r = number

    View full-size slide

  39. 3FEVYͬΆ͍ΞϨ
    type Return =
    T extends (...args: any[]) => infer R ? R : never;
    type AppState = { [P in keyof T]: Return };
    const reducers = {
    name: (state: string, action: any) => state,
    age: (state: number, action: any) => state,
    };
    let appState: AppState;
    // typeof appState = { name: sting, age: number }

    View full-size slide

  40. ࢖͍͗͢ʹ஫ҙ
    w $POEJUJPOBM5ZQFTͱ5ZQF*OGFSFODF SZʹΑͬͯɺطଘ
    ͷܕఆ͔ٛΒ৽͘͠ܕΛ࡞Δखஈ͕֨ஈʹ޲্
    w ॻ͍ͯΔͱ͖͸ύζϧײ֮Ͱָ͍͠΋ͷͷɺద౓ͳ༻๏ɾ
    ༰ྔΛ৺͕͚ͨ΄͏͕Α͍
    w Τϥʔϝοηʔδ͕ͲΜͲΜಡΈͮΒ͘ͳΔ
    w ϨϏϡΞ͕ͨ·ͬͨ΋Μ͡Όͳ͍

    View full-size slide

  41. VOLOPXOUZQF
    w WYͰಋೖ
    w VOLOPXO͸͢΂ͯͷܕ͕BTTJHOBCMF
    w VOLOPXOUZQF͸ɺUZQFBTTFSUJPO͠ͳ͍ͱԿ΋Ͱ͖ͳ͍
    function hoge(x: unknown) {
    if (typeof x === "string") {
    console.log(x.toLowerCase());
    }
    }
    hoge(10);
    hoge("foo");

    View full-size slide

  42. 5VQMFTJOSFTUQBSBNFUFST
    BOETQSFBEFYQSFTTJPOT

    View full-size slide

  43. 5VQMFTJOSFTUQBSBNFUFST
    BOETQSFBEFYQSFTTJPOT
    w WYͰɺؔ਺Ҿ਺ʹؔ܎͢Δܕͷهड़ྗ͕ڧԽ͞Εͨ
    w 3FTUQBSBNFUFSTXJUIUVQMFUZQFT
    w 4QSFBEFYQSFTTJPOTXJUIUVQMFUZQFT
    w (FOFSJDSFTUQBSBNFUFST
    w 0QUJPOBMFMFNFOUTJOUVQMFUZQFT
    w 3FTUFMFNFOUTJOUVQMFUZQFT

    View full-size slide

  44. 3FTUQBSBNFUFSTXJUI
    UVQMFUZQFT
    w WYҎલ͸3FTU1BSBNFUFS͸"SSBZUZQFͷΈ͕ڐ༰
    w WY͔Β͸5VQMFUZQF΋ར༻Մೳʹ
    function hoge(...args: any[]) {
    const a1 = args[0];
    const a2 = args[1];
    const a3 = args[2];
    }
    function foo(...args: [string, number]) {
    const a0 = args[0]; // string
    const a1 = args[1]; // number
    const a2 = args[2]; // error
    }

    View full-size slide

  45. 4QSFBEFYQSFTTJPOTXJUI
    UVQMFUZQFT
    w 4QSFBE0QFSBUPSʹΑΔؔ਺ݺͼग़͠ʹରԠ

    Ҏલ͸DPNQJMFFSSPSʹͳͬͯ͠·͍ͬͯͨ

    w WY͔Β͸5VQMFUZQF΋ར༻Մೳʹ
    declare function foo(a: number, b: number): void;
    const args1 = [1, 2] as [number, number];
    foo(...args1);
    const args2 = [1, "bar" ] as [number, string];
    // Argument of type 'string' is not assignable to
    // parameter of type 'number'.
    foo(...args2);

    View full-size slide

  46. (FOFSJDSFTUQBSBNFUFST
    w 3FTU1BSBNFUFSTʹ૯শܕ͕ར༻Մೳʹ
    w +BWB4DSJQUGVODUJPOͷCJOEDBMMBQQMZͱͷ਌࿨ੑ޲্

    ޙड़ͷTUSJDU#JOE$BMM"QQMZͷૅ

    declare function curry(
    fn: (x: T, ...args: U) => R
    ): (x: T) => (...args: U) => R;
    const sum = (a: number, b: number) => a + b;
    const bound = curry(sum)(1);
    const x = bound(2); // type of x = number
    const error = bound("hoge"); // error

    View full-size slide

  47. 0QUJPOBMFMFNFOUTJOUVQMF
    UZQFT
    w 5VQMF5ZQFͷதͰ NPEJpFS͕ར༻Մೳʹ
    w 3FTU1BSBNFUFSTΛ5VQMF5ZQFͰड͚ΕΔΑ͏ͳͬͨ͜
    ͱʹΑΔ෭࢈෺
    type Tuple = [number, string?];
    const x1: Tuple = [1];
    const x2: Tuple = [1, "foo"];

    View full-size slide

  48. 3FTUFMFNFOUTJOUVQMF
    UZQFT
    w 5VQMF5ZQFதʹ3FTUͳUZQFΛදݱͰ͖ΔΑ͏ʹͳͬͨ
    w ؔ਺ͷ3FTU1BSBNFUFSTͱͯ͠΋ར༻Մೳ
    function hoge(...args: T) {
    return args;
    }
    const arr = [1, 2, 3];
    const v = hoge("hoge", ...arr);
    // typeof v = [string, ...number[]]
    type Hoge = [string, ...number[]];

    View full-size slide

  49. .BQQFEUVQMFUZQFT

    View full-size slide

  50. .BQQFEUVQMFUZQFT
    w WYͰಋೖ
    w WY·Ͱ͸.BQQFE5ZQFʹ"SSBZ-JLFͳ5ZQFΛ৯Θͤ
    ͯ΋ɺ΄΅ҙຯͷͳ͍݁Ռʹͳ͍ͬͯͨ
    w WY͔Β͸ʮ഑ྻཁૉࣗମʹର͢ΔϚοϐϯάʯͱ͍͏
    ڍಈʹมߋ͞Εͨ

    View full-size slide

  51. Y
    type Box = { value: V };
    type Boxing= {
    [P in keyof T]: Box;
    };
    type User = {
    name: string,
    age: number,
    };
    const boxedUser: Boxing = {
    name: { value: "quramy" },
    age: { value: 18 },
    };
    let boxedNumbers: Boxing;
    boxedNumbers.concat.value([]); // ???
    boxedNumbers.length.value; // ???

    View full-size slide

  52. Y
    w LFZPGOVNCFS<>ͷҙຯ͕มΘͬͨΘ͚Ͱ͸ͳ͍఺ʹ஫ҙ
    type Box = { value: V };
    type Boxing= {
    [P in keyof T]: Box;
    };
    const boxedNumbers: Boxing = [
    { value: 1 },
    { value: 100 },
    ];

    View full-size slide

  53. ࢖͍Έͪ
    w $POEJUJPOBMUZQF (FOFSJDSFTUQBSBNFUFST .BQQFE
    UVQMFUZQFͷ߹ΘٕͤͷྫΛ঺հ
    w ͓୊SYKTͷDPNCJOF-BUFTUؔ਺ʢ˞1SPNJTFBMMతͳౕʣ
    interface Observable {
    subscribe(cb: (v: T) => void): void;
    }
    declare var s1$: Observable;
    declare var s2$: Observable;
    combineLatest(s1$, s2$).subscribe(([s1, s2]) => {
    console.log(s1); // typeof s1 = string
    console.log(s2); // typeof s2 = number
    });

    View full-size slide

  54. ࢖͍Έͪ
    interface Observable {
    subscribe(cb: (v: T) => void): void;
    }
    // Inference in conditional type
    type StreamType =
    T extends Observable ? S : never;
    // Mapped tuple type
    type Unboxing[]> = {
    [P in keyof U]: StreamType;
    };
    // Generic rest parameters
    declare function combineLatest[]>
    (...args: U): Observable>;

    View full-size slide

  55. TUSJDU#JOE$BMM"QQMZ

    View full-size slide

  56. TUSJDU#JOE$BMM"QQMZ
    w WYͰಋೖ
    w GVODUJPOͷCJOEDBMMBQQMZʹର͢ΔνΣοΫ͕ݫີԽ
    w WYͷ5VQMFUZQF3FTUQBSBNFUFSTڧԽͷ෭࢈෺
    w TUSJDUΦϓγϣϯϑΝϛϦʔͷͭʢσϑΥϧτͰ0/ʣ

    View full-size slide

  57. TUSJDU#JOE$BMM"QQMZ
    w CJOE
    declare function hoge(a: number, b: string): void
    const hoge1 = hoge.bind(null, 1);
    hoge1("hoge");
    hoge1(); // error
    hoge1(1); // error
    hoge1("hoge", 2); // error

    View full-size slide

  58. TUSJDU#JOE$BMM"QQMZ
    w DBMM
    declare function hoge(a: number, b: string): void
    hoge.call(null, 1, "hoge");
    hoge.call(null, 1); // error
    hoge.call(null, "hoge"); // error
    hoge.call(null, 1, "hoge", 2); // error

    View full-size slide

  59. TUSJDU#JOE$BMM"QQMZ
    w BQQMZ
    declare function hoge(a: number, b: string): void
    hoge.apply(null, [1, "hoge"]);
    hoge.apply(null, [1]); // error
    hoge.apply(null, ["hoge"]); // error
    hoge.apply(null, [1, "hoge", 2]); // error

    View full-size slide

  60. ͜͜೥ͷ৽ػೳ

    -BOHBHF4FSWJDFฤ

    View full-size slide

  61. -BOHVBHF4FSWJDF

    View full-size slide

  62. 0SHBOJ[F*NQPSU

    View full-size slide

  63. 0SHBOJ[F*NQPSU
    w WYͰಋೖ
    w UTTFSWFS -BOHVBHF4FSWJDF
    ʹPSHBOJ[F*NQPSUίϚϯ
    υ͕௥Ճ͞Εͨ
    w UTMJOUͷOPVOVTFEWBSJBCMFT JNQPSU
    ͷpY૬౰΋΍ͬͯ͘
    ΕΔ

    View full-size slide

  64. %FNP
    /* before */
    import { hoge } from "./lib";
    import { foo } from "./lib";
    // no used import
    import { bar } from "./lib";
    hoge();
    foo();
    /* after */
    import { hoge, foo } from "./lib";
    hoge();
    foo();

    View full-size slide

  65. $PEF'JY4VHHFTUJPO

    View full-size slide

  66. ,JOEPG&SSPST
    w 5ZQF4DSJQUͷΤϥʔ͸΋ͱ΋ͱछྨ
    w 4ZOUBY&SSPSͦ΋ͦ΋จ๏ͱ͓͔͍ͯ͠͠΋ͷ
    w 4FNBOUJD&SSPSܕෆ੔߹ͳͲ

    View full-size slide

  67. &SSPS$PEFpY
    w UTTFSWFS -BOHVBHF4FSWJDF
    ʹ͓͚ΔΤϥʔpYͷྲྀΕ
    HFU4VQQPSUFE$PEF'JYFTίϚϯυͰ-BOH4FSWJDF͕ରԠՄೳͳ
    ΤϥʔίʔυͷҰཡΛऔಘ͓ͯ͘͠
    HFU&SSPSίϚϯυͰϑΝΠϧͷΤϥʔΛ-BOH4FSWJDF΁໰͍߹Θ
    ͤΔ
    $PEF'JYαϙʔτର৅ͷΤϥʔίʔυͷ৔߹ɺHFU$PEF'JYFTίϚ
    ϯυͰमਖ਼಺༰Λ-BOH4FSWJDFʹ໰͍߹ΘͤΔ
    ड͚औͬͨมߋ಺༰ 5FYU$IBOHF
    ΛΤσΟλͷόοϑΝʹద༻͢Δ

    View full-size slide

  68. 4VHHFTUJPO&SSPS
    w ཁ͢ΔʹΤϥʔ͕ແ͍ͱɺ$PEF'JY͸Ͱ͖ͳ͍
    w ʮ5ZQF4DSJQUͦͷ΋ͷ͕ਪ঑͢Δॻ͖ํʯʹϦϑΝΫλ͞
    ͤΔͨΊʹ͸ɺରԠ͢ΔΤϥʔίʔυ͕ඞཁ
    w Α͠ɺ৽͍͠ΧςΰϦΛ࡞Ζ͏ʂͱ͍͏͜ͱͰɺ
    4VHHFTUJPO&SSPS͕WYͰੜ·Εͨ

    View full-size slide

  69. %FNP
    w ౾஌ࣝ
    Τϥʔίʔυ൪୆͸4VHHFTUJPO&SSPS

    View full-size slide

  70. 3FOBNFJNQPSU
    EFDMBSBUJPO

    View full-size slide

  71. 3FOBNFJNQPSU
    EFDMBSBUJPO
    w WYͰಋೖ
    w *NQPSUGSPNͷର৅෦෼ΛSFOBNFͰ͖ΔΑ͏ʹͳͬͨ
    /* fuga.ts */
    export function fuga() {
    return "hoge";
    }
    /* main.ts */
    import { fuga } from "./fuga";
    console.log(hoge());

    View full-size slide

  72. 4VNNBSZ
    w $POEJUJPOBMUZQFͱ*OGFSFODF͸௒ڧྗ
    w 3FTUQBSBNFUFSTपΓͷվળ͕ҰؾʹਐΜͩ

    CJOEDBMMBQQMZͷܕνΣοΫ͸਱ʹདྷ͔ͨʂײ͋Δ
    w $PEF'JY΍ϦϑΝΫλؔ࿈΋Ҿ͖ଓ͖֦ॆ͕ਐΜͰ͍Δ

    View full-size slide

  73. &OKPZUZQJOH
    5ZQF4DSJQU

    View full-size slide