Save 37% off PRO during our Black Friday Sale! »

TypeScriptの型定義をPRする技術

356e56d2b5f14e05f3c7e7931197da0b?s=47 ypresto
September 06, 2019

 TypeScriptの型定義をPRする技術

kansai.ts #2での10分LT。 i18n-jsの型定義をDefinitelyTypedに収録したときの型定義作成方法を思い出しながら書きました。

スライド中のリンクが切れちゃってるので、リンクが使えるGoogleスライドもこちらに。
https://docs.google.com/presentation/d/1LoG3e94Y1W-dGWc4e4Tfu749ikwwVqAOkb-WULuEzEo/edit?usp=sharing

oO(なおGoogleスライドからPDF落とすとヒラギノが代替フォントになり、pptxを落とすと角丸吹き出しが四角くなってしまうという事に気がついたのは知見でした・・)

356e56d2b5f14e05f3c7e7931197da0b?s=128

ypresto

September 06, 2019
Tweet

Transcript

  1. TypeScript ͷܕఆٛΛ
 13͢Δٕज़ ZQSFTUP:VZB5BOBLB
 LBOTBJUT Picture: Ron Clausen (CC-BY-SA 4.0)

    with trimming & color filter applied by ypresto
 ஫ɿͪΌΜͱTSͷαΠτͱಉ͡γΞτϧͷը૾Ͱ͢
  2. !ZVZB@QSFTUP !ZQSFTUP DPEF5BLUֶߍڭҭܥΤϯδχΞ ϑϧϦϞʔτอҭ࢜ࢿ֨ :VZB5BOBLB bit.ly/ypresto-d-ts

  3. ۀ຿࿈བྷɿϩΫʹφϨοδγΣΞ΋ͤͣ͢Έ·ͤΜͰͨ͠ɾɾ ͋ɺͰ΋͜ͷ2JJUBهࣄॻ͍ͯͨ ʢ࡟আ௒ա෼͸ZBSOMPDLʣ bit.ly/ypresto-d-ts

  4. "UMFBTU13T bit.ly/ypresto-d-ts

  5. ܕఆٛΛॻ͘ bit.ly/ypresto-d-ts

  6. None
  7. ߇͑Ί͕ա͗Δ P0ʢϥΠϒϥϦͷJNQPSUʹ͚ͩ༗ޮͳOP*NQMJDJU"OZ୭͔࡞͍ͬͯͩ͘͞ʂʂ

  8. ॳڃฤ

  9. None
  10. None
  11. தڃฤ

  12. ˝

  13. None
  14. None
  15. None
  16. ্ڃฤ

  17. None
  18. None
  19. 13Ͱ͖ΔܕΛ࡞Γ্͛Δ·Ͱ IUUQTHJUIVCDPNGOBOEPJOKT IUUQTHJUIVCDPN%FGJOJUFMZ5ZQFE%FGJOJUFMZ5ZQFEUSFF FDDECGFBBEECFUZQFTJOKT ʢ୹ॖˠIUUQCJUMZZQSFTUPEUJOKTʣ ˢ࡞ͬͯ13ͨ͠

  20. ܕ৘ใΛऩू͢Δʢਓྗʣ

  21. υΩϡϝϯτ͔Β αϯϓϧίʔυ͔Β ຊମͷίʔυ͔Β

  22. υΩϡϝϯτ͔Β

  23. αϯϓϧίʔυ͔Β

  24. αϯϓϧίʔυ͔Β υΩϡϝϯτ͔Β
 ੾Γग़ͯ͠ܕͷςετʹʂ

  25. ຊମͷίʔυ͔Β

  26. ຊମͷίʔυ͔Β ਖ਼͚֬ͩͲ
 ͿͬͪΌ͚େม
 ֬ೝ࣌ʹGood ͋ͱυΩϡϝϯτ͞Εͯͳ͍
 ύϥϝʔλ΋ݟ͔ͭΔʁ

  27. ܕఆٛͳΒͰ͸ͷ
 ͓࡞๏

  28. None
  29. FYQPSU OBNFTQBDF ܕͷFYQPSU

  30. ͜Ε͡ΌμϝͳΜʁ
 ⾣export defaultΛฒ΂ͯॻ͘ͱյΕΔϥΠϒϥϦ͕ଟ͍ ͜ͷॻ͖ํ͸ES ModulesͷϥΠϒϥϦઐ༻

  31. ʢesModuleInterop͕Φϑͷͱ͖ʣ
 ࣮ߦ࣌ʹTypeError ʮdayjs_1.default is undefinedʯ ྫɿexport =Ͱॻ͔Ε͍ͯΔdayjsͷ ܕఆٛΛexport defaultʹͯ͠ΈΔ ˢจݴ͸ద౰

  32. FYQPSU 54&4.PEVMFT $PNNPO+4 FYQPSUEFGBVMU'PP NPEVMFFYQPSUTEFGBVMU JNQPSU'PPGSPNGPP WBS'PPSFRVJSF GPP EFGBVMU FYQPSU'PP54ઐ༻

    NPEVMFFYQPSUT JNQPSU BT'PPGSPNGPP JNQPSU'PPSFRVJSF GPP 54 WBS'PPSFRVJSF GPP FT.PEVMF*OUFSPQ͕0/ͷ৔߹ɺΑ͠ͳʹରԠ JNQPSU'PPGSPNGPP WBSGPPSFRVJSF GPP  WBS'PPGPP͕&4.PEVMFT  GPPEFGBVMUGPP
  33. FYQPSU 54&4.PEVMFT $PNNPO+4 FYQPSUEFGBVMU'PP NPEVMFFYQPSUTEFGBVMU JNQPSU'PPGSPNGPP WBS'PPSFRVJSF GPP EFGBVMU FYQPSU'PP54ઐ༻

    NPEVMFFYQPSUT JNQPSU BT'PPGSPNGPP JNQPSU'PPSFRVJSF GPP 54 WBS'PPSFRVJSF GPP FT.PEVMF*OUFSPQ͕0/ͷ৔߹ɺΑ͠ͳʹରԠ JNQPSU'PPGSPNGPP WBSGPPSFRVJSF GPP  WBS'PPGPP͕&4.PEVMFT  GPPEFGBVMUGPP ݱ୅ɺଟ͘͸ͬͪ͜ͷ͸ͣ
 ʢbabelͯ͠Δ৔߹ͱ͔ʣ
  34. FYQPSU 54&4.PEVMFT $PNNPO+4 FYQPSUEFGBVMU'PP NPEVMFFYQPSUTEFGBVMU JNQPSU'PPGSPNGPP WBS'PPSFRVJSF GPP EFGBVMU FYQPSU'PP54ઐ༻

    NPEVMFFYQPSUT JNQPSU BT'PPGSPNGPP JNQPSU'PPSFRVJSF GPP 54 WBS'PPSFRVJSF GPP FT.PEVMF*OUFSPQ͕0/ͷ৔߹ɺΑ͠ͳʹରԠ JNQPSU'PPGSPNGPP WBSGPPSFRVJSF GPP  WBS'PPGPP͕&4.PEVMFT  GPPEFGBVMUGPP NOTE: I18n.defaultLocale = 'ja' ͸ TSઐ༻requireͰॻ͔ͳ͍ͱͰ͖ͳ͍ ʢES Modules͸readonlyʣ
  35. FYQPSU 54&4.PEVMFT $PNNPO+4 FYQPSUEFGBVMU'PP NPEVMFFYQPSUTEFGBVMU JNQPSU'PPGSPNGPP WBS'PPSFRVJSF GPP EFGBVMU FYQPSU'PP54ઐ༻

    NPEVMFFYQPSUT JNQPSU BT'PPGSPNGPP
 JNQPSU'PPSFRVJSF GPP 54 WBS'PPSFRVJSF GPP FT.PEVMF*OUFSPQ͕0/ͷ৔߹ɺΑ͠ͳʹରԠ JNQPSU'PPGSPNGPP WBSGPPSFRVJSF GPP  WBS'PPGPP͕&4.PEVMFT  GPPEFGBVMUGPP esModuleInterop͸ ࢖͍खͰONͱ͸ݶΒͳ͍
  36. FYQPSU OBNFTQBDF ܕͷFYQPSU

  37. OBNFTQBDF WBS*O\^10+0΍GVODUJPOΛ༻ҙ͠ NPEVMFTFYQPSUT*O·ΔͬͱFYQPSUʂ ϓϩύςΟࢗͯ͠

  38. dayjsؔ਺ΦϒδΣΫτʹ .locale() ΋ੜ͑ͯΔ ͦ͏ɺnamespaceͳΒͶ

  39. FYQPSU OBNFTQBDF ܕͷFYQPSU ͓લ͸ɹɹ
 ୭ͩʁ

  40. FYQPSUBTOBNFTQBDF ϒϥ΢β௚loadͰ΋࢖͑Δ UMDܗࣜͷ৔߹͸ॻ͘ʂ ྫɿ window.$ ͱ͔ i18n-jsͷίʔυ

  41. OBNFTQBDF FYQPSU ܕͷFYQPSU

  42. ܕͷFYQPSU &4.PEVMFTͰUPQMFWFMʢ͔EFDMBSFNPEVMF௚ԼʣʹܕΛॻ͘৔߹ɺ ෳࡶͳҾ਺΍ฦΓ஋ͳͲɺඞཁͳܕʹ͸FYQPSUΛʂ /05&FYQPSUͨ͠OBNFTQBDFͷதͷܕ͸উखʹݟ͑Δ໛༷

  43. ͦͷଞͷώϯτ ˔ ຊମʹ13͢Δͱ͖͸QBDLBHFKTPOʹUZQFTJOEFYEUTΛ௥Ճ ˔ %FGJOJUFMZ5ZQFEʹ13͢Δͱ͖͸$POUSJCVUJPOHVJEFΛಡΉ ˔ ෳ਺ϑΝΠϧͷϥΠϒϥϦ͸GPPCBSKTʹରԠͯ͠GPPCBSEUTΛ௥Ճ
 ⾣JNQPSUGSPNIPHFGPPCBSͨ͠ͱ͖ʹಡΜͰ͘ΕΔ ˔ ϞνϕΛอͭʹ͸ɿࣗ෼ͷϓϩδΣΫτͷ


    EFDMBSFNPEVMFͷதͰॻ͖࢝ΊͯɺޙͰ13ʹ͢Δ
  44. FAQʢʁʣ

  45. 2৽͍͠ϥΠϒϥϦʹ
 ܕఆٛΛ͚ͭͯ ഑Γ͍ͨͷͰ͕͢ʁ

  46. "ྩ࿨࣌୅ͷϥΠϒϥϦ͸
 ࠷ॳ͔Β5ZQF4DSJQUͰ ॻ͖·͢ΑͶʁʁ

  47. None
  48. ·ͱΊ ܕఆٛΛॻ͘ʹ͸ υΩϡϝϯτ͔Βܕ৘ใΛ αϯϓϧίʔυ͔ΒܕͷςετΛ ຊମͷίʔυͰর߹Λ ܕఆٛͷ͓࡞๏ FYQPSUʹඞཁͳΒOBNFTQBDFΛ ࢖͏ FYQPSUΛॻ͖෼͚Δ 6.%͸FYQPSUBTOBNFTQBDF

    ܕ΋FYQPSUͯ͋͛͠Δ ܕͱ͸υΩϡϝϯτͰɺ ܕͱ͸ςετͩʂʂ
  49. ॻ͍ͯͳ͍ͱ͜Ζ͸جຊBOZͳͷͰɺଞͷPQUJPOͰΤϥʔʹͳΓʹ͍͘ʢଟ෼ ࣮ࡍ͸΁λϨͩͬͨͷͰTUSJDU/VMM$IFDLTͱOP*NQMJDJU5IJT͚͔ͩΒͰͨ͠ɾɾ ༨ஊɿTUSJDU͠·ͤΜ͔ʁ

  50. FYQPSU 54&4.PEVMFT $PNNPO+4 FYQPSUEFGBVMU'PP NPEVMFFYQPSUTEFGBVMU JNQPSU'PPGSPNGPP WBS'PPSFRVJSF GPP EFGBVMU FYQPSU'PP

    NPEVMFFYQPSUT'PP JNQPSU\'PP^GSPNGPP WBS'PPSFRVJSF GPP 'PP FYQPSU'PP54ઐ༻ NPEVMFFYQPSUT JNQPSU BT'PPGSPNGPP WBS'PPSFRVJSF GPP FT.PEVMF*OUFSPQ͕0/ͷ৔߹ɺΑ͠ͳʹରԠ JNQPSU'PPGSPNGPP WBSGPPSFRVJSF GPP  WBS'PPGPP͕&4.PEVMFT  GPPEFGBVMUGPP
  51. FYQPSU 54&4.PEVMFT $PNNPO+4 FYQPSUEFGBVMU'PP NPEVMFFYQPSUTEFGBVMU JNQPSU'PPGSPNGPP WBS'PPSFRVJSF GPP EFGBVMU FYQPSU'PP

    NPEVMFFYQPSUT'PP JNQPSU\'PP^GSPNGPP WBS'PPSFRVJSF GPP 'PP FYQPSU'PP54ઐ༻ NPEVMFFYQPSUT JNQPSU BT'PPGSPNGPP WBS'PPSFRVJSF GPP FT.PEVMF*OUFSPQ͕0/ͷ৔߹ɺΑ͠ͳʹରԠ JNQPSU'PPGSPNGPP WBSGPPSFRVJSF GPP  WBS'PPGPP͕&4.PEVMFT  GPPEFGBVMUGPP import * as React from 'react' ▼ import React from 'react' import React, { useState } from 'react'
  52. FYQPSU %FGJOJUFMZ5ZQFEΑΓMPEBTILFZ#ZEUT %FGJOJUFMZ5ZQFEΑΓMPEBTIFTLFZ#ZEUT