Une compétence de haute performance pour créer des applications React 19.2 de type-safe en utilisant TypeScript 5.9 et le React Compiler.
Installer & Télécharger
1. ClawHub CLI
Le moyen le plus rapide d'installer une compétence directement depuis le registre.
npx clawhub@latest install react-typescript
2. Installation manuelle
Copiez le dossier de la compétence dans l'un de ces emplacements
~/.openclaw/skills/ <project>/skills/ Priorité : Espace de travail > Local > Intégré
3. Installation du prompt
Copiez ce prompt dans OpenClaw pour l'installer automatiquement.
Aide-moi à installer react-typescript via Clawhub. Si Clawhub n'est pas installé, installe-le d'abord (npm i -g clawhub).
Vous préférez télécharger ?
Obtenez les fichiers bruts de la compétence dans une archive ZIP.
Qu'est-ce que Compétence React TypeScript ?
Cette compétence fournit les modèles techniques définitifs pour créer des applications React modernes en utilisant les dernières fonctionnalités stables de React 19.2 et TypeScript 5.9. Elle se concentre sur la maximisation des performances via le React Compiler, qui automatise la mémoïsation et remplace les hooks manuels comme useMemo et useCallback. En intégrant cette compétence dans Openclaw Skills, les développeurs accèdent à un framework pour rédiger des composants fonctionnels et propres qui exploitent les props ref natives, le levage de métadonnées optimisé et la préservation d'état avancée.
La compétence met l'accent sur une sécurité de type stricte, utilisant les dernières fonctionnalités de TypeScript comme l'opérateur satisfies et import defer. Elle garantit que vos composants sont non seulement performants mais aussi résilients aux erreurs d'exécution courantes grâce à l'utilisation de discriminated unions et de modèles de context robustes.
Cas d'utilisation de Compétence React TypeScript
- Création d'applications React 19.2 de haute performance utilisant le React Compiler pour l'optimisation automatique.
- Développement d'une logique de formulaire type-safe et de transitions côté serveur avec useActionState et useTransition.
- Préservation de l'état dans les éléments d'interface utilisateur cachés comme les onglets ou les assistants multi-étapes via le composant Activity.
- Extraction de la logique non réactive des effects pour éviter les re-rendus inutiles avec useEffectEvent.
- Implémentation du SEO natif du document en rendant les balises title et meta directement dans la logique du composant.
Comment fonctionne Compétence React TypeScript
- Initialisez l'environnement avec une configuration TypeScript 5.9 stricte pour activer des fonctionnalités comme verbatimModuleSyntax et noUncheckedIndexedAccess.
- Configurez le React Compiler via le pipeline de build pour gérer automatiquement la mémoïsation des composants et des calculs coûteux.
- Définissez les composants comme des fonctions simples, en adoptant le modèle React 19 où ref est passé comme une prop standard.
- Gérez les données asynchrones et les recherches de context via le hook use(), permettant une logique conditionnelle plus propre dans les flux de travail Openclaw Skills.
- Implémentez des transitions d'état type-safe et des mises à jour d'interface utilisateur optimistes via les hooks natifs de React 19 pour une expérience utilisateur fluide.
Configuration de Compétence React TypeScript
Pour activer le React Compiler et les modèles TypeScript 5.9, installez d'abord les dépendances de développement nécessaires :
pnpm add -D babel-plugin-react-compiler
Configurez votre configuration Vite ou Babel pour inclure le plugin du compilateur :
// vite.config.ts
import react from "@vitejs/plugin-react"
export default {
plugins: [
react({
babel: {
plugins: ["babel-plugin-react-compiler"],
},
}),
],
}
Assurez-vous que votre tsconfig.json est réglé sur "module": "nodenext" pour supporter les fonctionnalités modernes de TypeScript.
Schéma de données et taxonomie de Compétence React TypeScript
La compétence organise les structures de données pour maximiser la sécurité de type et la prévisibilité au moment de l'exécution :
| Entité du composant | Modèle | Implémentation |
|---|---|---|
| Props | Extension Native | Utilise React.ComponentProps<"element"> pour hériter de tous les attributs HTML. |
| State | Discriminated Unions | Remplace les booléens par des objets basés sur le statut (idle, loading, error, success). |
| References | RefObject | Les éléments React 19 renvoient `RefObject<T |
| Validation | Zod v4 | S'intègre à useActionState pour la validation de formulaires type-safe et la gestion des erreurs. |
Fonctionnalités avancées de Compétence React TypeScript
- Auto-Memoization : Élimine la surcharge manuelle de useMemo/useCallback via l'analyse au moment du build.
- Activity API : Permet la préservation de l'état et le pré-rendu en arrière-plan pour les composants d'interface utilisateur cachés.
- Effect Events : Fournit un moyen de lire des valeurs réactives à l'intérieur des effects sans déclencher de nouvelles exécutions.
- Optimistic Updates : Support intégré pour un retour immédiat de l'interface utilisateur pendant les actions asynchrones via useOptimistic.
- Deferred Imports : Exploite
import deferde TypeScript 5.9 pour réduire le temps d'évaluation initial du bundle pour les modules lourds.
SKILL.md
Chargement
Compétences Openclaw associées
Vend
Le skill Vend permet aux agents IA de gérer les opérations de vente au détail, les stocks et les données clients via le framework d'automatisation Membrane.
Scaledrone
Une intégration fluide de messagerie en temps réel pour les agents AI afin de gérer les salons, les membres et les flux de communication en direct.
Intégration Weglot
Une intégration puissante pour gérer les services de traduction Weglot et automatiser les flux de travail des sites Web multilingues via une interface API managée.
Verifalia
Une compétence de vérification d'e-mails haute performance qui valide la délivrabilité et réduit les taux de rebond via des flux de travail Membrane automatisés.
Compétence Strapi AI
Une intégration puissante qui permet aux agents IA de gérer le contenu, les enregistrements et les flux de travail Strapi via une authentification automatisée et des actions pré-construites.
QADeputy AI Skill
Une compétence d'agent AI complète pour gérer les flux de travail d'assurance qualité QADeputy et les opérations des équipes de test via le framework Membrane.
Zuplo
Une intégration de passerelle API programmable qui permet aux agents d'IA de gérer le trafic API, l'authentification et la logique personnalisée via un proxy sécurisé.
En vedette*
