TypeScriptでつくるNode.jsパッケージ

Fukuoka.js #8「TypeScript」

Transcript

1. 5ZQF4DSJQUͰͭ͘Δ
   /PEFKTύοέʔδ
   'VLVPLBKTň5ZQF4DSJQUʼn
   גࣜձࣾσΟʔθϩ
   8FCΞΫηγϏϦςΟΤϯδχΞ
   ฏඌΏ͏ͯΜ
   

   View Slide

2. ©2019 Yusuke Hirao
   גࣜձࣾσΟʔθϩ
   8FCΞΫηγϏϦςΟΤϯδχΞ
   ฏඌΏ͏ͯΜ
   5ZQF4DSJQUͰͭ͘Δ
   /PEFKTύοέʔδ
   'VLVPLBKTň5ZQF4DSJQUʼn
   

   View Slide

3. ©2019 Yusuke Hirao
   ࣗݾ঺հ
   ฏඌ༏యʢͻΒ͓Ώ͏ͯΜʣ
   גࣜձࣾσΟʔθϩ
   8FCΞΫηγϏϦςΟΤϯδχΞ
   ϑϩϯτΤϯυΤϯδχΞ
   #-0(IUUQTOPUFNVZVTVLFIJSBP
   Yusuke Hirao
   @cloud10designs
   

   View Slide

4. ©2019 Yusuke Hirao
   ͜Μͳͷ࡞ͬͯ·͢
   KBDPKT೔ຊޠ༻จࣈม׵ϥΠϒϥϦ
   NBSLVQMJOU)5.-ϦϯλʔόϦσʔλʔ
   

   View Slide

5. ©2019 Yusuke Hirao
   ࠓ೔͸ͳ͢͜ͱ
   ࠷௿ݶͷϛχϚϜͳ
   tsconfig.json
   packge.json
   ઃఆʹ͍ͭͯ
   

   View Slide

6. ©2019 Yusuke Hirao
   ࠓ೔͸ͳ͞ͳ͍͜ͱ
   ܕͷ͸ͳ͠
   NPOPSFQPʹ͍ͭͯ
   

   View Slide

7. ©2019 Yusuke Hirao
   ΞδΣϯμ
   ίʔυΛॻ͘લʹܾΊ͓ͯ͘͜ͱ
   ઃఆ
   Ϗϧυ͢Δ
   ύϒϦογϡ͢Δ
   

   View Slide

8. ©2019 Yusuke Hirao
   ίʔυΛॻ͘લʹܾΊ͓ͯ͘͜ͱ
   

   View Slide

9. ©2019 Yusuke Hirao
   ίʔυΛॻ͘લʹܾΊ͓ͯ͘͜ͱ
   ϦϙδτϦͷσΟϨΫτϦߏ੒
   +BWB4DSJQUϑΝΠϧ΍
   ܕఆٛϑΝΠϧʢ*.d.tsʣͳͲͷॻ͖ग़͠ઌ
   w OQNͰެ։͢ΔϑΝΠϧ܊ΛೖΕΔɻ
   w HJUͰ͸আ֎͢Δɻ
   w ໊લ͸libͰ΋distͰ΋ԿͰ΋͓޷ΈͰɻϞδϡʔϧʹύεࢀ
   রͰ͖Δύοέʔδʢ5SFF4IBLJOHͷͨΊͩͬͨΓʣʹ͍ͨ͠৔
   ߹ɺσΟϨΫτϦ໊ͪΐͬͱॏཁɻʢྫKBDPKTʣ
   import toHiragana from "jaco/fn/toHiragana";
   toHiragana("ΧλΧφΛͻΒͳ͕ʹ");
   

   View Slide

10. ©2019 Yusuke Hirao
    ίʔυΛॻ͘લʹܾΊ͓ͯ͘͜ͱ
    ϦϙδτϦͷσΟϨΫτϦߏ੒
    5ZQF4DSJQUϑΝΠϧͳͲιʔείʔυஔ͖৔
    w OQNͰެ։͠ͳ͍ʢͯ͠΋͍͍ʣɻ
    w ͜͜΋໊લ͸͓޷ΈͰɻ
    

    View Slide

11. ©2019 Yusuke Hirao
    ίʔυΛॻ͘લʹܾΊ͓ͯ͘͜ͱ
    ϦϙδτϦͷσΟϨΫτϦߏ੒
    ϑΥϧμ͸ผʑ͕Φεεϝ
    w HJUOQNͷআ֎ઃఆָ͕ɻ
    w ܕఆٛϑΝΠϧʢ*.d.ts.mapʣͷιʔεϚοϓΛར༻Ͱ͖Δɻ
    

    View Slide

12. ©2019 Yusuke Hirao
    ίʔυΛॻ͘લʹܾΊ͓ͯ͘͜ͱ
    ॻ͖ग़͢+4ͷόʔδϣϯʢtargetʣ
    es5 es2017 esnext
    
    ϝϦοτ
    ͲΜͳ؀ڥͰ΋ಈ͘
    /PEFKTWҎ্
    ͳΒಈ͘
    import.metaରԠ
    ʢ&4.ʹඞਢʣ
    
    σϝϦοτ
    async/await΍
    for..ofͳͲ͕
    ϨΨγʔίʔυม׵͞ΕΔ
    ϒϥ΢βͰ࢖͏৔߹͸
    CBCFMͳͲ͕ඞཁʹͳΔ
    ී௨ʹ࢖͏ͳΒ
    CBCFMͳͲ͕ඞཁ
    

    View Slide

13. ©2019 Yusuke Hirao
    ίʔυΛॻ͘લʹܾΊ͓ͯ͘͜ͱ
    ॻ͖ग़͢+4ͷϞδϡʔϧγεςϜʢmoduleʣ
    commonjs esnext ͦͷଞ
    
    ϝϦοτ
    ݱࡏͷඪ४
    import.metaରԠ
    ʢ&4.ʹඞਢʣ
    ͠ΒΜ
    
    σϝϦοτ
    &4.Ͱ࢖͑ͳ͍
    ී௨ʹ࢖͏ͳΒ
    CBCFMͳͲ͕ඞཁ
    Θ͔ΒΜ
    

    View Slide

14. ©2019 Yusuke Hirao
    ઃఆ
    

    View Slide

15. ©2019 Yusuke Hirao
    ઃఆ
    $ yarn init
    {
    "name": "@yusukehirao/sample",
    "version": "0.1.0-alpha.0",
    "main": "lib/index.js",
    "author": "Yusuke Hirao ",
    "license": "MIT"
    }
    ࣮ݧͷࡍ͸4DPQFEQBDLFHFʹ͠·͠ΐ͏
    ઌʹܾΊͨσΟϨΫτϦ಺ͷΤϯτϦʔϑΝΠϧ
    import sample from "@yusukehirao/sample";
    ௨ৗͷimport࣌ͷࢀরઌʹͳΔ
    package.json
    

    View Slide

16. ©2019 Yusuke Hirao
    ઃఆ
    $ yarn add -D typescript
    ίϯύΠϥΛΠϯετʔϧ
    {
    "name": "@yusukehirao/sample",
    "version": "0.1.0-alpha.0",
    "main": "lib/index.js",
    "author": "Yusuke Hirao ",
    "license": "MIT",
    "devDependencies": {
    "typescript": "^3.4.5"
    }
    }
    package.json
    

    View Slide

17. ©2019 Yusuke Hirao
    ઃఆ
    $ ./node_modules/.bin/tsc —init
    {
    "compilerOptions": {
    "target": "es2017",
    "module": "commonjs",
    "declaration": true,
    "declarationMap": true,
    "sourceMap": true,
    "outDir": "./lib",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true
    }
    }
    tsconfig.json
    ܾΊͨॻ͖ग़͠ઌͱιʔείʔυஔ͖৔
    ܾΊͨ&4όʔδϣϯϞδϡʔϧγεςϜ
    

    View Slide

18. ©2019 Yusuke Hirao
    ઃఆ
    $ ./node_modules/.bin/tsc —init
    {
    "compilerOptions": {
    "target": "es2017",
    "module": "commonjs",
    "declaration": true,
    "declarationMap": true,
    "sourceMap": true,
    "outDir": "./lib",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true
    }
    }
    tsconfig.json
    ܕఆٛϑΝΠϧͱιʔεϚοϓϑΝΠϧͷ
    ੜ੒Λ༗ޮʹ͓ͯ͘͠
    

    View Slide

19. ©2019 Yusuke Hirao
    ઃఆ
    ίϯύΠϧίϚϯυΛొ࿥
    tsc ίϚϯυΛొ࿥͓ͯ͘͠
    {
    "name": "@yusukehirao/sample",
    "version": "0.1.0-alpha.0",
    "main": "lib/index.js",
    "author": "Yusuke Hirao ",
    "license": "MIT",
    "scripts": {
    "build": "tsc",
    "prepack": "tsc"
    },
    "devDependencies": {
    "typescript": "^3.4.5"
    }
    }
    package.json
    w Φϓγϣϯ͸tsconfig.jsonʹॻ͍͓͚ͯ
    ͹جຊ͍Βͳ͍ɻ
    w prepackεΫϦϓτ͸ύοέʔδެ։࣌ͷ
    Ϗϧυ๨Ε๷ࢭɻ
    

    View Slide

20. ©2019 Yusuke Hirao
    ઃఆ
    ܕఆٛϑΝΠϧΛొ࿥
    ΤϯτϦʔϑΝΠϧͷܕఆٛϑΝΠϧͷύε
    {
    "name": "@yusukehirao/sample",
    "version": "0.1.0-alpha.0",
    "main": "lib/index.js",
    "types": "lib/index.d.ts",
    "author": "Yusuke Hirao ",
    "license": "MIT",
    "scripts": {
    "build": "tsc",
    "prepack": "tsc"
    },
    "devDependencies": {
    "typescript": "^3.4.5"
    }
    } package.json
    w ܕ৘ใΛఏڙͰ͖Δɻ
    w Α͘ @types/xxxxxͰࢀর͢Δ
    %FpOJUFMZ5ZQFE%FpOJUFMZ5ZQFEʹ13
    ૹΔඞཁͳ͍ɻ
    

    View Slide

21. ©2019 Yusuke Hirao
    Ϗϧυ͢Δ
    

    View Slide

22. ©2019 Yusuke Hirao
    Ϗϧυ͢Δ
    $ yarn build
    

    View Slide

23. ©2019 Yusuke Hirao
    Ϗϧυ͢Δ
    $ yarn build
    
    

    View Slide

24. ©2019 Yusuke Hirao
    ύϒϦογϡ͢Δ
    

    View Slide

25. ©2019 Yusuke Hirao
    ύϒϦογϡ͢Δ
    $ touch .npmignore
    ύοέʔδʹؚ·ͳ͍ϑΝΠϧͷআ֎ઃఆΛ͢Δ
    src
    tsconfig.json
    tsconfig.tsbuildinfo
    .npmignore
    w package.jsonͷfilesʹύοέʔδʹؚΊ
    ͍ͨϑΝΠϧͷϗϫΠτϦετΛॻ͍ͯ΋Α
    ͍ɻ
    w .npmignore͔files͕ͳ͍ͱɺ.gitignore
    Λআ֎ઃఆͱΈͳ͢ͷͰɺॻ͖ग़͠ઌͷσΟϨ
    ΫτϦ͕ύοέʔδʹೖΒͳ͍൵ࢂͳ͜ͱʹͳ
    Δ
    

    View Slide

26. ©2019 Yusuke Hirao
    ύϒϦογϡ͢Δ
    $ npm publish
    
    

    View Slide

27. ©2019 Yusuke Hirao
    ύϒϦογϡ͢Δ
    ܕఆٛϑΝΠϧ΋ެ։͍ͯ͠ΔͷͰɺ
    5ZQF4DSJQU͔Β͸΋ͪΖΜɺ+BWB4DSJQUͰ΋ܕΛࢀরͰ͖Δ
    

    View Slide

28. 5ZQF4DSJQUͰ
    ར༻ͯ͠΋Β͑·͢Αʔʹ
    
    

    View Slide

29. גࣜձࣾσΟʔθϩ
    8FCΞΫηγϏϦςΟΤϯδχΞ
    ฏඌΏ͏ͯΜ
    5ZQF4DSJQUͰͭ͘Δ
    /PEFKTύοέʔδ
    'VLVPLBKTň5ZQF4DSJQUʼn
    

    View Slide