TypeScript et JavaScript

Kiro offre de puissantes capacités de développement assisté par l'IA pour les projets TypeScript et JavaScript, vous aidant à écrire, déboguer et maintenir du code plus efficacement.

Avant de vous lancer dans le développement TypeScript et JavaScript avec Kiro, assurez-vous d'avoir :

• Node.js : Installez la dernière version pour votre plateforme
• TypeScript : Installez-le globalement ou localement dans votre projet
• Gestionnaire de paquets : npm (inclus avec Node.js) ou votre gestionnaire de paquets préféré
• Git : Pour le contrôle de version et la collaboration

Pour améliorer votre expérience de développement TypeScript et JavaScript avec Kiro, envisagez d'installer ces extensions utiles :

• ESLint - Rétroaction en temps réel sur la qualité du code et l'analyse statique pour JavaScript/TypeScript
• Prettier - Code Formatter - Formatage automatique du code pour un style cohérent dans votre projet
• Auto Rename Tag - Renomme automatiquement les balises HTML/JSX associées lors de l'édition
• JavaScript (ES6) code snippets - Fournit des extraits de code utiles pour le développement JavaScript et TypeScript moderne

Kiro peut vous aider à configurer et à maintenir des fichiers de configuration pour vos projets TypeScript et JavaScript, ainsi qu'à organiser votre projet selon les meilleures pratiques de Kiro.

Par exemple, vous pouvez demander à Kiro :

"Create a tsconfig.json for a React TypeScript project using ES6 modules"
"Update my ESLint config to enforce React best practices"
"Set up a monorepo structure for my frontend and backend TypeScript code"

Kiro peut analyser votre code TypeScript et JavaScript pour identifier les problèmes et suggérer des améliorations :

• Analyse de la qualité du code : Demandez à Kiro de réviser votre code pour détecter les bugs potentiels, les problèmes de performance ou de style.
• Assistance à la refactorisation : Obtenez de l'aide pour extraire des fonctions, renommer des variables ou restructurer du code.
• Inférence de types : Kiro peut suggérer des types TypeScript en fonction de votre code JavaScript.

Exemples de requêtes :

"Analyze this function for potential bugs"
"Refactor this code to use async/await instead of promises"
"Convert this JavaScript file to TypeScript with proper types"

Lorsque vous rencontrez des erreurs dans votre code TypeScript ou JavaScript :

• Explication des erreurs : Kiro peut expliquer les messages d'erreur cryptiques en langage clair
• Suggestions de solutions : Kiro peut suggérer des correctifs concrets pour les erreurs courantes
• Débogage à l'exécution : Kiro peut vous aider à configurer des configurations de débogage

Exemples :

"Explain this TypeScript error: TS2339: Property 'value' does not exist on type 'never'"
"Help me debug this React useEffect infinite loop"

Le Steering vous permet de fournir à Kiro un contexte et des directives spécifiques au projet. Kiro peut générer des fichiers de Steering que vous pouvez raffiner :

1. Résumé du produit (product.md) - Contient des informations sur le produit, son objectif et ses fonctionnalités clés
2. Pile technique (tech.md) - Détaille les technologies, les frameworks et les directives de développement
3. Structure du projet (structure.md) - Fournit des informations sur la façon dont le projet est organisé

Pour les projets TypeScript et JavaScript, vous pouvez créer des fichiers de Steering personnalisés supplémentaires pour fournir des directives plus spécifiques.

Utilisez les instructions suivantes pour ajouter de nouveaux documents de Steering à votre projet.

Pour ajouter de nouveaux documents de Steering

1. Accédez à la vue Kiro dans la barre latérale.
2. Dans la section Agent Steering, choisissez le bouton + pour créer un nouveau fichier de Steering.
3. Entrez un nom pour votre fichier avec un titre descriptif.
4. Ajoutez votre contenu de Steering personnalisé en suivant les conventions markdown.

Les fichiers de Steering personnalisés sont stockés dans le répertoire .kiro/steering/ et sont automatiquement reconnus par Kiro lors des interactions.

Vous pouvez définir des conventions de nommage personnalisées, une structure de fichiers ou des pratiques pour votre projet.

Vous pouvez créer un fichier de Steering js-conventions.md pour définir les normes de codage de votre équipe :

# TypeScript/JavaScript Conventions

## Naming Conventions
- Use camelCase for variables and functions
- Use PascalCase for classes and React components
- Use UPPER_SNAKE_CASE for constants

## File Structure
- One component per file
- Group related components in folders
- Use index.ts files for exports

## TypeScript Practices
- Prefer interfaces over types for public APIs
- Use explicit return types for exported functions
- Avoid using 'any' type

Pour les projets React, vous pouvez créer un fichier de Steering react-patterns.md :

# React Development Guidelines

## Component Structure
- Use functional components with hooks
- Separate business logic from UI components
- Follow the container/presentational pattern

## State Management
- Use React Context for global state
- Prefer useState for local component state
- Use useReducer for complex state logic

## Performance Optimization
- Memoize expensive calculations with useMemo
- Prevent unnecessary re-renders with React.memo
- Use useCallback for event handlers passed to child components

Ces fichiers de Steering aident Kiro à générer du code qui respecte les conventions et les meilleures pratiques spécifiques de votre équipe.

Les Agent Hooks de Kiro peuvent automatiser les tâches courantes de développement TypeScript et JavaScript :

1. Accédez à la section Agent Hooks dans le panneau Kiro
2. Cliquez sur le bouton + pour créer un nouveau Hook
3. Définissez le flux de travail du Hook en langage naturel

Voici quelques exemples de Hooks :

Vous pouvez générer automatiquement des tests lorsque vous enregistrez un fichier TypeScript ou JavaScript :

"Create a hook that generates Jest tests when I save a new component"

Vous pouvez exécuter la vérification de types TypeScript en arrière-plan :

"Set up a hook to run TypeScript type checking when I save files"

Vous pouvez maintenir vos dépendances à jour :

"Create a hook that checks for outdated npm packages"

When a JavaScript or TypeScript file is saved:
1. Run ESLint with auto-fix on the file
2. Report any remaining issues that couldn't be fixed automatically
3. Suggest fixes for complex issues

When a React component file is saved:
1. Extract the component's props interface
2. Update or create a documentation comment above the component
3. Generate usage examples based on the props
4. Update the component's README.md if it exists

Le support de Kiro pour les serveurs Model Context Protocol (MCP) améliore votre expérience de développement TypeScript et JavaScript en fournissant des outils et des capacités spécialisés. Pour un guide complet sur la configuration et l'utilisation du MCP, consultez la documentation MCP.

Le serveur AWS Labs Frontend MCP fournit des outils spécialisés pour le développement d'applications Web modernes, offrant une documentation et des conseils complets pour les applications React :

{
  "mcpServers": {
    "frontend": {
      "command": "uvx",
      "args": ["awslabs.frontend-mcp-server@latest"],
      "env": {
        "FASTMCP_LOG_LEVEL": "ERROR"
      }
    }
  }
}

Exemple d'utilisation :

"Get essential knowledge for React development"
"Help me troubleshoot this React component issue"
"Show me best practices for modern React applications"

Explorez d'autres serveurs MCP dans les collections AWS MCP Servers et Awesome MCP Servers.

Kiro offre un accès intégré à la documentation pour JavaScript, TypeScript et les frameworks populaires grâce au système de référence #docs. Cela vous permet d'intégrer rapidement la documentation pertinente dans vos conversations avec Kiro. Tapez simplement #docs dans le clavardage et sélectionnez parmi les sources de documentation disponibles, comme :

• #Node.js - Documentation du moteur d'exécution Node.js
• #TypeScript - Documentation du langage TypeScript
• #React - Documentation de la bibliothèque React
• #Svelte - Documentation du framework Svelte
• #Express - Documentation du framework Express.js
• #Vue.js - Documentation du framework Vue.js
• #Alpine.js - Documentation du framework Alpine.js

Exemple d'utilisation :

"#TypeScript How do I create a generic function?"
"#React What's the best way to handle form state?"

Vous pouvez également référencer des URL de documentation spécifiques en utilisant #URL :

"#URL https://react.dev/reference/react/useState"

Lorsque vous rencontrez des problèmes, Kiro peut vous aider à les diagnostiquer et à les résoudre :

1. Clavardage en ligne :
   • Tapez Cmd/Ctrl + I pour ouvrir le clavardage en ligne.
   • Demandez à Kiro de vous aider à déboguer votre code en langage naturel.
2. Ajouter au clavardage :
   • Tapez Cmd/Ctrl + L pour ajouter le fichier actuel au clavardage.
   • Demandez à Kiro de vous aider à déboguer votre code en langage naturel.
3. Correction rapide :
   • Survolez une erreur ou un avertissement, puis sélectionnez Quick fix et Ask Kiro.
   • Kiro ajoutera automatiquement le code au clavardage et commencera le débogage.

• Documentation TypeScript
• Documentation Web JavaScript MDN
• Documentation Node.js