is there to use types in different screens

Source: Dev.to

Problem

You have a large TypeScript type defined in toto.tsx and need to reuse it in other screens (e.g., titi.tsx). Copy‑pasting the type makes maintenance difficult because any change must be replicated everywhere.

Solution

Extract the type into its own module and import it wherever it’s needed. A plain TypeScript file (.ts) is sufficient because it only contains type definitions—no JSX.

Steps

1. Create a dedicated file for shared types

   src/types/
   └── stationTypes.ts

2. Move the type definition into that file

   // src/types/stationTypes.ts
   export type STA = {
       response: number;
       id: number;
       method: string;
       next: string | null;
       fields: {
           id_field: number;
           field_name: string;
           field_longname: string;
           field_city: string;
           field_lat: number;
           field_lng: number;
       }[];
       stations: {
           id_field: number;
           field_name: string;
           id_station: number;
           station_longname: string;
           station_type_awe: string;
           id_station_type: number;
           station_type_name: string;
           station_archive: number;
           lat: number;
           lng: number;
           alt: number;
           measures: {
               datasets: {
                   data: {
                       value: number;
                       label: string;
                       date: string;
                       dataPointText: number;
                   }[];
                   label: string;
                   showLine: boolean;
                   borderColor: string;
                   backgroundColor: string;
                   pointStyle: string;
                   fill: boolean;
                   borderWidth: number;
                   pointRadius: number;
                   type: string;
               };
               labels: {}[];
               unit: string;
               chartContainer: string;
               id_sensor_type: number;
               id_sensor: number;
               sensor_type: string;
               sensor_type_longname: string;
               sensor_type_awe: string;
           }[];
           measures_found: number;
           station_found: number;
           latest_measure: string;
       }[];
       map_center: {
           lat: number;
           lng: number;
       };
   };

3. Import the type in any screen that needs it

   // src/screens/toto.tsx
   import { STA } from '../types/stationTypes';
   
   const MyComponent = () => {
       const data: STA = /* ... */;
       // component logic
   };

   // src/screens/titi.tsx
   import { STA } from '../types/stationTypes';
   
   // use STA the same way as in toto.tsx

Why a .ts file?

• The file only contains type definitions, no JSX, so .ts is appropriate.
• Keeping types separate from UI code improves readability and reusability.

Benefits

• Single source of truth – modify the type in one place.
• Type safety – all screens get the exact same definition.
• Cleaner project structure – shared types live in a dedicated folder.