JavaScript製npmパッケージをTypeScriptで書き直した話

 JavaScript製npmパッケージをTypeScriptで書き直した話

https://github.com/watanabeyu/react-native-simple-twitter
https://github.com/watanabeyu/react-native-store-version
この2つをTS化しました的な。
簡単な手順と感想とd.tsについて的な。

254ef4587f3c010fc0c52517ff5514c2?s=128

Yu Watanabe

April 25, 2019
Tweet

Transcript

  1. 2019/04/25 Θͨͳ΂Ώ͏ JAVASCRIPT੡NPMύοέʔδΛTYPESCRIPTͰॻ͖௚ͨ͠࿩

  2. ▸ ࣗݾ঺հ ▸ JavaScript -> TypeScriptʹมߋͨ͠ύοέʔδ ▸ JavaScript -> TypeScriptʹมߋͨ͠ॴײ

    ▸ ܕఆٛϑΝΠϧ(d.ts)ʹ͍ͭͯ ▸ ·ͱΊ ֓ཁ
  3. ࣗݾ঺հ(1) Θͨͳ΂Ώ͏ ▸ ॴଐ ▸ גࣜձࣾg&h ▸ Web / ΞϓϦΛझຯͰެ։

    ▸ ࢓ࣄ಺༰ ▸ αʔό / ϑϩϯτ / ΞϓϦ / Web ▸ ΞΧ΢ϯτ ▸ Twitter : @hmktsu ▸ Github : @watanabeyu
  4. ࣗݾ঺հ(2) ࣮ફExpo ɾExpo + FirebaseͰInstagram෩ͳΞϓϦΛ࡞ͬͪΌ͓͏తͳຊ ɾ2018೥12݄ʹΠϯϓϨεR&DΑΓग़൛ https://amzn.to/2ruX5DI #1ਓνʔϜຊ ɾExpoͰAPI΋ؚΜͩΞϓϦΛ࡞Δࡍͷ؀ڥߏஙपΓΛத৺ͱͨ͠ຊ ɾͲ͏΍ͬͯίʔυΛ៉ྷʹॻ͔͘ͷTipsͩͬͨΓͱ͔

    ɾCIͷઃఆͱ͔ϦϙδτϦͷ؅ཧͱ͔൒ࣗಈԽͱ͔Dockerͱ͔ ɾ1ਓͰ΋νʔϜ։ൃͱಉ͘͡Β͍ͷ੎͍Ͱ։ൃ͢Δʹ͸తͳ ɾ2019೥04݄։࠵ͷٕज़ॻయ6ʹͯಉਓग़൛ https://hmktsu.booth.pm/items/1315573
  5. ࣗݾ঺հ(3) ▸ https://www.gandh.jp ▸ 3໊(ΤϯδχΞ͸ࣗ෼Ұਓ)Ͱฏۉ೥ྸ30൒͹ͷγχΞձࣾ ▸ ετϦʔτΧϧνϟʔ × ITͳαʔϏεΛӡӦ ▸

    ݱࡏͷϝΠϯࣄۀɿhttps://www.weddyweddy.net ▸ μϯαʔ޲͚ͷϓϥοτϑΥʔϜܥSNSΞϓϦ ▸ ͪ͜ΒͰνϣΠεͨ͠གྷΓ΍͍͢ۂͰགྷͬͯಈըΛΞοϓ react-native + firebase + TypeScriptͰ μϯεͷΦϯϥΠϯϨοεϯΞϓϦΛ։ൃத શ෦JavaScriptͱ͔TypeScriptʹد͍ͤͯ͜͏͔ͱ
  6. JAVASCRIPT੡NPMύοέʔδΛTYPESCRIPTͰॻ͖௚ͨ͠࿩ JavaScript -> TypeScriptʹมߋͨ͠ύοέʔδ

  7. JAVASCRIPT -> TYPESCRIPTʹมߋͨ͠ύοέʔδ(1) react-native-simple-twitter https://github.com/watanabeyu/react-native-simple-twitter TwitterAPIΛreact-native linkෆཁͰѻ͑ΔϥΠϒϥϦ

  8. JAVASCRIPT -> TYPESCRIPTʹมߋͨ͠ύοέʔδ(2) react-native-store-version https://github.com/watanabeyu/react-native-store-version ετΞʹެ։͞ΕͯΔόʔδϣϯͱ Πϯετʔϧ͞ΕͯΔΞϓϦͷόʔδϣϯΛൺֱͯ͘͠ΕΔϥΠϒϥϦ

  9. JAVASCRIPT੡NPMύοέʔδΛTYPESCRIPTͰॻ͖௚ͨ͠࿩ JavaScript -> TypeScriptʹมߋͨ͠ॴײ

  10. JAVASCRIPT -> TYPESCRIPTʹมߋͨ͠ॴײ(1) ▸ ιʔείʔυΛTypeScriptʹมߋ ▸ jsxهड़͞ΕͯΔ.js -> .tsx ▸

    jsxهड़͞Ε͍ͯͳ͍.js -> .ts ▸ ܕΛॻ͍͍ͯ͘ ܕͲ͏͠Α͏ͱ͔೰ΜͩΒany࢖ͬͪΌͬͯ΋Α͍
  11. JAVASCRIPT -> TYPESCRIPTʹมߋͨ͠ॴײ(2) ▸ TypeScript༻ͷlintಋೖ ▸ eslint͕TypeScriptରԠͨ͠ͷͰ@typescript-eslintΛಋೖ ▸ .eslintrc.jsͱ.vscode/settings.jsonΛมߋ eslint͕TypeScriptରԠͨ͠ͷͰಋೖ͕؆୯

  12. JAVASCRIPT -> TYPESCRIPTʹมߋͨ͠ॴײ(3) ▸ tsconfig.jsonͷઃఆ ▸ tsc —initͰtsconfig.jsonΛ࡞੒ ▸ ΦϓγϣϯΛࡉʑઃఆ

    ▸ .eslintignoreͱ.gitignoreʹdist/Λ௥Ճ ▸ .npmignoreʹsrcͱtsconfig.jsonΛ௥Ճ ▸ package.jsonͷtypesͱscriptsʹbuildίϚϯυΛ௥Ճ ▸ .circleci/config.ymlʹdeploy͢Δલʹbuild͢ΔίϚϯυΛ௥Ճ npmͱͯ͠ެ։͢Δ৔߹ͱ௨ৗͷΞϓϦ੍࡞ͩͱ tsconfigʹઃఆ͢ΔΦϓγϣϯ͕ҧ͏ؾ͕ͨ͠
  13. JAVASCRIPT੡NPMύοέʔδΛTYPESCRIPTͰॻ͖௚ͨ͠࿩ ܕఆٛϑΝΠϧ(d.ts)ʹ͍ͭͯ

  14. ܕఆٛϑΝΠϧ(D.TS)ʹ͍ͭͯ(1) ▸ ͜ͷύοέʔδʹͲ͏͍͏ܕͷؔ਺͕͋Δ͔Λڭ͑ͯ͘ΕΔ ▸ TypeScriptԽ͸͜Ε͕ϝΠϯͱ͍ͬͯ΋աݴͰ͸ͳ͍ Ͳ͏΍ͬͯ࡞Δͷ͔ʁ

  15. ܕఆٛϑΝΠϧ(D.TS)ʹ͍ͭͯ(2) ▸ tsconfig.jsonʹdeclaration:trueΛઃఆ ▸ ͦͷϑΝΠϧ಺Ͱఆٛ͞Ε͍ͯΔܕΛd.tsʹ੔ܗ A.TS B.TS C.TS INDEX.D.TS A.TS

    B.TS C.TS A.D.TS B.D.TS C.D.TS 1ͭʹ·ͱΊͯ͘Εͳ͍
  16. ܕఆٛϑΝΠϧ(D.TS)ʹ͍ͭͯ(3) ▸ index.d.tsΛࣗલͰ࡞੒ͯ͠package.jsonͷtypesʹࢦఆ ▸ ࣗ෼Ͱ1ͭͷϑΝΠϧʹ·ͱΊͳ͍ͱ͍͚ͳ͍ ▸ ఆٛ࿙Εͱ͔ʹͳͬͯ͠·͏ͱ࢖͏Ϣʔβͱͯ͠͸ࠔΔ ୯७ͳখن໛ͳϥΠϒϥϦͰ͋Ε͹؆୯ ෳ਺ϑΝΠϧ͋ΔΑ͏ͳෳࡶͳϥΠϒϥϦͩͱඇݱ࣮త tsconfig.jsonʹdeclaration:trueΛઃఆͯ͠

    ֤tsϑΝΠϧ಺ͰܕΛఆٛͯ͠ɺ ෳ਺d.ts͕ੜ੒͞ΕΔΑ͏ͳܗ͕ࠓͷͱ͜Ζਖ਼ղʁ
  17. ·ͱΊ ▸ npmύοέʔδͷTypeScriptԽ͸ҙ֎ͱ؆୯ ▸ ܕఆٛϑΝΠϧΛࣗಈͰ1ͭʹ·ͱΊΔ͜ͱ͸Ͱ͖ͳ͍ ▸ खಈͰ1ͭͷϑΝΠϧʹ·ͱΊΒΕΔͷ͸খن໛ͳύοέʔδͷΈ ▸ ෳ਺d.tsϑΝΠϧ͕ੜ੒͞ΕΔܗ͕ݱঢ়ͷਖ਼ղ ▸

    ͏·͘1ͭʹ·ͱΊΔΑ͏ͳπʔϧΛ࡞ͬͯ͠·͑͹Α͍͕…
  18. ͓ΘΓ