Forum du club des d�veloppeurs et IT Pro - TypeScript

Microsoft annonce la version stable de TypeScript 6.0

Alex — Thu, 12 Feb 2026 13:42:51 GMT

Microsoft annonce la version Beta de TypeScript 6.0 apportant des am�liorations aux fonctions sensibles au contexte ainsi que la prise en charge des importations de sous-chemins

Microsoft annonce la version Beta de TypeScript 6.0. Voici quelques-uns des points forts de cette version : moins de sensibilit� au contexte pour les fonctions sans this, importations de sous-chemins commen�ant par #/, combinaison de --moduleResolution bundler avec --module commonjs, le drapeau --stableTypeOrdering, l'option es2025 pour target et lib, entre autres. TypeScript 6.0 est une version unique en son genre, car son �quipe a l'intention d'en faire la derni�re version bas�e sur le code source JavaScript actuel. Comme annonc� en 2025, ils travaillent sur un nouveau code source pour le compilateur TypeScript et le service linguistique �crit en Go qui tire parti de la vitesse du code natif et du multithreading � m�moire partag�e.

TypeScript est un langage qui s'appuie sur JavaScript en ajoutant une syntaxe pour les types. L'�criture de types dans le code permet d'expliquer l'intention et de faire v�rifier le code par d'autres outils pour d�tecter les erreurs comme les fautes de frappe, les probl�mes avec null et undefined, et plus encore. Les types alimentent �galement les outils d'�dition de TypeScript, comme l'auto-compl�tion, la navigation dans le code et les refactorisations que vous pouvez voir dans des �diteurs tels que Visual Studio et VS Code. En fait, TypeScript et son �cosyst�me alimentent l'exp�rience JavaScript dans ces deux �diteurs �galement.

TypeScript 6.0 est une version unique en son genre, car son �quipe a l'intention d'en faire la derni�re version bas�e sur le code source JavaScript actuel. Comme annonc� en 2025, ils travaillent sur un nouveau code source pour le compilateur TypeScript et le service linguistique �crit en Go qui tire parti de la vitesse du code natif et du multithreading � m�moire partag�e. Cette nouvelle base de code constituera le fondement de TypeScript 7.0 et des versions ult�rieures. TypeScript 6.0 sera le pr�curseur imm�diat de cette version et, � bien des �gards, il servira de pont entre TypeScript 5.9 et 7.0. � ce titre, la plupart des changements apport�s � TypeScript 6.0 visent � faciliter l'alignement et la pr�paration � l'adoption de TypeScript 7.0.

Voici quelques-uns des points forts de cette version, avec des d�tails sur ce qui va changer dans la version 7.0 :

Moins de sensibilit� au contexte pour les fonctions sans this

Lorsque les param�tres n'ont pas de types explicites, TypeScript peut g�n�ralement les d�duire en fonction d'un type attendu, ou m�me � partir d'autres arguments dans le m�me appel de fonction.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
declare function callIt<T>(obj: {
    produce: (x: number) => T,
    consume: (y: T) => void,
}): void;
 
// Works, no issues.
callIt({
    produce: (x: number) => x * 2,
    consume: y => y.toFixed(),
});
 
// Works, no issues even though the order of the properties is flipped.
callIt({
    consume: y => y.toFixed(),
    produce: (x: number) => x * 2,
});

Ici, TypeScript peut d�duire le type de y dans la fonction consume en se basant sur le type T d�duit de la fonction produce, quel que soit l'ordre des propri�t�s. Mais qu'en est-il si ces fonctions ont �t� �crites en utilisant la syntaxe de m�thode plut�t que la syntaxe de fonction fl�ch�e ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
declare function callIt<T>(obj: {
    produce: (x: number) => T,
    consume: (y: T) => void,
}): void;
 
// Works fine, `x` is inferred to be a number.
callIt({
    produce(x: number) { return x * 2; },
    consume(y) { return y.toFixed(); },
});
 
callIt({
    consume(y) { return y.toFixed(); },
    //                  ~
    // error: 'y' is of type 'unknown'.
 
    produce(x: number) { return x * 2; },
});

Curieusement, le deuxi�me appel � callIt g�n�re une erreur, car TypeScript n'est pas en mesure de d�duire le type de y dans la m�thode consume. Ce qui se passe ici, c'est que lorsque TypeScript essaie de trouver des candidats pour T, il ignore d'abord les fonctions dont les param�tres n'ont pas de types explicites. Il proc�de ainsi parce que certaines fonctions peuvent avoir besoin que le type d�duit de T soit correctement v�rifi�. Dans ce cas, on a besoin de conna�tre le type de T pour analyser la fonction consume.

Ces fonctions sont appel�es fonctions sensibles au contexte, c'est-�-dire des fonctions dont les param�tres n'ont pas de types explicites. Au final, le syst�me de types devra d�terminer les types de ces param�tres, mais cela va � l'encontre du fonctionnement de l'inf�rence dans les fonctions g�n�riques, car les deux � tirent � les types dans des directions diff�rentes.

Code:

1
2
3
4
5
6
7
8
function callFunc<T>(callback: (x: T) => void, value: T) {
    return callback(value);
}
 
callFunc(x => x.toFixed(), 42);
//       ^
// We need to figure out the type of `x` here,
// but we also need to figure out the type of `T` to check the callback.

Pour r�soudre ce probl�me, TypeScript ignore les fonctions sensibles au contexte lors de l'inf�rence des arguments de type et v�rifie et inf�re d'abord � partir d'autres arguments. Si le fait d'ignorer les fonctions sensibles au contexte ne fonctionne pas, l'inf�rence se poursuit simplement sur tous les arguments non v�rifi�s, en allant de gauche � droite dans la liste des arguments. Dans l'exemple ci-dessus, TypeScript ignorera le rappel lors de l'inf�rence pour T, mais examinera ensuite le deuxi�me argument, 42, et en d�duira que T est un nombre. Ensuite, lorsqu'il reviendra v�rifier le rappel, il aura un type contextuel de (x: nombre) => void, ce qui lui permettra de d�duire que x est �galement un nombre.

Que se passe-t-il donc dans nos exemples pr�c�dents ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// Arrow syntax - no errors.
callIt({
    consume: y => y.toFixed(),
    produce: (x: number) => x * 2,
});
 
// Method syntax - errors!
callIt({
    consume(y) { return y.toFixed(); },
    //                  ~
    // error: 'y' is of type 'unknown'.
 
    produce(x: number) { return x * 2; },
});

Dans les deux exemples, une fonction avec un param�tre x explicitement typ� est attribu�e � produce. Ne devraient-ils pas �tre v�rifi�s de mani�re identique ?

La question est subtile : la plupart des fonctions (comme celles qui utilisent la syntaxe de m�thode) ont un param�tre this implicite, mais ce n'est pas le cas des fonctions fl�ch�es. Toute utilisation de this pourrait n�cessiter de � tirer � sur le type de T. Par exemple, conna�tre le type de l'objet litt�ral contenant pourrait � son tour n�cessiter le type de consume, qui utilise T.

Mais nous n'utilisons pas this ! Bien s�r, la fonction peut avoir une valeur this lors de l'ex�cution, mais elle n'est jamais utilis�e !

TypeScript 6.0 en tient compte lorsqu'il d�cide si une fonction est sensible au contexte ou non. Si this n'est jamais r�ellement utilis� dans une fonction, alors il n'est pas consid�r� comme sensible au contexte. Cela signifie que ces fonctions seront consid�r�es comme ayant une priorit� plus �lev�e en mati�re d'inf�rence de type, et tous nos exemples ci-dessus fonctionnent d�sormais !

Importations de sous-chemins commen�ant par #/

Lorsque Node.js a ajout� la prise en charge des modules, il a ajout� une fonctionnalit� appel�e � importations de sous-chemins �. Il s'agit essentiellement d'un champ appel� imports qui permet aux paquets de cr�er des alias internes pour les modules au sein de leur paquet.

Code:

1
2
3
4
5
6
7
8
{
    "name": "my-package",
    "type": "module",
    "imports": {
        "#root": "./dist/index.js",
        "#root/*": "./dist/*"
    }
}

Cela permet aux modules de my-package d'importer � partir de #root au lieu d'avoir � utiliser un chemin relatif comme ../../index.js, et permet essentiellement � tout autre module d'�crire quelque chose comme

Code:

import * as utils from "#root/utils.js";

au lieu d'utiliser un chemin relatif comme celui-ci.

Code:

import * as utils from "../../utils.js";

Un inconv�nient mineur de cette fonctionnalit� est que les d�veloppeurs devaient toujours �crire quelque chose apr�s le # lorsqu'ils sp�cifiaient une importation de sous-chemin. Ici, on utilise root, mais cela est un peu inutile puisqu'il n'y a pas d'autre r�pertoire que ./dist/ sur lequel nous effectuons le mappage.

Les d�veloppeurs qui ont utilis� des bundlers sont �galement habitu�s � utiliser le mappage de chemins pour �viter les longs chemins relatifs. Une convention courante avec les bundlers consiste � utiliser un simple @/ comme pr�fixe. Malheureusement, les importations de sous-chemins ne pouvaient pas commencer par #/, ce qui causait beaucoup de confusion pour les d�veloppeurs qui essayaient de les adopter dans leurs projets.

Mais plus r�cemment, Node.js a ajout� la prise en charge des importations de sous-chemins commen�ant par #/. Cela permet aux paquets d'utiliser un simple pr�fixe #/ pour leurs importations de sous-chemins sans avoir � ajouter de segment suppl�mentaire.

Code:

1
2
3
4
5
6
7
8
{
    "name": "my-package",
    "type": "module",
    "imports": {
        "#": "./dist/index.js",
        "#/*": "./dist/*"
    }
}

Cette fonctionnalit� est prise en charge dans les nouvelles versions de Node.js 20. TypeScript la prend donc d�sormais en charge dans les options node20, nodenext et bundler pour le param�tre --moduleResolution.

Combinaison de --moduleResolution bundler avec --module commonjs

Le param�tre --moduleResolution bundler de TypeScript ne pouvait auparavant �tre utilis� qu'avec --module esnext ou --module preserve ; cependant, avec la d�pr�ciation du n�ud --moduleResolution (alias --moduleResolution node10), cette nouvelle combinaison est souvent la voie de mise � niveau la plus appropri�e pour de nombreux projets.

Les projets voudront souvent planifier une migration vers l'un des deux �l�ments suivants

- --module preserve et --moduleResolution bundler.
- --module nodenext.

en fonction du type de projet (par exemple, application web group�e, application Bun ou application Node.js).

Le drapeau --stableTypeOrdering

Dans le cadre du travail continu sur le portage natif de TypeScript, l'�quipe de typeScprit a introduit un nouveau drapeau appel� --stableTypeOrdering destin� � faciliter les migrations de la version 6.0 � la version 7.0.

Aujourd'hui, TypeScript attribue des identifiants de type (num�ros de suivi internes) aux types dans l'ordre o� ils apparaissent, et utilise ces identifiants pour trier les types d'union de mani�re coh�rente. Un processus similaire s'applique aux propri�t�s. Par cons�quent, l'ordre dans lequel les �l�ments sont d�clar�s dans un programme peut avoir des effets surprenants sur des �l�ments tels que l'�mission de d�clarations.

Prenons par exemple l'�mission de d�clarations � partir de ce fichier :

Code:

1
2
3
4
5
6
7
8
9
// Input: some-file.ts
export function foo(condition: boolean) {
    return condition ? 100 : 500;
}
 
// Output: some-file.d.ts
export declare function foo(condition: boolean): 100 | 500;
//                                               ^^^^^^^^^
//             Note the order of this union: 100, then 500.

Si nous ajoutons une constante non li�e au-dessus de foo, la d�claration �mise change :

Code:

1
2
3
4
5
6
7
8
9
10
// Input: some-file.ts
const x = 500;
export function foo(condition: boolean) {
    return condition ? 100 : 500;
}
 
// Output: some-file.d.ts
export declare function foo(condition: boolean): 500 | 100;
//                                               ^^^^^^^^^
//                           Note the change in order here.

Cela se produit parce que le type litt�ral 500 obtient un ID de type inf�rieur � 100, car il a �t� trait� en premier lors de l'analyse de la d�claration de la const x. Dans de tr�s rares cas, ce changement d'ordre peut m�me entra�ner l'apparition ou la disparition d'erreurs en fonction de l'ordre de traitement du programme, mais en g�n�ral, c'est principalement dans les fichiers de d�claration �mis ou dans la fa�on dont les types sont affich�s dans votre �diteur que vous remarquerez cet ordre.

L'une des principales am�liorations architecturales de TypeScript 7 est la v�rification parall�le des types, qui r�duit consid�rablement le temps de v�rification global. Cependant, le parall�lisme pose un d�fi : lorsque diff�rents v�rificateurs de types visitent les n�uds, les types et les symboles dans des ordres diff�rents, les identifiants internes attribu�s � ces constructions deviennent non d�terministes. Cela conduit � des r�sultats non d�terministes pr�tant � confusion, o� deux fichiers au contenu identique dans le m�me programme peuvent produire des fichiers de d�claration diff�rents, voire calculer des erreurs diff�rentes lors de l'analyse du m�me fichier. Pour rem�dier � cela, TypeScript 7.0 trie ses objets internes (par exemple, les types et les symboles) selon un algorithme d�terministe bas� sur le contenu de l'objet. Cela garantit que tous les v�rificateurs rencontrent le m�me ordre d'objets, ind�pendamment de la mani�re et du moment o� ils ont �t� cr��s. En cons�quence, dans l'exemple donn�, TypeScript 7 affichera toujours 100 | 500, supprimant ainsi compl�tement l'instabilit� de l'ordre.

Cela signifie que TypeScript 6 et 7 peuvent parfois afficher un ordre diff�rent. Bien que ces changements d'ordre soient presque toujours b�nins, si vous comparez les r�sultats du compilateur entre deux ex�cutions (par exemple, en v�rifiant les fichiers de d�claration �mis dans 6.0 par rapport � 7.0), ces diff�rents ordres peuvent produire beaucoup de bruit, ce qui rend difficile l'�valuation de l'exactitude. Parfois, cependant, vous pouvez constater un changement dans l'ordre qui provoque l'apparition ou la disparition d'une erreur de type, ce qui peut �tre encore plus d�routant.

Pour rem�dier � cette situation, dans la version 6.0, vous pouvez sp�cifier le nouveau drapeau --stableTypeOrdering. Cela permet d'aligner le comportement de classement des types de la version 6.0 sur celui de la version 7.0, r�duisant ainsi le nombre de diff�rences entre les deux bases de code. Notez qu'il n'est pas n�cessairement recommand� d'utiliser ce drapeau en permanence, car il peut ralentir consid�rablement la v�rification des types (jusqu'� 25 % selon la base de code).

Si vous rencontrez une erreur de type en utilisant [c]--stableTypeOrdering[c], cela est g�n�ralement d� � des diff�rences d'inf�rence. L'inf�rence pr�c�dente sans --stableTypeOrdering fonctionnait sur la base de l'ordre actuel des types dans votre programme. Pour rem�dier � cela, il est souvent utile de fournir un type explicite quelque part. Il s'agira souvent d'un argument de type

Code:

1
2
- someFunctionCall(/*...*/);
+ someFunctionCall<SomeExplicitType>(/*...*/);

ou d'une annotation de variable pour un argument que vous avez l'intention de passer dans un appel.

Code:

1
2
3
4
- const someVariable = { /*... some complex object ...*/ };
+ const someVariable: SomeExplicitType = { /*... some complex object ...*/ };
 
someFunctionCall(someVariable);

Notez que cet indicateur est uniquement destin� � aider � diagnostiquer les diff�rences entre les versions 6.0 et 7.0. Il n'est pas destin� � �tre utilis� comme fonctionnalit� � long terme.

Option es2025 pour target et lib

TypeScript 6.0 ajoute la prise en charge de l'option es2025 pour target et lib. Bien qu'il n'y ait pas de nouvelles fonctionnalit�s du langage JavaScript dans ES2025, cette nouvelle cible ajoute de nouveaux types pour les API int�gr�es (par exemple RegExp.escape) et d�place quelques d�clarations de esnext vers es2025 (par exemple Promise.try, les m�thodes Iterator et les m�thodes Set).

Nouveaux types pour Temporal

La proposition Temporal tant attendue a atteint la phase 3 et devrait �tre ajout�e � JavaScript dans un avenir proche. TypeScript 6.0 inclut d�sormais des types int�gr�s pour l'API Temporal, vous pouvez donc commencer � l'utiliser d�s aujourd'hui dans votre code TypeScript via --target esnext ou "lib" : ["esnext"] (ou le plus granulaire temporal.esnext).

Code:

1
2
3
4
5
6
7
8
9
10
let yesterday = Temporal.Now.instant().subtract({
    hours: 24,
});
 
let tomorrow = Temporal.Now.instant().add({
    hours: 24,
});
 
console.log(`Yesterday: ${yesterday}`);
console.log(`Tomorrow: ${tomorrow}`);

Temporal est d�j� utilisable dans plusieurs environnements d'ex�cution, vous devriez donc pouvoir commencer � l'exp�rimenter rapidement.

Pr�paration pour TypeScript 7.0

TypeScript 6.0 est con�u comme une version de transition. Bien que les options obsol�tes dans TypeScript 6.0 continueront de fonctionner sans erreur lorsque "ignoreDeprecations" : "6.0" est d�fini, elles seront enti�rement supprim�es dans TypeScript 7.0 (le port TypeScript natif). Si vous voyez des avertissements de d�pr�ciation apr�s la mise � niveau vers TypeScript 6.0, il est vivement recommand� de les traiter avant d'essayer d'adopter TypeScript 7 (ou ses aper�us natifs) dans votre projet.

En ce qui concerne le calendrier entre TypeScript 6.0 et 7.0, l'�quipe pr�voit de publier la version 7.0 peu apr�s la version 6.0. Cela devrait aider � maintenir une certaine continuit� dans le d�veloppement et permettre de r�soudre les probl�mes plus rapidement apr�s la publication de la version 7.0.

� ce stade, TypeScript 6.0 est � stable en termes de fonctionnalit�s � et il n'est pas pr�vu d'ajouter de nouvelles fonctionnalit�s ni d'apporter de modifications importantes. Au cours des prochaines semaines, ils traiteront tous les nouveaux probl�mes signal�s dans le code source 6.0. Ils continuent �galement � travailler sur TypeScript 7.0 et publiront des versions nocturnes des aper�us natifs ainsi qu'une extension VS Code.

Source : Annonce de TypeScript 6.0 Beta

Et vous ?

:fleche: Pensez-vous que cette annonce est cr�dible ou pertinente ?
:fleche: Quel est votre avis sur le sujet ?

Voir aussi :

:fleche: Microsoft annonce la version candidate (RC) de TypeScript 5.9 apportant des mise � jour � tsc --init ainsi que la prise en charge de import defer et de --module node20

:fleche: Un TypeScript 10x plus rapide : Anders Hejlsberg, architecte principal de Microsoft pour TypeScript, pr�sente un nouveau portage de TypeScript qui offrira aux d�veloppeurs un outil de haute performance

:fleche: Pourquoi je suis sceptique quant � la r��criture des outils JavaScript dans des langages "plus rapides", par Nolan Lawson

Images attach�es

Contruire un object � partir d'un autre

pierrot10 — Thu, 08 Jan 2026 22:34:00 GMT

Bonjour,

Je suis sur un challenge.

J'ai cinq terrains disponibles, le 1 , 2, 3 , 5 ,6
Ces terrains se trouvent dans un array

Code:

1
2
3
4
5
6
const f:any = []
    fields.map((p) =>{
      f.push(p.id)
    })
    console.log("All fields:",f)
// All fields: ["1", "2", "4", "5", "6"]

je veux maintenant activer 3 terrains, disons le 1, 2 et 5

Je dois miantenant retourner une valeur qui indique quels terrains sont 1 ou 0 (actif, inactif) et il m'est impos� ce format, ce qui me complique la vie

Citation:

{"field1":"1", "filed2":"1", "field3":"0", "field4":"0", "field5":"1"}

J'ai donc commencer comme cela

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
    const tags = {}
 
    f.map((i:any, o:any) => { // je loop mes terrains disponibles
      if(selectedFields.find((e:any) => e == i.toString()) == i){ // Si l'un de mes trois terrains actifs est dans f
        console.log(i, "IS IN ALL FIELD")
        // tags prend la valeur de {"field"+i.toString():"1"})
      }
      else{ // et si elle ne l'est pas, la valeur vient à 0
        console.log(i, "is NOT in all fields")
        // tags prend la valeur de {"field"+i.toString():"0"})
 
      }
    })
// pour contruire, au fur et à mesure de la progression de map()
 
    console.log("TAGS", tags) // doit afficher ceci {"field1":"1", "filed2":"1", "field3":"0", "field4":"0", "field5":"1"}

J'ai essay� avec .push, sans succ�s.

Comment est-ce que vous le feriez?

Typer une fonction useQuery()

pierrot10 — Wed, 31 Dec 2025 17:11:05 GMT

Bonjour � tous,

Je vais essay� d'�tre le plus claire possible. Je d�veloppe une App iOS/Android avec React Native et Type Script.
En partant de z�ro, j'ai tout appris avec le Web et Youtube.

Gr�ce � un tuto, j'ai pu faire une fonction (solution 1) qui va faire appelle � useQuery pour extraire les donn�es d'un base de donn�e, le tout typ�.
J'utilise cette fonction sur trois vues. Ces trois font appelle � cette fonction et le param�tre queryKey est le m�me pour ces trois vues

Pour un besoin, j'utilise r�utilis� directement la fonction useQuery() (solutiuon 2)pour que je puisse param�tre queryKey pour une vue.
Mon probl�me est que je n'ai pas r�ussi � typer ma sortie....

Pour �tre plus pr�cis, je vous montre la solution 1, afin de mieux comprendre ma question

Dans ma vue setting.tsx, j'ai ceci

Code:

1
2
3
 
import { useFetchQuery } from "@/hooks/useFetchQuery";
const {data, isFetching} = useFetchQuery("/getsettings/[id_field]/[id_user]", {id_field: 0, id_user:id_user})

Dans mon fichier useFetchQuety.ts, j'ai 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
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
import { useInfiniteQuery, useQuery } from '@tanstack/react-query'
 
const endpoint = "https://api.web.ch/dashboard"
 
type API = {
'/getsettings/[id_field]/[id_user]': {
        response: number, 
        id_field: number,
        method: string,
        fields:{
            id_field: number,
            field_name: string,
            field_longname: string,
            field_city: string,
            field_lat: number,
            field_lng: number
        }[],
        settings: {
            id_station_type?: number,
            station_type_name: string,
            station_type_awe?: string,
            field_data: {
                id_field: number,
                field_name: string,
                field_user_role: number,
                station_data: {
                    id_station: number,
                    station_name: string,
                    station_longname: string,
                    station_type_awe: string,
                    station_archive: number,
                    station_lat: number,
                    station_lng: number,
                    station_alt: number,
                    sensors_data: {
                        id_sensor: number,
                        sensor_active: number,
                        sensor_name: string,
                        sensor_unit: string,
                        sensor_longname: string,
                        id_sensor_type: number,
                        sensor_type_name: string,
                        sensor_type_longname: string,
                        sensor_type_awe: string,
                        sensor_chart_style: string,
                        sensor_chart_borderWidth: string,
                        sensor_chart_pointRadius: number,
                        sensor_chart_showLine: number,
                        sensor_chart_fill: number,
                        sensor_chart_borderColor: string,
                        sensor_chart_backgroundColor: string,
                        sensor_chart_pointStyle: string,
                        sensor_threshold_operator:'string',
                        sensor_threshold_min: number,
                        sensor_threshold_max: number,
 
                    }[],
                }[],
            }[],
        }[],
    }
}
 
export function useFetchQuery<T extends keyof API>(path: T, params?: Record<string, string | number>){
    const localurl = endpoint + Object.entries(params ?? {}).reduce((acc, [key, value]) => acc.replaceAll(`[${key}]`, value.toString()) as T, path)
 
    //console.log("useFetchUqrey: ",localurl)
 
    return useQuery({
        queryKey: [localurl],
        //refetchIntervalInBackground: true,  
        //refetchInterval: 60000, // 60 000 ms = 60 secondes
        //refetchOnWindowFocus: false,
        //staleTime:30000,
        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
        },
    })
}

Le mega avantage, est que

Code:

const {data, isFetching} = useFetchQuery("/getsettings/[id_field]/[id_user]", {id_field: 0, id_user:id_user})

lorsque je saisi data. , apr�s le point il me propose toutes les possiblit�s qui sont d�fini dans API.

Solution 2
Dans la solution 2, je le fais diff�remment. Dans ma vue [id].tsx, j'ai

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
const {data, isPaused, isLoading, error, refetch, isFetching}= useQuery({ // Min 52 https://www.youtube.com/watch?v=bpHq_-bPkGo
        queryKey: ['station', params.id, dateRange],
        queryFn: () => fetchStation(params.id, dayjs(dateRange.startDate).format("YYYY-MM-DD"), dayjs(dateRange.endDate).format("YYYY-MM-DD"), id_user),
        //retryOnMount: false,
        refetchInterval: 30000,
        //gcTime: 1000 * 60,
        //staleTime: 1000 * 30, // Data remains fresh for 60 sec
        refetchOnWindowFocus: true,
        //enabled: false,
        //retry: 2, // Retry twice on failure
        //retryDelay: 2000, // Wait 2 seconds between retries
        //select: (data) => data.map((post) => post.title), // Extract only post title
    })

Comme vous pouvez le voir, je peux directement param�trer useQuery.

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
 
import { QueryClient, useInfiniteQuery, useQuery } from '@tanstack/react-query'
 
const uri = "https://api.web.ch/dashboard"
const endpoint = "/getstation/"
const params = "/"
 
const headers = {
    accept: 'application/json',
    Authorisation: 'key',
}
 
export const fetchStation = async (id:string, dateFrom:string, dateTo:string, user_id:number) => {
 
    const url = uri+endpoint+id+'/'+dateFrom+'/'+dateTo+'/'+user_id+'/';
    const options = {
        method: 'GET',
        headers,
    };
 
    try {
        const res = await fetch(url, options);
        /*
        if(!res.ok){
           throw new Error('[fetchQuery] Failed to fetch a s tation') 
        }
        */
        const json = await res.json();
        return json;
 
    }catch(err){
        console.error('[fetchQuery] ' + err);
    }
 
};

queryFn fait appelle � la fonction fetchStation() qui va s'occuper de faire la requ�te sur ma base de donn�es.

cela fonctionne tr�s bien, sauf que, ... dans la solution deux, je n'ai pas de typage. Docn si je fais

data. , apr�s le point j'ai pas d'option. Tout cela, parce que je n'ai pas comme dans la solution 1, le API, genre

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
 
type API = {
'/getsettings/[id_field]/[id_user]': {
        response: number, 
        id_field: number,
        method: string,
        fields:{
            id_field: number,
            field_name: string,
            field_longname: string,
            field_city: string,
            field_lat: number,
            field_lng: number
        }[],
        settings: {
            id_station_type?: number,
            station_type_name: string,
            station_type_awe?: string,
            field_data: {
                id_field: number,
                field_name: string,
                field_user_role: number,
                station_data: {
                    id_station: number,
                    station_name: string,
                    station_longname: string,
                    station_type_awe: string,
                    station_archive: number,
                    station_lat: number,
                    station_lng: number,
                    station_alt: number,
                    sensors_data: {
                        id_sensor: number,
                        sensor_active: number,
                        sensor_name: string,
                        sensor_unit: string,
                        sensor_longname: string,
                        id_sensor_type: number,
                        sensor_type_name: string,
                        sensor_type_longname: string,
                        sensor_type_awe: string,
                        sensor_chart_style: string,
                        sensor_chart_borderWidth: string,
                        sensor_chart_pointRadius: number,
                        sensor_chart_showLine: number,
                        sensor_chart_fill: number,
                        sensor_chart_borderColor: string,
                        sensor_chart_backgroundColor: string,
                        sensor_chart_pointStyle: string,
                        sensor_threshold_operator:'string',
                        sensor_threshold_min: number,
                        sensor_threshold_max: number,
 
                    }[],
                }[],
            }[],
        }[],
    }
}

ma question

J'ai aucune id�e, comment je peux adapter la solution 2, pour appliquer le typage, comme dans la solution 1, de mani�re simple.
La solution 1, je l'ai �cris en suivant un tuto, et ca me semble complique

Auriez-vous la gentillesse de me guider et m'aider � modifier/adapter la solution 2 pour ajouter le typage?

je vous remercie et je vous souhaite uen bonne ann�e

La version 2.6 de Deno, le runtime pour JavaScript et TypeScript moderne, est disponible

Anthony — Mon, 15 Dec 2025 10:51:49 GMT

Deno 2.6, la derni�re version du runtime JavaScript et TypeScript moderne, est disponible avec l'outil dx, un contr�le plus granulaire des autorisations et une v�rification des types TypeScript plus rapide

Deno 2.6, la derni�re version du runtime moderne pour JavaScript et TypeScript, vient d'�tre publi�e. Cette mise � jour introduit un nouvel outil, dx, qui s'aligne sur le workflow npx utilis� dans les projets Node.js, et offre une v�rification des types TypeScript plus rapide gr�ce au moteur exp�rimental tsgo, �crit en langage Go. Deno 2.6 �tend �galement la compatibilit� avec Node.js, renforce la s�curit� des projets gr�ce � un contr�le plus granulaire des autorisations et apporte plusieurs autres am�liorations.

Deno est un environnement d'ex�cution (runtime) pour JavaScript, TypeScript et WebAssembly bas� sur le moteur JavaScript V8 et le langage de programmation Rust. Deno a �t� co-cr�� par Ryan Dahl, le cr�ateur de Node.js, et Bert Belder. Deno assume explicitement le r�le � la fois d'environnement d'ex�cution et de gestionnaire de paquets au sein d'un seul ex�cutable, plut�t que de n�cessiter un programme de gestion de paquets s�par�.

Deno 2.6 est la derni�re mise � jour de ce runtime JavaScript et TypeScript moderne. Le nouvel outil dx, qui constitue l'un des points forts de cette version, permet aux d�veloppeurs d'ex�cuter facilement des binaires � partir de paquets npm et JSR, en s'alignant �troitement sur le workflow npx utilis� dans les projets Node.js. Dans le but d'acc�l�rer le d�veloppement, Deno 2.6 int�gre d�sormais tsgo, un v�rificateur de types TypeScript exp�rimental �crit en Go, qui offre une vitesse de v�rification des types nettement am�lior�e par rapport � l'ancien syst�me bas� sur TypeScript.

Tout en apportant des changements majeurs au flux de travail, les couches de s�curit� et de compatibilit� de Deno ont �galement �volu�. Cette version ajoute le drapeau --require pour pr�charger les modules CommonJS, renfor�ant ainsi la compatibilit� avec les flux de travail Node.js. Le contr�le granulaire des autorisations renforce la s�curit� des projets, et la sous-commande deno audit v�rifie les d�pendances par rapport � la base de donn�es GitHub Common Vulnerabilities and Exposures (CVE), produisant des rapports de s�curit� pour les paquets JSR et npm.

Ex�cuter les binaires de paquets avec dx

Deno 2.6 introduit un nouvel outil, dx, qui est �quivalent � npx et constitue un moyen pratique d'ex�cuter les binaires des paquets npm et JSR.

Code:

1
2
3
4
5
6
7
8
9
$ dx cowsay "Hello, Deno!"
 ______________
< Hello, Deno! >
 --------------
        \   ^__^
         \  (oo)\_______
            (__)\       )\/\
                ||----w |
                ||     ||

Les utilisateurs doivent veiller � installer l'alias dx : deno x --install-aliasLes utilisateurs plus exp�riment�s remarqueront que dx fonctionne de mani�re similaire � deno run, mais avec les diff�rences suivantes :

dx utilise par d�faut les autorisations --allow-all, sauf si un autre indicateur d'autorisation est transmis.
dx invite l'utilisateur avant de t�l�charger un paquet.
dx ex�cute automatiquement les scripts de cycle de vie si l'utilisateur accepte l'invite susmentionn�e.
dx utilise par d�faut npm:<nom_du_paquet> sauf indication contraire.
dx g�n�re une erreur si l'utilisateur tente de l'utiliser pour ex�cuter un fichier local.

Avec l'ajout de dx, les utilisateurs devraient trouver plus facile d'ex�cuter les binaires des paquets de la mani�re habituelle. Ils peuvent profiter de la commodit� de npx tout en tirant parti du mod�le de s�curit� robuste et des optimisations de performances de Deno.

Contr�le plus granulaires des autorisations

Cette version offre un contr�le plus granulaire des autorisations. Deno 2.6 introduit les flags --ignore-read et --ignore-env, qui permettent d'ignorer de mani�re s�lective certaines lectures de fichiers ou certains acc�s � des variables d'environnement. Au lieu de g�n�rer une erreur NotCapable, les utilisateurs peuvent demander � Deno de renvoyer respectivement une erreur NotFound et undefined.

Voyons un exemple de fonctionnement :

Code:

1
2
3
4
5
const awsSecretKey = Deno.env.get("AWS_SECRET_KEY");
console.log(awsSecretKey);
 
const passwd = await Deno.readTextFile("/etc/passwd");
console.log(passwd);

Code:

1
2
3
4
5
6
7
$ deno run --ignore-read=/etc --ignore-env=AWS_SECRET_KEY main.ts
undefined
error: Uncaught (in promise) NotFound: No such file or directory (os error 2)
const passwd = await Deno.readTextFile("/etc/passwd");
                          ^
    at Object.readTextFile (ext:deno_fs/30_fs.js:799:24)
    at file:///dev/main.ts:4:27

Ces nouveaux indicateurs offrent davantage de flexibilit� lors de l'ex�cution de code non fiable. Souvent, le d�veloppeur ne souhaite pas ouvrir un sandbox, mais une certaine d�pendance insiste pour lire 20 variables d'environnement ou fichiers de configuration � partir de son r�pertoire personnel. Ces d�pendances g�rent correctement les variables d'environnement ou les fichiers manquants, mais elles ne sont pas en mesure de g�rer les erreurs NotCapable de Deno. Gr�ce � ces nouveaux flags, il est possible d'ex�cuter ce type de code sans accorder toutes les autorisations.

De plus, Deno.env.toObject() fonctionne d�sormais avec des autorisations d'environnement partielles. Si le d�veloppeur n'accorde l'acc�s qu'� un sous-ensemble de variables d'environnement, Deno.env.toObject() ne renverra que les variables autoris�es.

Code:

console.log(Deno.env.toObject());

Code:

1
2
$ SOME_SECRET=foo deno run --allow-env=SOME_SECRET main.ts
{ SOME_SECRET: "foo" }

Cette version comprend �galement un courtier d'autorisations exp�rimental. Il s'agit d'une nouvelle fonctionnalit� qui permet un contr�le avanc� des autorisations gr�ce � un processus distinct charg� de g�rer les demandes d'autorisation.

Code:

$ DENO_PERMISSION_BROKER_PATH=/perm_broker.sock deno run untrusted_code.ts

Cela peut �tre utile pour les auteurs de plateformes qui souhaitent ex�cuter du code non fiable, mais qui disposent d'un processus de niveau sup�rieur pour g�rer les demandes d'autorisation.

Lorsque le courtier d'autorisations est actif, tous les indicateurs d'autorisation --allow-*, --deny-* et --ignore-* sont ignor�s, et toutes les demandes d'autorisation sont envoy�es au processus du courtier � la place.

V�rification des types plus rapide gr�ce � tsgo et aux am�liorations apport�es au langage serveur

Deno 2.6 int�gre tsgo, un nouveau v�rificateur de types exp�rimental pour TypeScript �crit en Go. Ce nouveau v�rificateur de types est nettement plus rapide que la pr�c�dente impl�mentation, qui �tait �crite en TypeScript.

tsgo peut �tre activ� en utilisant le drapeau --unstable-tsgo ou la variable d'environnement DENO_UNSTABLE_TSGO=1 avec deno check :

Code:

$ deno check --unstable-tsgo main.ts

L'�quipe de Deno a constat� une am�lioration de 2 fois la vitesse des temps de v�rification des types pour les projets internes lors de l'utilisation de TSGO.

Du c�t� de la v�rification des types, plusieurs points faibles de longue date ont �t� corrig�s. Deno est d�sormais plus tol�rant envers les sch�mas d'importation non standard et les d�clarations de modules ambiants nus, ce qui signifie moins d'erreurs de faux positifs lors de l'utilisation d'outils de framework ou de chargeurs de modules personnalis�s.

La prise en charge des options courantes de tsconfig.json a �galement �t� am�lior�e :

compilerOptions.paths fonctionne d�sormais comme pr�vu pour la r�solution des modules,
skipLibCheck est respect� pour les erreurs de graphe,
les param�tres avanc�s tels que isolatedDeclarations sont pris en charge.

Ces am�liorations contribuent � une exp�rience de v�rification plus pr�visible, en particulier dans les espaces de travail multi-paquets.

Le langage serveur (LSP) a �galement b�n�fici� de quelques am�liorations en termes de qualit� de vie. L'action source.organizeImports est d�sormais prise en charge, ce qui permet de trier et de nettoyer automatiquement les importations depuis l'�diteur. Deno utilisera l'impl�mentation native de l'�diteur lorsqu'elle est disponible et �vitera tout travail de r�solution inutile, rendant ainsi la fonctionnalit� plus intuitive. La cr�ation de tests est �galement am�lior�e gr�ce � une meilleure int�gration des fonctions de test du style describe et it. Les �diteurs peuvent d�sormais comprendre et afficher des informations sur les cas de test individuels.

Plusieurs corrections en arri�re-plan rendent le langage serveur moins intrusif : les mises � jour de configuration sont d�tect�es imm�diatement lorsque tsconfig.json change, les fichiers de verrouillage ne sont pas �crits pendant le � cache on save � et les directives lint-ignore se comportent de mani�re plus coh�rente avec les commentaires en t�te. Ces am�liorations r�duisent les frictions et permettent aux outils de langage de ne pas g�ner l'utilisateur pendant que son travail.

Ex�cuter CommonJS avec --require

Deno v2.4 est livr� avec le drapeau --preload qui permet de charger des fichiers avant d'ex�cuter le module principal, ce qui permet de personnaliser l'environnement d'ex�cution.

Cette version ajoute le flag --require qui sert le m�me objectif, mais qui est destin� � l'ex�cution de modules CommonJS plut�t que de modules ES.

Code:

$ deno run --require ./setup.cjs main.ts

Cela rapproche Deno de la compatibilit� Node.js en prenant en charge un mod�le commun pour le pr�chargement des modules.

Audit de s�curit� avec deno audit

L'une des nouveaut�s les plus importantes est la nouvelle sous-commande deno audit, qui aide les d�veloppeurs � identifier les failles de s�curit� dans leurs d�pendances en v�rifiant la base de donn�es CVE de GitHub. Cette commande analyse et g�n�re un rapport pour les paquets JSR et npm.

Pour renforcer la s�curit�, Deno a �galement ajout� le drapeau exp�rimental deno audit --socket qui s'int�gre � socket.dev :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$ deno install npm:lodahs
Add npm:lodahs@0.0.1-security
 
Dependencies:
+ npm:lodahs 0.0.1-security
 
$ deno audit --socket
 
No known vulnerabilities found
 
Socket.dev firewall report
 
╭ pkg:npm/lodahs@0.0.1-security
│ Supply Chain Risk: 0
│ Maintenance: 76
│ Quality: 41
│ Vulnerabilities: 100
│ License: 100
╰ Alerts (1/0/0): [critical] malware
 
Found 1 alerts across 1 packages
Severity: 0 low, 0 medium, 0 high, 1 critical

La commande deno audit analyse l'ensemble de votre graphe de d�pendances, v�rifie chaque paquet par rapport � la base de donn�es CVE de GitHub et, si --socket est pr�sent, par rapport � la base de donn�es de vuln�rabilit�s de socket.dev. Cela s'av�re particuli�rement utile dans les pipelines CI/CD o� l'utilisateur souhaite interrompre les builds si des vuln�rabilit�s sont d�tect�es.

Si Deno d�tecte la variable d'environnement SOCKET_API_KEY, il l'utilisera lors de ses �changes avec socket.dev afin de g�n�rer des rapports encore plus d�taill�s, en appliquant les politiques et les r�gles d'acc�s de l'organisation.

Autres am�liorations

Outre les changements fondamentaux pr�c�dents, Deno 2.6 offre une nouvelle prise en charge des importations en phase source, permettant d'acc�der � la source brute des modules d'une mani�re diff�rente des importations standard. Parall�lement, des am�liorations notables apport�es au bundler renforcent la fiabilit�, tandis que la compatibilit� avec Node.js progresse gr�ce � des am�liorations continues des op�rations sur les fichiers, des normes cryptographiques, de la gestion des processus et des API de bases de donn�es.

Plusieurs nouvelles API et stabilisations �largissent �galement les possibilit�s offertes par la plateforme, et les utilisateurs b�n�ficient d'am�liorations continues des performances et de nombreuses petites am�liorations du flux de travail int�gr�es dans cette version.

Pour passer � Deno 2.6, ex�cutez la commande suivante dans votre terminal : deno upgrade. Si Deno n'est pas encore install�, ex�cutez l'une des commandes suivantes pour l'installer :

Code:

1
2
3
4
5
# Using Shell (macOS and Linux):
curl -fsSL https://deno.land/install.sh | sh
 
# Using PowerShell (Windows):
iwr https://deno.land/install.ps1 -useb | iex

Source : Deno 2.6

Et vous ?

:fleche: Quel est votre avis sur le sujet ?
:fleche: Que pensez-vous des nouveaut�s propos�es par cette version de Deno ? Les trouvez-vous utiles et int�ressantes ?
:fleche: Avez-vous d�j� utilis� cet outil pour votre usage ou le d�veloppement d'applications, et si oui, qu'en pensez-vous ?

Voir aussi :

:fleche: La Version 1.9 de Deno, le runtime pour ex�cuter JavaScript et TypeScript, est disponible, elle am�liore les appels de commande dans Rust et apporte de nouvelles fonctionnalit�s

:fleche: Pendant que Deno, le runtime de JS et TS, gagne en maturit�, certaines entreprises tentent de l'utiliser en production, mais d'autres repartent non satisfaites � la suite des tests effectu�s

:fleche: Deno contre Oracle : Deno a d�pos� une demande d'annulation de la marque JavaScript d'Oracle, Oracle a jusqu'au 4 janvier 2025 pour agir, sinon la marque sera probablement annul�e

Retourner un �tat vrai/faux avec une function async

pierrot10 — Fri, 21 Nov 2025 20:10:48 GMT

Bonjour � tous,

J'utilise une fonction pour mettre � jour une valeur dans une base de donn�e

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
 /* Save Chart settings */
    const saveChartSettings = async(field:string, value:number) => {
        console.log( "SensorID:", id_sensor , "DB field:", field, "Value:",JSON.stringify(value,null,1))
 
 
        try {
            const response = await fetch('https://api.site-site.ch/putChartSettings.inc.php', {
                method: 'POST',
                headers:{
                    accept:'application(json',
                    Authorisation: 'key',
                },
                body: JSON.stringify({
                    id_sensor: id_sensor,
                    field: field,
                    value: value
                })
            })
 
            if(!response.ok){
                setThresholdError("[Save Threshold] Failed to fetch the API (check the path)")
            }
 
            const json = await response.json();
            console.info("Response:", json);
 
            if(json.response=="200"){
                return 1
            }
            else{
               return 0
            }
 
        }catch(err){
            setThresholdError("[Save setting] Check API path. " + err)
        } finally {
 
        }
    }

Je me rends compte que j'ai besoin que la fonction me retourne 1 ou un 0 si le champs a �t� mis � jour, ou si aucune modification � eu lieu. Une erreur doit returner la valuer -1.

Pour le moment, j'ai ajout� 'reurn 1' et 'return 0'

J'ai aussi modifi� ceci comme cela

Code:

1
2
3
4
5
6
if(saveChartSettings('border-color', value) == 1 ){
            setIsBorderColorSaved(1)
        }
        else{
            setIsBorderColorSaved(0)
        }

Ce qui me g�n�re une erreur

Mon probl�me est que je ne sais pas comment r�soudre ce probl�me. Je comprends qu'il manque un �l�ment await. Mais ou?

J'ai essay� ceci sans succ�s

Code:

1
2
3
4
5
6
if(await saveChartSettings('border-color', value) == 1 ){
            setIsBorderColorSaved(1)
        }
        else{
            setIsBorderColorSaved(0)
        }

je ne comprends pas aussi la ntion de Promise, je suis un peu largu�.

Pouvez-vous m'�clairecir?

Mercii

Images attach�es

Microsoft annonce la version candidate de TypeScript 5.9

Jade Emy — Wed, 30 Jul 2025 06:02:28 GMT

Microsoft annonce la version candidate (RC) de TypeScript 5.9 apportant des mise � jour � tsc --init ainsi que la prise en charge de import defer et de --module node20

Microsoft annonce la version candidate (RC) de TypeScript 5.9. TypeScript 5.9 RC apporte des mise � jour � tsc --init, la prise en charge de import defer et de --module node20, ainsi que des descriptions r�capitulatives dans les API DOM. Par rapport � la version b�ta, cette version apporte quelques corrections, notamment la restauration de AbortSignal.abort() dans la biblioth�que DOM.

TypeScript est un langage qui s'appuie sur JavaScript en ajoutant une syntaxe pour les types. L'�criture de types dans le code permet d'expliquer l'intention et de faire v�rifier le code par d'autres outils pour d�tecter les erreurs comme les fautes de frappe, les probl�mes avec nullet undefined, et plus encore. Les types alimentent �galement les outils d'�dition de TypeScript, comme l'auto-compl�tion, la navigation dans le code et les refactorisations que vous pouvez voir dans des �diteurs tels que Visual Studio et VS Code. En fait, TypeScript et son �cosyst�me alimentent l'exp�rience JavaScript dans ces deux �diteurs �galement.

Voici les nouveaut�s de TypeScript 5.9 :

tsc --init minimal et mis � jour

Depuis un certain temps, le compilateur TypeScript prend en charge un indicateur --init qui permet de cr�er un fichier tsconfig.json dans le r�pertoire actuel. Au cours des derni�res ann�es, l'ex�cution de tsc --init cr�ait un fichier tsconfig.json tr�s � complet �, rempli de param�tres comment�s et de leurs descriptions.

Cependant, il �tait courant de supprimer imm�diatement la plupart du contenu de ces nouveaux fichiers tsconfig.json. Lorsque les utilisateurs souhaitent d�couvrir de nouvelles options, ils s'appuient sur la fonction d'auto-compl�tion de leur �diteur ou qu'ils naviguent vers la r�f�rence tsconfig. La fonction de chaque param�tre est �galement document�e sur cette m�me page et peut �tre consult�e via les infobulles/outils d'aide/informations rapides de l'�diteur. Bien que l'affichage de certains param�tres comment�s puisse �tre utile, le fichier tsconfig.json g�n�r� �tait souvent consid�r� comme excessif.

Avec cette version, tsc --init s'initialise avec quelques param�tres plus prescriptifs. Parmi les points faibles courants et les d�sagr�ments rencontr�s par les utilisateurs lorsqu'ils cr�ent un nouveau projet TypeScript, on peut citer que la plupart des utilisateurs �crivent dans des modules (et non dans des scripts globaux), et --moduleDetection peut forcer TypeScript � traiter chaque fichier d'impl�mentation comme un module. Les d�veloppeurs souhaitent �galement souvent utiliser les derni�res fonctionnalit�s ECMAScript directement dans leur runtime, de sorte que --target peut g�n�ralement �tre d�fini sur esnext. Les utilisateurs de JSX trouvent souvent que revenir � --jsx est une friction inutile, et ses options sont l�g�rement d�routantes. Et souvent, les projets finissent par charger plus de fichiers de d�claration depuis TypeScript n'en a r�ellement besoin, mais sp�cifier un tableau de types vide peut aider � limiter cela.

Dans TypeScript 5.9, un simple tsc --init sans autre indicateur g�n�rera le fichier tsconfig.json suivant :

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
{
  // Visit https://aka.ms/tsconfig to read more about this file
  "compilerOptions": {
    // File Layout
    // "rootDir": "./src",
    // "outDir": "./dist",
 
    // Environment Settings
    // See also https://aka.ms/tsconfig_modules
    "module": "nodenext",
    "target": "esnext",
    "types": [],
    // For nodejs:
    // "lib": ["esnext"],
    // "types": ["node"],
    // and npm install -D @types/node
 
    // Other Outputs
    "sourceMap": true,
    "declaration": true,
    "declarationMap": true,
 
    // Stricter Typechecking Options
    "noUncheckedIndexedAccess": true,
    "exactOptionalPropertyTypes": true,
 
    // Style Options
    // "noImplicitReturns": true,
    // "noImplicitOverride": true,
    // "noUnusedLocals": true,
    // "noUnusedParameters": true,
    // "noFallthroughCasesInSwitch": true,
    // "noPropertyAccessFromIndexSignature": true,
 
    // Recommended Options
    "strict": true,
    "jsx": "react-jsx",
    "verbatimModuleSyntax": true,
    "isolatedModules": true,
    "noUncheckedSideEffectImports": true,
    "moduleDetection": "force",
    "skipLibCheck": true,
  }
}

Prise en charge de import defer

TypeScript 5.9 introduit la prise en charge de la proposition d'�valuation diff�r�e des modules ECMAScript � l'aide de la nouvelle syntaxe import defer. Cette fonctionnalit� vous permet d'importer un module sans ex�cuter imm�diatement le module et ses d�pendances, ce qui vous offre un meilleur contr�le sur le moment o� le travail et les effets secondaires se produisent.

La syntaxe n'autorise que les importations d'espaces de noms :

Code:

import defer * as feature from "./some-feature.js";

Le principal avantage de import defer est que le module n'est �valu� que lors de sa premi�re utilisation. Prenons l'exemple suivant :

Code:

1
2
3
4
5
6
7
8
9
10
11
// ./some-feature.ts
initializationWithSideEffects();
 
function initializationWithSideEffects() {
  // ...
  specialConstant = 42;
 
  console.log("Side effects have occurred!");
}
 
export let specialConstant: number;

Lorsque vous utilisez import defer, la fonction initializationWithSideEffects() ne sera pas appel�e tant que vous n'aurez pas acc�d� � une propri�t� de l'espace de noms import� :

Code:

1
2
3
4
5
6
7
8
9
import defer * as feature from "./some-feature.js";
 
// No side effects have occurred yet
 
// ...
 
// As soon as `specialConstant` is accessed, the contents of the `feature`
// module are run and side effects have taken place.
console.log(feature.specialConstant); // 42

Comme l'�valuation du module est diff�r�e jusqu'� ce que vous acc�diez � un membre du module, vous ne pouvez pas utiliser d'importations nomm�es ou d'importations par d�faut avec import defer :

Code:

1
2
3
4
5
6
7
8
//  Not allowed
import defer { doSomething } from "some-module";
 
//  Not allowed  
import defer defaultExport from "some-module";
 
//  Only this syntax is supported
import defer * as feature from "some-module";

Notez que lorsque vous �crivez import defer, le module et ses d�pendances sont enti�rement charg�s et pr�ts � �tre ex�cut�s. Cela signifie que le module doit exister et sera charg� � partir du syst�me de fichiers ou d'une ressource r�seau. La principale diff�rence entre import normale et import difer r�side dans le fait que l'ex�cution des instructions et des d�clarations est diff�r�e jusqu'� ce que vous acc�diez � une propri�t� de l'espace de noms import�.

Cette fonctionnalit� est particuli�rement utile pour charger de mani�re conditionnelle des modules dont l'initialisation est co�teuse ou sp�cifique � une plateforme. Elle peut �galement am�liorer les performances de d�marrage en diff�rant l'�valuation des modules pour les fonctionnalit�s de l'application jusqu'� ce qu'elles soient r�ellement n�cessaires.

Notez que import defer n'est pas transform� ou � d�class� � par TypeScript. Il est destin� � �tre utilis� dans des environnements d'ex�cution qui prennent en charge cette fonctionnalit� de mani�re native, ou par des outils tels que des bundlers qui peuvent appliquer la transformation appropri�e. Cela signifie que import defer ne fonctionnera que sous les modes --module preserve et esnext.

Prise en charge de --module node20

TypeScript fournit plusieurs options node* pour les param�tres --module et --moduleResolution. Plus r�cemment, --module nodenext a pris en charge la possibilit� de requérir () des modules ECMAScript � partir de modules CommonJS, et rejette correctement les assertions d'importation (au profit des attributs d'importation li�s aux normes).

TypeScript 5.9 apporte une option stable pour ces param�tres appel�e node20, destin�e � mod�liser le comportement de Node.js v20. Contrairement � --module nodenext ou --moduleResolution nodenext, cette option ne devrait pas conna�tre de nouveaux comportements � l'avenir. Contrairement � nodenext, la sp�cification de --module node20 implique --target es2023, sauf configuration contraire. --module nodenext, en revanche, implique le --target esnext flottant.

Descriptions sommaires dans les API DOM

Auparavant, la plupart des API DOM dans TypeScript renvoyaient uniquement vers la documentation MDN de l'API. Ces liens �taient utiles, mais ils ne fournissaient pas de r�sum� rapide du fonctionnement de l'API. Gr�ce � quelques modifications, TypeScript inclut d�sormais des descriptions sommaires pour de nombreuses API DOM bas�es sur la documentation MDN.

Info-bulles extensibles (aper�u)

Les infobulles (�galement appel�es � info-bulles de l'�diteur � et � info-bulles �) peuvent �tre tr�s utiles pour consulter les variables afin de conna�tre leur type, ou les alias de type afin de savoir � quoi ils font r�f�rence. Cependant, il est courant que les utilisateurs souhaitent approfondir leurs connaissances et obtenir des d�tails sur ce qui est affich� dans l'info-bulle. Par exemple, si nous passons la souris sur le param�tre options dans l'exemple suivant :

Code:

export function drawButton(options: Options): void

Nous obtenons (parameter) options: Options.

Pour vous aider, TypeScript 5.9 propose d�sormais en avant-premi�re une fonctionnalit� appel�e � expandable hovers � (survols extensibles) ou � quick info verbosity � (verbosit� des informations rapides). Si vous utilisez un �diteur tel que VS Code, vous verrez d�sormais un bouton + et - � gauche de ces infobulles. Cliquer sur le bouton + permettra d'afficher les types de mani�re plus d�taill�e, tandis que cliquer sur le bouton - vous ram�nera � la vue pr�c�dente.

Longueur maximale configurable des infobulles

Il arrive parfois que les info-bulles soient si longues que TypeScript les tronque pour les rendre plus lisibles. L'inconv�nient est que les informations les plus importantes sont souvent omises de l'info-bulle, ce qui peut �tre frustrant. Pour rem�dier � cela, le serveur de langage de TypeScript 5.9 prend en charge une dur�e d'affichage configurable, qui peut �tre d�finie dans VS Code via le param�tre js/ts.hover.maximumLength.

De plus, la nouvelle longueur par d�faut est nettement sup�rieure � la pr�c�dente. Cela signifie que dans TypeScript 5.9, vous devriez voir plus d'informations dans vos info-bulles par d�faut.

Optimisations

Instantiations de cache sur les mappeurs

Lorsque TypeScript remplace les param�tres de type par des arguments de type sp�cifiques, il peut finir par instancier � plusieurs reprises de nombreux types interm�diaires identiques. Dans des biblioth�ques complexes telles que Zod et tRPC, cela peut entra�ner � la fois des probl�mes de performances et des erreurs li�es � une profondeur d'instanciation de type excessive. Gr�ce � une modification apport�e par Mateusz Burzyński, TypeScript 5.9 est capable de mettre en cache de nombreuses instanciations interm�diaires lorsque le travail a d�j� commenc� sur une instanciation de type sp�cifique. Cela permet d'�viter beaucoup de travail et d'allocations inutiles.

�viter la cr�ation de fermetures dans fileOrDirectoryExistsUsingSource

En JavaScript, une expression de fonction alloue g�n�ralement un nouvel objet de fonction, m�me si la fonction wrapper se contente de transmettre des arguments � une autre fonction sans capturer de variables. Dans les chemins de code autour des v�rifications d'existence de fichiers, l'�quipe de Microsoft a trouv� des exemples de ces appels de fonction de transmission, m�me si les fonctions sous-jacentes ne prenaient qu'un seul argument. Compte tenu du nombre de v�rifications d'existence pouvant avoir lieu dans des projets plus importants, ils ont cit� une acc�l�ration d'environ 11 %.

Changements comportementaux notables

Modifications de lib.d.ts

Les types g�n�r�s pour le DOM peuvent avoir un impact sur la v�rification des types de votre base de code.

De plus, un changement notable est que ArrayBuffer a �t� modifi� de telle sorte qu'il n'est plus un supertype de plusieurs types TypedArray diff�rents. Cela inclut �galement les sous-types de UInt8Array, tels que Buffer de Node.js. En cons�quence, vous verrez appara�tre de nouveaux messages d'erreur tels que :

Code:

1
2
3
4
5
error TS2345: Argument of type 'ArrayBufferLike' is not assignable to parameter of type 'BufferSource'.
error TS2322: Type 'ArrayBufferLike' is not assignable to type 'ArrayBuffer'.
error TS2322: Type 'Buffer' is not assignable to type 'Uint8Array'.
error TS2322: Type 'Buffer' is not assignable to type 'ArrayBuffer'.
error TS2345: Argument of type 'Buffer' is not assignable to parameter of type 'string | Uint8Array'.

Si vous rencontrez des probl�mes avec Buffer, vous pouvez d'abord v�rifier que vous utilisez la derni�re version du package @types/node. Cela peut impliquer d'ex�cuter

Code:

npm update @types/node --save-dev

La plupart du temps, la solution consiste � sp�cifier un type de tampon sous-jacent plus pr�cis au lieu d'utiliser le type ArrayBufferLike par d�faut (c'est-�-dire en �crivant explicitement Uint8Array<ArrayBuffer> plut�t que simplement Uint8Array).

Modifications de l'inf�rence des arguments de type

Afin de corriger les � fuites � de variables de type lors de l'inf�rence, TypeScript 5.9 pourrait introduire des modifications dans les types et �ventuellement de nouvelles erreurs dans certaines bases de code. Celles-ci sont difficiles � pr�voir, mais peuvent souvent �tre corrig�es en ajoutant des arguments de type aux appels de fonctions g�n�riques.

La suite ?

R�cemment, Microsoft s'est concentr� sur le portage natif de TypeScript, qui sera finalement disponible sous le nom de TypeScript 7. Pour rappel, en mars, Microsoft a annonc� une r��criture de son langage de programmation TypeScript en le dotant d'un compilateur et d'un ensemble d'outils natifs. Cet effort vise � r�soudre les probl�mes de performance, en particulier dans les grandes bases de code, en portant le compilateur TypeScript existant de TypeScript/JavaScript au langage natif, Go.

Selon Anders Hejlsberg, architecte principal de Microsoft pour TypeScript, "l'impl�mentation native am�liorera consid�rablement le d�marrage de l'�diteur, divisera par 10 la plupart des temps de construction et r�duira substantiellement l'utilisation de la m�moire". Avec la sortie de TypeScript 5.9 RC, Microsoft annonce que vous pouvez d�j� essayer le portage natif en consultant les aper�us natifs de TypeScript, qui sont publi�s.

�tant donn� que peu de choses ont chang� depuis la version b�ta de TypeScript 5.9, Microsoft pr�voit de publier TypeScript 5.9 en tant que version candidate finale pour d�but ao�t.

Source : Annonce de Microsoft

Et vous ?

:fleche: Pensez-vous que ces am�liorationts sont cr�dibles ou pertinentes ?
:fleche: Quel est votre avis sur cette version ?

Voir aussi :

:fleche: Microsoft annonce la disponibilit� de TypeScript 5.8, apportant des v�rifications plus granulaires pour les branches dans les expressions de retour, ainsi que plusieurs autres am�liorations

:fleche: � partir de la version 23.6.0, Node.js prend en charge TypeScript par d�faut, en raison de sa popularit� croissante. TypeScript �tant la fonctionnalit� la plus demand�e sur Node.js

:fleche: WebStorm 2025.1 est disponible avec une meilleure prise en charge d'Angular et des monorepos et bien d'autres nouveaut�s et am�liorations

Images attach�es