Déclaration du type d'une variable

Version imprimable

25/04/2025, 22h49
pierrot10

3 pièce(s) jointe(s)

Déclaration du type d'une variable

Bonjour à tous,

J'ai un message d'erreur que je présente tout de suite
Pièce jointe 666847

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?.
Pièce jointe 666848
Je vous que id_station:number

Si je laisse ma souris sur id_station
Pièce jointe 666849
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?
27/04/2025, 12h00
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 ?

1 pièce(s) jointe(s)

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

Citation:

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'
Pièce jointe 667012
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:

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:

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?

30/04/2025, 20h18
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 ?

2 pièce(s) jointe(s)

Hello,

Citation:

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:

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

J'ai ce message d'erreur

Pièce jointe 667014
Pièce jointe 667015

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:

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)

2 pièce(s) jointe(s)

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

Voici un autre exemple

Si j'enlève le ? à data

Code:

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
Pièce jointe 667452
Pourquoi je vois le undefined ici
Pièce jointe 667453
Si je regade mon prop, il n'y a pas de variable indéfinie. Enfin, il n'y a pas de ?

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
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
        },
    })
}

20/05/2025, 18h38
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.