verbatim type syntax typescript

package.json

@@ -23,8 +23,8 @@
         "check:sarif": "eslint ./src --format @microsoft/eslint-formatter-sarif --output-file eslint-results.sarif"
     },
     "dependencies": {
-        "@babel/core": "7.25.2",
-        "@babel/preset-env": "7.23.3",
+        "@babel/core": "7.25.7",
+        "@babel/preset-env": "7.25.7",
         "@expo/vector-icons": "14.0.4",
         "@microsoft/eslint-formatter-sarif": "3.1.0",
         "@react-native-community/netinfo": "11.3.1",
@@ -34,8 +34,8 @@
         "@shopify/flash-list": "1.6.4",
         "@stylistic/eslint-plugin": "2.8.0",
         "@types/i18n-js": "3.8.8",
-        "@types/lodash": "4.14.201",
-        "@types/node": "16.18.11",
+        "@types/lodash": "4.17.10",
+        "@types/node": "20.16.10",
         "@types/react": "18.2.79",
         "@types/react-redux": "7.1.30",
         "@typescript-eslint/eslint-plugin": "6.11.0",

src/colors/colors.ts

@@ -1,4 +1,4 @@
-import {ColorNames, ColorSchemeName, ThemeProps} from "./types"
+import type {ColorNames, ColorSchemeName, ThemeProps} from "./types"
 
 type Colors = Record<ColorSchemeName, Record<ColorNames, string>>
 

src/colors/types.ts

@@ -1,4 +1,4 @@
-import {ColorSchemeName as SchemeName} from "react-native"
+import {type ColorSchemeName as SchemeName} from "react-native"
 
 export type ColorNames =
   | "text"

src/colors/useColorScheme.ts

@@ -1,6 +1,6 @@
 import {useColorScheme as _useColorScheme} from "react-native"
 
-import {ColorSchemeName} from "./types"
+import type {ColorSchemeName} from "./types"
 
 export function useColorScheme(): ColorSchemeName {
     return _useColorScheme() || "dark"

src/colors/useThemeColor.ts

@@ -1,7 +1,7 @@
 import {get} from "lodash"
 
 import {schemes} from "./colors"
-import {ThemeProps, ColorNames} from "./types"
+import type {ThemeProps, ColorNames} from "./types"
 import {useColorScheme} from "./useColorScheme"
 
 export function useThemeColor(colorName: ColorNames, props?: ThemeProps): string {

src/components/ActionSheet/Container.tsx

@@ -1,7 +1,7 @@
 import {memo, type PropsWithChildren, useEffect, useMemo, useState} from "react"
-import {Animated, StyleSheet, ViewStyle} from "react-native"
+import {Animated, StyleSheet, type ViewStyle} from "react-native"
 
-import {ThemeProps} from "../../colors/types"
+import type {ThemeProps} from "../../colors/types"
 import {useThemeColor} from "../../colors/useThemeColor"
 import {layout} from "../../constants/layout"
 import {useKeyboard} from "../../hooks/useKeyboard"

src/components/ActionSheet/Title.tsx

@@ -1,9 +1,9 @@
 import {Fragment, type ReactElement} from "react"
-import {StyleSheet, TextStyle, TouchableOpacity} from "react-native"
+import {StyleSheet, type TextStyle, TouchableOpacity} from "react-native"
 
 import MaterialIcons from "@expo/vector-icons/MaterialIcons"
 
-import {ThemeProps} from "../../colors/types"
+import type {ThemeProps} from "../../colors/types"
 import {useThemeColor} from "../../colors/useThemeColor"
 import {layout} from "../../constants/layout"
 import {Divider} from "../Divider"

src/components/ApproachCard.tsx

@@ -1,11 +1,11 @@
 import {memo} from "react"
-import {View, ViewStyle} from "react-native"
+import {View, type ViewStyle} from "react-native"
 
 import {layout} from "../constants/layout"
 import {createStaticStyles} from "../helpers/createStaticStyles"
 import {__date} from "../helpers/i18n"
 import {useAppSelector} from "../store"
-import {Approach} from "../store/approaches/types"
+import type {Approach} from "../store/approaches/types"
 
 import {Div} from "./Div"
 import {Span} from "./Span"

src/components/Button.tsx

@@ -1,5 +1,5 @@
 import {memo, type PropsWithChildren, useCallback, useMemo} from "react"
-import {Pressable, PressableProps, ViewStyle, StyleProp} from "react-native"
+import {Pressable, type PressableProps, type ViewStyle, type StyleProp} from "react-native"
 
 import {useThemeColor} from "../colors/useThemeColor"
 import {buttons} from "../constants/defaultStyles"

src/components/Card.tsx

@@ -1,7 +1,7 @@
-import {memo, PropsWithChildren} from "react"
-import {ViewStyle} from "react-native"
+import {memo, type PropsWithChildren} from "react"
+import {type ViewStyle} from "react-native"
 
-import {ColorNames} from "../colors/types"
+import {type ColorNames} from "../colors/types"
 import {layout} from "../constants/layout"
 import {createStaticStyles} from "../helpers/createStaticStyles"
 

src/components/Div.tsx

@@ -1,7 +1,7 @@
-import {ElementType, memo, ReactNode, useMemo} from "react"
-import {View, TouchableOpacity, ViewStyle} from "react-native"
+import {type ElementType, memo, type ReactNode, useMemo} from "react"
+import {View, TouchableOpacity, type ViewStyle} from "react-native"
 
-import {ColorNames, ThemeProps} from "../colors/types"
+import type {ColorNames, ThemeProps} from "../colors/types"
 import {useThemeColor} from "../colors/useThemeColor"
 
 export const Div = memo(function Div(props: {

src/components/Divider.tsx

@@ -1,15 +1,13 @@
 import {memo, useMemo} from "react"
-import {StyleSheet, View, ViewStyle} from "react-native"
+import {StyleSheet, View} from "react-native"
 
 import {useThemeColor} from "../colors/useThemeColor"
 
-const divider: ViewStyle = {
-    height: 1,
-    width: "100%",
-}
-
 const staticStyles = StyleSheet.create({
-    divider,
+    divider: {
+        height: 1,
+        width: "100%",
+    },
 })
 
 export const Divider = memo(function Divider({color}: {

src/components/Header.tsx

@@ -1,14 +1,14 @@
-import {memo, ReactElement, useCallback, useMemo} from "react"
+import {memo, type ReactElement, useCallback, useMemo} from "react"
 import {
-    View, Text, StyleSheet, Platform, ViewStyle, TextStyle, TouchableOpacity, Insets,
+    View, Text, StyleSheet, Platform, TouchableOpacity, type Insets,
 } from "react-native"
 
 import MaterialIcons from "@expo/vector-icons/MaterialIcons"
 import {useNavigation} from "@react-navigation/native"
 
 import {useThemeColor} from "../colors/useThemeColor"
 import {layout} from "../constants/layout"
-import {HomeStackNavigationProp} from "../navigation/types"
+import type {HomeStackNavigationProp} from "../navigation/types"
 
 export type IconNames =
   | "arrow-back-ios"
@@ -24,38 +24,30 @@ export type HeaderIconProps = {
 const iconSize = 24
 const headerHeight = 36
 
-const container: ViewStyle = {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    height: headerHeight,
-    maxHeight: headerHeight,
-}
-
-const title: TextStyle = {
-    fontSize: Platform.select({ios: 16, default: 14}),
-}
-
-const titleWrapper: ViewStyle = {
-    flex: 1,
-    marginHorizontal: layout.gap,
-    alignItems: Platform.select({
-        ios: "center",
-        default: "flex-start",
-    }),
-}
-
-const sideComponent: ViewStyle = {
-    width: iconSize + 2,
-    height: iconSize + 2,
-    marginHorizontal: layout.gap,
-}
-
 const staticStyles = StyleSheet.create({
-    container,
-    sideComponent,
-    title,
-    titleWrapper,
+    container: {
+        alignItems: "center",
+        flexDirection: "row",
+        height: headerHeight,
+        justifyContent: "space-between",
+        maxHeight: headerHeight,
+    },
+    sideComponent: {
+        height: iconSize + 2,
+        marginHorizontal: layout.gap,
+        width: iconSize + 2,
+    },
+    title: {
+        fontSize: Platform.select({ios: 16, default: 14}),
+    },
+    titleWrapper: {
+        alignItems: Platform.select({
+            ios: "center",
+            default: "flex-start",
+        }),
+        flex: 1,
+        marginHorizontal: layout.gap,
+    },
 })
 
 const backIcon = Platform.select<IconNames>({ios: "arrow-back-ios", default: "arrow-back"})

src/components/Loader.tsx

@@ -1,17 +1,17 @@
-import {memo, useMemo, type ReactElement} from "react"
-import {StyleSheet, View, ActivityIndicator, ViewStyle} from "react-native"
+import {memo, type ReactElement, useMemo} from "react"
+import {ActivityIndicator, StyleSheet, View} from "react-native"
 
 import {useThemeColor} from "../colors/useThemeColor"
 
-const container: ViewStyle = {
-    flex: 1,
-    alignSelf: "center",
-    justifyContent: "center",
-    alignItems: "center",
-    padding: 2,
-}
-
-const staticStyles = StyleSheet.create({container})
+const staticStyles = StyleSheet.create({
+    container: {
+        alignItems: "center",
+        alignSelf: "center",
+        flex: 1,
+        justifyContent: "center",
+        padding: 2,
+    },
+})
 
 export const Loader = memo(function Loader(): ReactElement {
     const backgroundColor = useThemeColor("loaderBackground")
@@ -25,7 +25,7 @@ export const Loader = memo(function Loader(): ReactElement {
         <View style={styles}>
             <ActivityIndicator
                 color={loaderColor}
-                size="large" />
+                size="large"/>
         </View>
     )
 })

src/components/Modal.tsx

@@ -1,4 +1,4 @@
-import {memo, ReactNode} from "react"
+import {memo, type PropsWithChildren} from "react"
 
 import RNModal from "react-native-modal"
 
@@ -12,11 +12,10 @@ const staticStyles = createStaticStyles({
     },
 })
 
-export const Modal = memo(function Modal(props: {
-    children: ReactNode
+export const Modal = memo(function Modal(props: PropsWithChildren<{
     visible: boolean
     closeModal: () => void
-}) {
+}>) {
     return (
         <RNModal
             avoidKeyboard

src/components/OverlayLoader.tsx

@@ -1,20 +1,22 @@
-import {memo, useMemo, type ReactElement} from "react"
-import {StyleSheet, View, ActivityIndicator, ViewStyle} from "react-native"
+import {memo, type ReactElement, useMemo} from "react"
+import {ActivityIndicator, StyleSheet, View} from "react-native"
 
 import {useThemeColor} from "../colors/useThemeColor"
 
-const container: ViewStyle = {
-    flex: 1,
-    justifyContent: "center",
-    alignItems: "center",
-    position: "absolute",
-    zIndex: 10,
-    width: "100%",
-    height: "100%",
-    backgroundColor: "rgba(20, 20, 20, 0.8)",
-}
+const bg = "rgba(20, 20, 20, 0.8)"
 
-const staticStyles = StyleSheet.create({container})
+const staticStyles = StyleSheet.create({
+    container: {
+        alignItems: "center",
+        backgroundColor: bg,
+        flex: 1,
+        height: "100%",
+        justifyContent: "center",
+        position: "absolute",
+        width: "100%",
+        zIndex: 10,
+    },
+})
 
 export const OverlayLoader = memo(function OverlayLoader(): ReactElement {
     const color = useThemeColor("text")
@@ -28,7 +30,7 @@ export const OverlayLoader = memo(function OverlayLoader(): ReactElement {
         <View style={styles}>
             <ActivityIndicator
                 color={color}
-                size="large" />
+                size="large"/>
         </View>
     )
 })

src/components/PageTitle.tsx

@@ -1,5 +1,4 @@
 import type {ReactElement} from "react"
-import {TextStyle, ViewStyle} from "react-native"
 
 import {layout} from "../constants/layout"
 import {createStaticStyles} from "../helpers/createStaticStyles"
@@ -8,22 +7,18 @@ import {Div} from "./Div"
 import SkillImage from "./SkillImage"
 import {Span} from "./Span"
 
-const container: ViewStyle = {
-    height: 42,
-    justifyContent: "center",
-    alignItems: "center",
-    borderRadius: layout.gap / 2,
-    overflow: "hidden",
-    flexDirection: "row",
-}
-
-const text: TextStyle = {
-    fontSize: 15,
-}
-
 const styles = createStaticStyles({
-    container,
-    text,
+    container: {
+        height: 42,
+        justifyContent: "center",
+        alignItems: "center",
+        borderRadius: layout.gap / 2,
+        overflow: "hidden",
+        flexDirection: "row",
+    },
+    text: {
+        fontSize: 15,
+    },
 })
 
 export function PageTitle({title, icon}: {

src/components/Row.tsx

@@ -1,24 +1,24 @@
-import {memo, type PropsWithChildren} from "react"
-import {View, ViewStyle} from "react-native"
+import {memo, type ReactNode} from "react"
+import {View} from "react-native"
 
 import {layout} from "../constants/layout"
 import {createStaticStyles} from "../helpers/createStaticStyles"
 
-const row: ViewStyle = {
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "center",
-    marginBottom: layout.gap * 1.6,
-}
-
 const staticStyles = createStaticStyles({
-    row,
+    row: {
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+        marginBottom: layout.gap * 1.6,
+    },
 })
 
-export const Row = memo(function Row({children}: PropsWithChildren) {
+export const Row = memo(function Row(props: {
+    children: ReactNode
+}) {
     return (
         <View style={staticStyles.row}>
-            {children}
+            {props.children}
         </View>
     )
 })