Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

▸ ࣗݾ঺հ ▸ JavaScript -> TypeScriptʹมߋͨ͠ύοέʔδ ▸ JavaScript -> TypeScriptʹมߋͨ͠ॴײ ▸ ܕఆٛϑΝΠϧ(d.ts)ʹ͍ͭͯ ▸ ·ͱΊ ֓ཁ

Slide 3

Slide 3 text

ࣗݾ঺հ(1) Θͨͳ΂Ώ͏ ▸ ॴଐ ▸ גࣜձࣾg&h ▸ Web / ΞϓϦΛझຯͰެ։ ▸ ࢓ࣄ಺༰ ▸ αʔό / ϑϩϯτ / ΞϓϦ / Web ▸ ΞΧ΢ϯτ ▸ Twitter : @hmktsu ▸ Github : @watanabeyu

Slide 4

Slide 4 text

ࣗݾ঺հ(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

Slide 5

Slide 5 text

ࣗݾ঺հ(3) ▸ https://www.gandh.jp ▸ 3໊(ΤϯδχΞ͸ࣗ෼Ұਓ)Ͱฏۉ೥ྸ30൒͹ͷγχΞձࣾ ▸ ετϦʔτΧϧνϟʔ × ITͳαʔϏεΛӡӦ ▸ ݱࡏͷϝΠϯࣄۀɿhttps://www.weddyweddy.net ▸ μϯαʔ޲͚ͷϓϥοτϑΥʔϜܥSNSΞϓϦ ▸ ͪ͜ΒͰνϣΠεͨ͠གྷΓ΍͍͢ۂͰགྷͬͯಈըΛΞοϓ react-native + firebase + TypeScriptͰ μϯεͷΦϯϥΠϯϨοεϯΞϓϦΛ։ൃத શ෦JavaScriptͱ͔TypeScriptʹد͍ͤͯ͜͏͔ͱ

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

JAVASCRIPT -> TYPESCRIPTʹมߋͨ͠ॴײ(1) ▸ ιʔείʔυΛTypeScriptʹมߋ ▸ jsxهड़͞ΕͯΔ.js -> .tsx ▸ jsxهड़͞Ε͍ͯͳ͍.js -> .ts ▸ ܕΛॻ͍͍ͯ͘ ܕͲ͏͠Α͏ͱ͔೰ΜͩΒany࢖ͬͪΌͬͯ΋Α͍

Slide 11

Slide 11 text

JAVASCRIPT -> TYPESCRIPTʹมߋͨ͠ॴײ(2) ▸ TypeScript༻ͷlintಋೖ ▸ eslint͕TypeScriptରԠͨ͠ͷͰ@typescript-eslintΛಋೖ ▸ .eslintrc.jsͱ.vscode/settings.jsonΛมߋ eslint͕TypeScriptରԠͨ͠ͷͰಋೖ͕؆୯

Slide 12

Slide 12 text

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ʹઃఆ͢ΔΦϓγϣϯ͕ҧ͏ؾ͕ͨ͠

Slide 13

Slide 13 text

JAVASCRIPT੡NPMύοέʔδΛTYPESCRIPTͰॻ͖௚ͨ͠࿩ ܕఆٛϑΝΠϧ(d.ts)ʹ͍ͭͯ

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

ܕఆٛϑΝΠϧ(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ͭʹ·ͱΊͯ͘Εͳ͍

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

͓ΘΓ