Discussion :

[pierrot10]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

(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

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

.... 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


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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
init_region={}

ou

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

ou

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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