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

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

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. ͓ΘΓ