Déclarer le type pour exploitér des données récupérées

2 pièce(s) jointe(s)

Bonjour à tous et bonne année!

Je suis débutant dans ce language.
J'apprends à développer une application smartphone avec React Native et l'écriure se fait avec TypeScript.

Je galère est exploiter des données récupérées d'une base de donnée dans une array. Alors je vais essayé d'être le plus clair possible,

Je récupère les données ainsi, grace à une API que voici. La saisie qui me concerne est 'map_center'
(Dans ma DB, la latitude et la longitue sont de float)

Code:

const {data, isFetching} = useFetchQuery("/getstation")

J'ai également un fichier /app/hook/useFetchQuery.ts dont voici la partie qui fait le sujet de ma question

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
 
type API = {
    '/getstation' : {
        response: number, 
        id: number,
        method: string,
        next: string | null,
        stations: {
            id_station: number,
            station_longname: string,
            id_station_type: number,
            station_type_name: string,
            station_archive: number,
            id_field: string,
            lat: string,
            lng: string,
            alt: number,
            measures: {
                datasets: {
                    data:{}[],
                    label:string,
                    showLine:number,
 
                },
                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,
        }[],
        map_center: {
            lat: number,
            lng: number,
        },
    }
}

On voit que je déclare lat et lng comme number.

Dans mon fichier principal, j'ai cet exemple

Code:

1
2
3
4
5
6
  const INITIAL_REGION = {
    latitude: 37.33,
    longitude: -122,
    latitudeDelta: 1,
    longitudeDelta: 1
  };

et ce que j'essaie de faire est de remplacer 37.33 par ma valeur lat et -122 par ma valuer lng

donc j'ai fait comme ceci

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
  const {data, isFetching} = useFetchQuery("/getstation")
 
  //const lat:number = 0
  const lat = data?.map_center?.lat
  const lng = data?.map_center?.lng
  //stations?.map_center?.[1]
 
  const init_region = {
    latitude : lat,
    longitude: lng,
    latitudeDelta: 1,
    longitudeDelta: 1,
  };
 
  console.log(init_region)
 
 
  const INITIAL_REGION = {
    latitude: 37.33,
    longitude: -122,
    latitudeDelta: 1,
    longitudeDelta: 1
  };

le console-log m'affiche ceci

Citation:

(NOBRIDGE) LOG {"latitude": 46.19409284823712, "latitudeDelta": 1, "longitude": 6.006494493536169, "longitudeDelta": 1}

Donc jusqu'ici, ca semble etre bon.

Mon problème est que lorsque je veux utiliser ces valeurs dans ma Map, j'ai un message d'erreur qui me fait comprendre que ems types sont mal déclarer 8O

Si maintenant, dans les paramètres de ma carte ....

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
          <MapView
            style={StyleSheet.absoluteFillObject}
            zoomEnabled= {true}
            zoomTapEnabled= {true}
            zoomControlEnabled= {true}
            provider={undefined}
            initialRegion={INITIAL_REGION}
            showsUserLocation
            showsMyLocationButton
            onRegionChangeComplete={onRegionChange}
          >
            <UrlTile
              urlTemplate="http://c.tile.openstreetmap.org/{z}/{x}/{y}.png"
            />
 
            {markers?.map((marker, index) => (
              <Marker
                key={index}
                title={marker.name}
                coordinate={marker}
                onPress={() => onMarkerSelected(marker)}
              >
                <Callout onPress={calloutPressed}>
                  <View style={{ padding: 10 }}>
                    <Text style={{ fontSize: 24 }}>Hello</Text>
                  </View>
                </Callout>
              </Marker>
            ))}
          </MapView>

Pièce jointe 663276

.... je remplace INITIAL_REGION par init_region VScode me donne une erreur et si je laisse ma souris sur init_regions, je n'ai pas les mêmes informations
Pièce jointe 663277

Je ne comprends pas pourquoi j'ai number |undefined?

INITIAL_REGION et init_regions semble identique, non?
Est-ce que j'aurai mal déclarer

Code:

1
2
 
init_region={}

ou

Code:

1
2
3
4
5
 
map_center?:{
            lat: number,
            lng: number,
},

ou

Code:

1
2
 const lat = data?.map_center?.lat
  const lng = data?.map_center?.lng

ou est-ce je récupère mal mes valeurs (float -> number)? Un float n'est pas un number?

J'espère que vous avez pu suivre ma problématique qui me semble etre plus du typage, n0n?

Merci pour vos lumières

Je pense que le problème vient vraiment des données extraites

Il ne doit pas considérer les valuer de ceci comme des nombres
Code:

1 2 data?.map_center?.lat data?.map_center?.lng
J'ai l'impression qu'il ne sait pas si ceci est un nombre ou un undefined

J'ai trouvé. Ceci semble résoudre le problème

Code:

1
2
3
 
  const lat = data?.map_center.lat as number
  const lng = data?.map_center.lng as number