typescript language update

typescript language update

Transcript

1. Language Update
   TypeScript
   --&WFOU
   CZ!2VSBNZ
   

   View Slide

2. "CPVUNF
   w ૔ݟ༸ีBLB!2VSBNZ
   w ϑϩϯτΤϯυΤϯδχΞ
   w ීஈ͸3FBDU3FEVYͰ41"Λ࡞ͬͯ·͢
   

   View Slide

3. View Slide

4. 5ZQF4DSJQU͓͞Β͍
   

   View Slide

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

   ओཁͳઃܭऀʹ"OEFST)FKMTCFSH͕͍Δ
   w ੩తͳܕ෇ݴޠ
   w +BWB4DSJQUͷεʔύʔηοτɻ઴࣍తͳಋೖ͕Մೳ
   w #PPUTUSBQQJOH
   w ΤσΟλϑϨϯυϦʔ
   

   View Slide

6. ܕνΣοΫͱਪ࿦
   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 Slide

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

   View Slide

8. 4USVDUVBMTVCUZQJOHT
   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 Slide

9. ϥΠϒϥϦͷܕఆٛ
   w ༗໊ͳϥΠϒϥϦ͸OQNJ!UZQFTϥΠϒϥϦ
   ໊Ͱܕఆ͕ٛެ։͞Ε͍ͯΔ
   w ࠷ۙ͸EUT ܕఆٛϑΝΠϧ
   Λಉࠝͨ͠ύοέʔ
   δ΋૿͖͍͑ͯͯΔ
   npm i @types/node
   import path from "path";
   export function hoge() {
   const x = path.join("src", "main.ts");
   }
   

   View Slide

10. ࠷ۙͷ5ZQF4DSJQU
    

    View Slide

11. w *NQSPWFNBQQFEUZQFNPEJpFST
    w $POEJUJPOBMUZQFT
    w 5ZQFJOGFSFODFJODPOEJUJPOBMUZQFT
    w 6OLOPXOUZQF
    w 5VQMFTJOSFTUQBSBNFUFSTBOETQSFBEFYQSFTTJPOT
    w .BQQFEUVQMFUZQFT
    w 4USJDUCJOE DBMM BOEBQQMZNFUIPETJOGVODUJPOT
    w )JHIFSPSEFSGVODUJPOUZQFJOGFSFODF
    w *NQSPWFETVQQPSUGPSSFBEPOMZBSSBZTBOEUVQMFT
    w $POTUDPOUFYUTGPSMJUFSBMFYQSFTTJPOT
    w "TTFSUJPOJODPOUSPMqPXBOBMZTJT
    w &UD
    
    
    

    View Slide

12. ΊͪΌͪ͘Ό৭ʑ͋Δ
    

    View Slide

13. 5ZQF4DSJQU͸Ͳ͜ʹ޲͔͍ͬͯΔʁ
    

    View Slide

14. "The goal of TypeScript's type system is to
    statically model patterns in JavaScript in a
    reasonable way while catching bugs and enforcing
    correctness"
    ೥্ظ5ZQF4DSJQUϩʔυϚοϓ IUUQTHJUIVCDPN.JDSPTPGU5ZQF4DSJQUJTTVFT
    ΑΓൈਮ
    

    View Slide

15. w +BWB4DSJQUͷදݱͷॊೈ͞Λอͪͭͭɺܕਪ
    ࿦ྗɾܕνΣοΫೳྗΛߴΊΔVQEBUF͕܁Γ
    ฦ͞Ε͍ͯΔ
    w ܕνΣοΫͷڧྗ͞Λ఻͑Δ΂͘ɺʢൺֱతʣ
    ࠷ۙͷػೳΛҰ෦঺հ
    

    View Slide

16. %FNP
    

    View Slide

17. "QQFOEJY
    $POEJUJPOBMUZQFT
    

    View Slide

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

    View Slide

19. 5ZQFJOGFSFODFJO

    DPOEJUJPOBMUZQFT
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

23. "QQFOEJY

    (FOFSJDSFTUQBSBNFUFST
    

    View Slide

24. (FOFSJDSFTUQBSBNFUFST
    w 3FTU1BSBNFUFSTʹ૯শܕ͕ར༻Մೳʹ
    w WYʹ͓͚ΔՄม௕Ҿ਺ܕਪ࿦ڧԽͷҰ؀
    w
    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 Slide

25. 0UIFSSFTPVSDFT
    w )5.-$POGFSFODF
    w IUUQTZPVUVCF/19:U8CWRL
    MJTU1-F';8[-+Q;DDVPQE#K+"VPE@U:(
    W7$*)W
    w IUUQTTQFBLFSEFDLDPNRVSBNZ
    UZQFTDSJQUFWPMVUJPOOHPOBJS
    

    View Slide

26. &OKPZUZQJOH5ZQF4DSJQU
    

    View Slide

27. 5IBOLZPV
    

    View Slide