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

What I worked on when migrating from flow-typed to TypeScript in a react-native app.

What I worked on when migrating from flow-typed to TypeScript in a react-native app.

9b70cb91fa334ab6a8bf8712b40a772f?s=128

Shinnosuke Yamamoto

November 10, 2021
Tweet

Transcript

  1. react-nativeͷΞϓϦͰ fl ow-typed͔ΒTypeScriptʹ Ҡߦ͢ΔࡍʹऔΓ૊Μͩ͜ͱ mrtry 2021/11/10

  2. ࣗݾ঺հ • ͱΒ͍(@mrtry) • Yamamoto Shinnosuke • גࣜձࣾJMDC (tech lead)

  3. None
  4. react-nativeͱ͸ • ReactͰ͍ΖΜͳPlatformͷΞϓϦέʔγϣϯ͕ͭ͘ΕΔ͘Μ • ͍͍ͩͨwebͱಉ͡ςϯγϣϯͰϞόΠϧΞϓϦͷ࣮૷͕Ͱ͖Δ

  5. Hello, world

  6. Ϧιʔε଍Γͳ͍͚ͲϞόΠϧΞϓϦ΄͍͠ʂ • WebϑΝʔετͰαʔϏεϦϦʔεͨ͠ • ۀ຿ҕୗͷਓ(1໊)ʹ͓ئ͍͠ɺΞϓϦΛޙ௥͍Ͱग़ͨ͠

  7. Ϧιʔε଍Γͳ͍͚ͲϞόΠϧΞϓϦ΄͍͠ʂ • ձࣾʮΞϓϦͷPV૿͖͔͑ͯͨΒɺ։ൃνʔϜ࡞ͬͯ಺੡͍ͨ͠ʯ • ࢲʮԶ͕Ұਓ໨ʹͳΔʂʂʂʂʂʂ̍̍̍̍ʯ

  8. None
  9. fl ow-typed 
 + JavaScript ౰࣌ɺTS࠾༻͸গͳΊͩͬͨ

  10. ͭΒ͍

  11. ϥΠϒϥϦʹ fl ow-typedͷܕ͍ͭͯͳ͍

  12. อक͕೉͍͠ • ϥΠϒϥϦಋೖͨ࣌͠ʹյΕ͕ͪ & ຐվ଄͕ͪ͠ • react-nativeͷΞοϓσʔτͰઃఆյΕ͕ͪ • ͪΌΜͱߋ৽ͯ͠ͳ͍ͱES6ͱ͔࢖͑ͳ͍

  13. fl ow-typedΛTypeScriptʹ͢Δઓ͍͕࢝·ͬͨ

  14. Ҡߦͷखॱ

  15. Ҡߦͷखॱ 1. σΟϨΫτϦઓུΛݟ௚ͨ͠ 2. ConverterͰશίʔυΛTSԽͨ͠ 3. खಈͰίϯύΠϧΤϥʔΛ௵͍ͯ͘͠

  16. σΟϨΫτϦઓུΛݟ௚ͨ͠

  17. None
  18. ࡉ෼Խ͞Εͯͳ͍ 
 Component 😇 σΟϨΫτϦ௚ʹ͍ͬͺ͍ ࠶ར༻͋·Γ͞Εͯͳ͍ ap p !"" component

    s # !"" AnimatedProgressCircle.j s # !"" AnnounceItemView.j s # !"" BarChart.j s # !"" CaloriePieChartPanelView.j s # !"" CarouselView.j s # !"" Chart.j s # !"" ChartTabBar.j s # !"" ChartView.j s # !"" DailyRecordBloodGlucoseView.j s # !"" DailyRecordBloodPressureView.j s # !"" DailyRecordBodyFatPercentageView.j s # !"" DailyRecordBodyTemperatureView.j s # !"" DailyRecordHeartRateView.j s # !"" DailyRecordHistoryView.j s # !"" DailyRecordListItemView.j s # !"" DailyRecordMealView.j s # !"" DailyRecordSleepView.j s # !"" DailyRecordWaistView.j s # !"" DailyRecordWeightView.j s # !"" DateInputTable.j s # !"" DateSpecificationBar.j s # !"" GoalWeightBar.j s # !"" HealthNewsItemView.j s # !"" InputButtonView.j s # !"" InputFooter.j s # !"" InputTable.j s # !"" KeyboardSpace.j s # !"" LineChart.j s # !"" LoginFormTable.j s # !"" MainTabBar.j s # !"" MealGridImageView.j s # !"" MealInputImageView.j s # !"" MealSectionHeader.j s # !"" MyDataTabBar.j s # !"" PepUpDatePicker.android.j s # !"" PepUpDatePicker.ios.j s # !"" PepUpDatePickerProps.j s # !"" PepUpSituationPicker.android.j s # !"" PepUpSituationPicker.ios.j s # !"" PickerInputTable.j s # !"" PieChartPanel.j s # !"" ProgressCircle.j s # !"" SleepBarChart.j s # !"" SortableListItem.j s # !"" StepPieChartPanelView.j s # !"" SummaryPanel.j s # !"" SummaryView.j s # !"" TextInputForTcomb.j s # %"" ValidateFormComponent.j s !"" container s # !"" DailyRecordChartSelectionScreen.j s # !"" DailyRecordDetailScreen.j s # !"" DailyRecordIconsView.j s # !"" DailyRecordInputScreen.j s # !"" DailyRecordMealDetailScreen.j s # !"" DailyRecordMealScreen.j s # !"" DailyRecordPreferenceScreen.j s # !"" GoalPreferenceScreen.j s # !"" HomeScreen.j s # !"" IndicatorView.j s # !"" InputStackNavigatorScreen.j s # !"" LicenseScreen.j s # !"" LoginIDConfigScreen.j s # !"" LoginScreen.j s # !"" MainTabNavigatorScreen.j s # !"" MealCamera.j s # !"" MealCameraRoll.j s # !"" MealEditScreen.j s # !"" MealInputScreen.j s # !"" MealPhotoTabNavigatorScreen.j s # !"" MedicineNotebookConfigScreen.j s # !"" MyDataDailyRecordScreen.j s # !"" MyDataMedicineHistoryScreen.j s # !"" MyDataMedicineNotebookScreen.j s # !"" MyDataTabNavigatorScreen.j s # !"" NotificationConfScreen.j s # !"" OtherMenusScreen.j s # !"" PasswordConfigScreen.j s # !"" PepUpRootNavigatorScreen.j s # !"" PepUpStackNavigatorScreen.j s # !"" PepUpWebView.j s # !"" ProfileCameraRoll.j s # !"" ProfileScreen.j s # !"" QrCameraScreen.j s # !"" SetupLocaleScreen.j s # !"" StartScreen.j s # !"" TermsOfUseView.j s # %"" TwoFactorAuthenticationScreen.js
  19. Fat Component 😇 render : 15L͙Β͍ ϩδοΫ: 400L͙Β͍

  20. σΟϨΫτϦઓུΛݟ௚ͨ͠ • 1σΟϨΫτϦ͋ͨΓͷϑΝΠϧ਺͕͑͛ͭͳ͍ • ֤छ࣮૷΋Fat Component 
 → TypeScriptԽͨ͠ͱ͖ʹɺࠩ෼ಡΉͷͭΒͦ͏ →

    ࠩ෼Λݟ΍͘͢͢ΔͨΊɺσΟϨΫτϦઓུΛݟ௚ͨ͠
  21. sr c !"" asset s !"" component s # !""

    legac y # !"" page s # %"" uipart s !"" domain s # !"" common s # !"" object s # %"" service s !"" locale s !"" routes %"" store s !"" action s !"" reducer s !"" statu s %"" storage s ap p !"" action s !"" asset s !"" component s !"" container s !"" cor e !"" locale s !"" model s !"" reducer s !"" saga s %"" storage #FGPSF"GUFS
  22. sr c !"" asset s !"" component s # !""

    legac y # !"" page s # %"" uipart s !"" domain s # !"" common s # !"" object s # %"" service s !"" locale s !"" routes %"" store s !"" action s !"" reducer s !"" statu s %"" storage s ap p !"" action s !"" asset s !"" component s !"" container s !"" cor e !"" locale s !"" model s !"" reducer s !"" saga s %"" storage #FGPSF"GUFS
  23. src/component s !"" page s # !"" Hom e #

    # !"" index.tsx //Page૬౰ # # !"" template.tsx //Template૬౰ # # !"" stories.ts x # # %"" uiparts //Organisms૬౰ # # !"" ArticleLis t # # !"" NotificationIco n # # !"" ImportantNotifications   # # %"" … # %"" … %"" uiparts // Atoms/Molecules૬౰ !"" Butto n !"" Tex t !"" … ࠷ۙͷσΟϨΫτϦߏ੒
  24. ͍ͭͰʹɺΑ͔ͬͨ͜ͱ🥳 • Fat Component͕ੜ·Εʹ͘͘ͳͬͨ • ద੾ͳେ͖͞ͷComponentͷج४͕Ͱ͖ͨ • UI Componentͷʮ࢖͍·Θ͠౓߹͍ʯ͕Θ͔Γ΍͘͢ͳͬͨ •

    ൚༻తͳ΋ͷ: uipartsҎԼ • ઐ༻తͳ΋ͷ: pages/uipartsҎԼ
  25. sr c !"" asset s !"" component s # !""

    legac y # !"" page s # %"" uipart s !"" domain s # !"" common s # !"" object s # %"" service s !"" locale s !"" routes %"" store s !"" action s !"" reducer s !"" statu s %"" storage s ap p !"" action s !"" asset s !"" component s !"" container s !"" cor e !"" locale s !"" model s !"" reducer s !"" saga s %"" storage #FGPSF"GUFS
  26. ࠩ෼௥͑ͦ͏ͳؾ͕͖ͯͨ͠

  27. ConverterͰશίʔυΛTSԽͨ͠

  28. ConverterͰશίʔυΛTSԽͨ͠ zxbodya/ fl owts Λ࢖ͬͯɺͻͱ·ͣશ෦ίʔυTSԽͨ͠

  29. खಈͰίϯύΠϧΤϥʔΛ௵ͯ͘͠

  30. खಈͰίϯύΠϧΤϥʔΛ௵ͯ͘͠ • ؾ߹ɺࠜੑɺ΍͍͖ͬͯ 💪 • null / unde fi ned

    ͷෆ੔߹͕͍ͬͺ͍Ͱͨ 🙏 • ͜ͷ࡞ۀ͚ͩͰɺͲΕ͚ͩTSͷ͋Γ͕ͨΈΛײ͔ͨ͡…🥺 • ίϯύΠϧΤϥʔղফʹ౒ΊɺϦϑΝΫλϦϯά͸͠ͳ͍ • όάͬͨ࣌ʹ໎ٶೖΓ͠΍͍͢ͷͰɺҰ୴͖͋ΒΊΔ
  31. ̍ϲ݄͙Β͍ઓͬͨ

  32. ແࣄ΍Γ͖ͬͨ

  33. Α͔ͬͨ͜ͱ🥳 • ϥΠϒϥϦͷίʔυʹܕ͕ͭ͘Α͏ʹͳͬͨ • react-nativeͷupdate͕͠΍͘͢ͳͬͨ • ͢΂ͯͷϑΝΠϧͰܕνΣοΫͰ͖ΔΑ͏ʹͳͬͨ • IDE͕ΊͬͪΌॿ͚ͯ͘ΕΔΑ͏ʹͳͬͨ

  34. None