Discussion :

[pierrot10]

Bonjour à tous,

J'ai un message d'erreur que je présente tout de suite


Je ne comprends pas pourquoi "Type 'number | undefined' is not assignable to type 'number'" alors que station?.id_station est défini comme un number

Si je laisse ma souris sur station?.

Je vous que id_station:number

Si je laisse ma souris sur id_station

Mais pourquoi là je lis number | undefined

Comment est-ce possible?

Si station?.id_station est "number | undefined", peut-on le forcer à être un "number" uniquement?

[mathieu]

dans l'expression station?.id_station, le ? fait que si station contient undefined, alors la propriété ne sera pas lu (ce qui évite un message d'erreur à l'exécution) et toute l'expression retourne undefined.

donc la question à ce poser est de savoir est ce que station peut contenir undefined à ce moment là ? est ce que c'est un fonctionnement prévu dans votre code ?

[pierrot10]

Hello
Merci beaucoup pour ta réponse et désolé pour ma réaction tardive.

donc la question à ce poser est de savoir est ce que station peut contenir undefined à ce moment là ?

Non, elle est toujours définie et obligatoire et c'est toujours un nombre.

Je ne suis pas expert avec typoscript et je vois alors qu'il y a un autre problème si j'enéève le ? comme par exemple ici

<ReloadPage stationId={station.id_station} style={styles.reload} onChange={setSortKey } />
Dans ce cas, mon erreur se déplace à 'station'

Ce que je comprends pas c'est que dans l'image ci-dessus, id_station est bien défini comme un number, non?

Je suppose donc que l'erreur doit venir d'ici

Code typescript :

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

1
2
3
4
5
 
  const {data: getstation, isFetching} = useFetchQuery("/getstation/[id]", {id: params.id})
 
  const measures = getstation?.stations?.[0].measures
  const station = getstation?.stations?.[0]

Code typescript :

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
 
'/getstation/[id]': {
        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,
            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,
        },
    }

On voit bien que 'id_station: number', est un number. A quel moment il est confu avec undefined?
Est-ce que tu a sbesoin de plus de code?

[mathieu]

c'est la même chose avec station, cette variable peut être indéfinie à cause des points d’interrogation dans const station = getstation?.stations?.[0].
donc même question, est ce que getstation ou stations peuvent être indéfinis ?

[pierrot10]

Hello,

c'est la même chose avec station, cette variable peut être indéfinie à cause des points d’interrogation dans const station = getstation?.stations?.[0].

Ben j'ai aussi pensé à ça

Petit question bête avant. Est-ce que indéfini veut dire aussi empty ou null?

Toutes mes variables sont définies. C'est à dire qu'elles sont soit string ou soit number. Dans certain cas, elle peut être empty, soit null. Mais on est vraiment sur 1 ou 2 cas.

'measures' peut être null ou empty, dans le cas ou l'on recherche des mesures qui ne sont pas dans le scope d'une date from et to.

En d'autres mot, non, aucune variable est indéfinie.

Si maintenant, je supprime le ?

Code typescript :

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

1
2
const measures = getstation.stations.[0].measures
  const station = getstation.stations.[0]

J'ai ce message d'erreur




Je ne comprends pas pourquoi dans la deuxième image, on voir indefined et je pense que l'erreur doit venir ici, non?
Ai-je mal préparé mon truc?

Code typescript :

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
 
import { QueryClient, useInfiniteQuery, useQuery } from '@tanstack/react-query'
//import type { Colors } from "@/constants/colors";
 
const endpoint = "https://a.cccccc.ch/projet"
 
type API = {  
  '/getstation/[id]/[from]/[to]': {
        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,
            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,
        },
    }
}

(J'espère avoir mis suffisemment de code)

[pierrot10]

Hello
Je suis toujours bloqué avec ça. Enfin, je cherche à comprendre

Voici un autre exemple

Si j'enlève le ? à data

Code typescript :

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
 
const {data, isFetching} = useFetchQuery("/getstation/0/[id]", {id: parseInt(params.id)})
 
[...]
 
const markers:Markers[] = []
  data?.stations.map((s) => {
    markers.push({
      id_station: s.id_station,
      id_station_type: s.id_station_type,
      latitude : s.lat, 
      longitude : s.lng, 
      latitudeDelta : 0.1, 
      longitudeDelta: 0.1, 
      name: s.station_longname
    })
  })

J'ai ce message

Pourquoi je vois le undefined ici

Si je regade mon prop, il n'y a pas de variable indéfinie. Enfin, il n'y a pas de ?

Code typescript :

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
 
type API = {
    // get field(s) with all stations according to the field(s)
    '/getstation/0/[id]': {
        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,
        }
    }
}
 
export function useFetchQuery<T extends keyof API>(path: T, params?: Record<string, string | number>){
    // const localurl = endpoint + path
    const localurl = endpoint + Object.entries(params ?? {}).reduce((acc, [key, value]) => acc.replaceAll(`[${key}]`, value.toString()) as T, path)
 
    return useQuery({
        queryKey: [localurl],
        //refetchIntervalInBackground: true,  
        //refetchInterval: 60000, // 60 000 ms = 60 secondes
        //refetchOnWindowFocus: false,
        //staleTime:60000,
        queryFn: async () => { // Comment on reécupère les résultat
            //await wait(2);
            return fetch(localurl,{
                headers:{
                    Accept: 'application/json',
                }
            }).then((r) => r.json() as Promise<API[T]>); // Convertir le résultat (r) en json
        },
    })
}

[mathieu]

c'est peut-être parce que la récupération des données se fait avec une requête http. donc au 1er chargement de la page, le rendu des balises html se fait avec une variable vide.
essayez de rajouter ce cas au moment de la génération du code html.