Hébergement site web Tunisie , serveur vps cloud – Zenhosting

final-logo

Découvrez nos offres d'hébergement Cloud

Hébergement Web Simple, rapide et sécurisé. Confiez-nous l’hébergement de votre site web dès maintenant.

hébergement web

Comment typer une application React avec TypeScript

react+js+typescript

TypeScript est un superset de JavaScript permettant de profiter des bénéfices d’un langage typé statiquement : remonter rapidement des erreurs de structure directement dans votre IDE, gagner du temps grâce à une auto-complétion dont il est difficile de se passer ensuite, fournir une sorte de documentation sur les structures de données utilisées dans le code… et cette liste de supers avantages n’est pas exhaustive !

Typer un composant React

Certains packages npm incluent leur types directement dans le package principal. Ce n’est pas le cas de React. Vous devrez donc installer @types/react et @types/react-dom pour profiter de la puissance de TypeScript avec React.

reactjs+typer+typescript

Notez que si vous initialisez un useState sans spécifier le type, sa valeur sera quand même devinée par TypeScript. Puisqu’ici on donne un tableau vide comme valeur par défaut, il est nécessaire de le typer explicitement :

react+js+typer+typescript

Typer un Styled component

Comme pour React, il sera nécessaire d’installer @types/styled-components pour pouvoir typer les props de vos styled components en toute sérénité :

reactjs+styled+component

Typer une page Next.js

Si vous créez un composant page pour Next.js, utilisez NextPage de la même manière que vous utiliseriez React.FC. Tout simplement.

reactjs+next+js

Ainsi, vous profiterez de l’auto-complétion et de la vérification des types pour toutes les méthodes spécifiques aux pages Next.js. Peut être même que vous découvrirez d’obscures fonctions super pratiques grâce à l’auto-complétion !

Typer un composant

Par défaut une fonction qui renvoit du JSX sera considéré comme un composant.

type Props: {
  start: number
}
function Counter ({start}: Props) {
  return <div>Hello World</div>
} 

Si votre composant peut recevoir des enfants, alors vous pouvez utiliser le type PropsWithChildren

type Props: PropsWithChildren<{ 

        start: number 

}>

Les hooks

Les hooks sont utilisable avec un générique pour indiquer le type de valeur qu’ils vont gérer mais il est inféré de base par les paramètres.

const [n, setN] = useState(3) // Le type sera automatiquement un nombre 

const [i, setI] = useState<number>() // Le type sera number | undefined

Pour les ref il faudra penser à mettre une valeur null par défaut pour qu’il puisse être inclu dans la prop ref

const ref = useRef<HTMLButtonElement>(null)

On peut aussi utiliser le type RefObject<T> pour représenter un objet de type ref.

Typer les composants

Vous avez plusieurs types qui sont intéréssant en connaitre en fonction de certaines situation.

  • ReactNode, permet de représenter un noeud (un morceau de JSX, une chaine, null ou undefined)
  • JSX.IntrinsicElements est un type interne qui permet de représenter tous les éléments HTML acceptés par React. On peut par exemple utiliser keyof JSX.IntrinsicElements si on veut qu’une props accepte un tag HTML.
  • ComponentType<Props> représente un composant (une fonction ou une class) qui pourra être utilisé comme élément JSX. On peut ajouter un générique pour définir les props qui sont attendues

 

 

Cet Article est utile ? Votez
0 / 5 2

Your page rank:

Facebook
Twitter
LinkedIn
Pinterest

Plus à explorer

wordpress
Wordpress

Comment gérer plusieurs sites WordPress ?

Vous essayez de gérer plusieurs sites WordPress ? Vous recherchez une solution facile ? Heureusement, il existe plusieurs outils de gestion WordPress qui font de la

securtié wordpress
Security

Comment améliorer la sécurité de WordPress ?

WordPress est le système de gestion de contenu (CMS) le plus populaire, avec 43,2 % de tous les sites Web exécutés sur son logiciel. Malheureusement, sa popularité attire toutes

redishosting
Hébergement site web

Comment améliorer les performances de wordpress avec Redis

Hautes performances, stabilité,  Vitesse rapide et excellent support ont toujours été les principaux ingrédients de l’hébergement WordPress géré par Zenhosting. Notre plate-forme offre une pile

 20% Réduction

Bénéficiez de 20 % de réduction pour votre 1 achat
Confirmer
*Offre valable uniquement pour les nouveaux inscrits
close-link

Mailsuite fonctionne sur Tous vos appareils

Prenez votre communication avec vous en installant des applications complètes sur votre appareil Android, iOS windows et MacOs

Mailsuite fonctionne sur Tous vos appareils

Prenez votre communication avec vous en installant des applications complètes sur votre appareil Android, iOS windows et MacOs