> ## Documentation Index
> Fetch the complete documentation index at: https://docs.devinenterprise.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Migration de JavaScript vers TypeScript

> Migrer des bases de code JavaScript vers TypeScript pour améliorer la sécurité des types et l'expérience des développeurs

export const PromptBlock = ({children, type, agent, intent, playbookId}) => {
  var utm = 'utm_source=docs&utm_medium=use-case-gallery&utm_campaign=prompt-block';
  var tag = 'docs-use-case-gallery';
  var agentParams = (agent ? '&agent=' + agent : '') + (intent ? '&intent=' + intent : '') + (playbookId ? '&playbookId=' + playbookId : '');
  var label = type === 'schedule' ? 'Schedule in Devin' : type === 'playbook' ? 'Create Playbook' : type === 'knowledge' ? 'Add to Knowledge' : agent === 'advanced' ? 'Try in Devin' : agent === 'dana' ? 'Try in Dana' : agent === 'ada' ? 'Try in Ask Devin' : 'Try in Devin';
  var buildUrl = function (text) {
    var encoded = encodeURIComponent(text);
    if (type === 'schedule') return 'https://app.devin.ai/settings/schedules/create?' + utm + agentParams + '&prompt=' + encoded;
    if (type === 'playbook') return 'https://app.devin.ai/settings/playbooks/create?' + utm + '&body=' + encoded;
    if (type === 'knowledge') return 'https://app.devin.ai/knowledge?' + utm + '&body=' + encoded;
    if (agent === 'ada') return 'https://app.devin.ai/search?' + utm + '&noSubmit=true&prompt=' + encoded;
    return 'https://app.devin.ai/?tags=' + tag + '&' + utm + agentParams + '&prompt=' + encoded;
  };
  const ref = React.useRef(null);
  const [href, setHref] = React.useState('#');
  React.useEffect(() => {
    if (!ref.current) return;
    var codeEl = ref.current.querySelector('pre code');
    if (codeEl) {
      var text = codeEl.textContent.trim();
      if (text) setHref(buildUrl(text));
    }
    var header = ref.current.querySelector('[data-component-part="code-block-header"]');
    if (header && !header.querySelector('.prompt-block-devin-link')) {
      var link = document.createElement('a');
      link.href = href;
      link.target = '_blank';
      link.rel = 'noopener noreferrer';
      link.className = 'prompt-block-devin-link';
      link.style.cssText = 'display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:#fff;font-size:11px;font-weight:500;padding:4px 10px;border-radius:6px;white-space:nowrap;background:#317CFF;transition:background 0.2s;margin-left:8px;';
      link.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg> ' + label;
      link.onmouseenter = function () {
        link.style.background = '#2968D9';
      };
      link.onmouseleave = function () {
        link.style.background = '#317CFF';
      };
      header.appendChild(link);
    }
    var existingLink = ref.current.querySelector('.prompt-block-devin-link');
    if (existingLink && href !== '#') existingLink.href = href;
  });
  return <div className="prompt-block" ref={ref}>{children}</div>;
};

<div id="overview">
  ## Vue d’ensemble
</div>

Devin peut aider à migrer des bases de code JavaScript vers TypeScript, en renforçant la sécurité de typage, en améliorant la maintenabilité du code et en optimisant l’expérience des développeurs. Que vous convertissiez une petite bibliothèque ou une application à grande échelle, Devin peut systématiquement ajouter des annotations de type, résoudre les erreurs de type et s’assurer que votre base de code exploite tout le potentiel de TypeScript.

<iframe width="840" height="473" src="https://www.youtube.com/embed/p_cvVcm0Zhk" title="Lecteur vidéo YouTube" className="max-w-full" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen />

<div id="why-migrate-to-typescript">
  ## Pourquoi migrer vers TypeScript ?
</div>

<div id="developer-experience-benefits">
  ### Avantages pour l’expérience développeur
</div>

* **Sécurité de typage** : Interceptez les erreurs à la compilation plutôt qu’à l’exécution
* **Meilleure prise en charge par l’IDE** : Autocomplétion, refactorisation et navigation améliorées
* **Code auto-documenté** : Les types servent de documentation intégrée
* **Refactorisation facilitée** : Modifiez le code en toute confiance grâce à la vérification des types

<div id="code-quality-improvements">
  ### Améliorations de la qualité du code
</div>

* **Réduction des bogues** : le système de types prévient les erreurs JavaScript les plus courantes
* **Meilleure maintenabilité** : des interfaces et contrats clairs entre les modules
* **Collaboration facilitée** : les types rendent explicites les intentions du code pour les membres de l'équipe
* **Outillage amélioré** : accès à des outils d'analyse statique et de linting avancés

<div id="common-migration-scenarios">
  ## Scénarios de migration courants
</div>

<div id="gradual-migration">
  ### Migration progressive
</div>

* Convertir progressivement les fichiers de `.js` en `.ts`
* Utiliser `allowJs` et `checkJs` pour les bases de code mixtes
* Donner la priorité aux modules à forte valeur ajoutée
* Maintenir la rétrocompatibilité pendant la transition

<div id="library-and-framework-migrations">
  ### Migrations de bibliothèques et de frameworks
</div>

* Composants React avec des props correctement typées
* Back-ends Node.js avec des API typées
* Applications Express avec du middleware typé
* Applications Vue.js avec prise en charge de TypeScript

<div id="configuration-and-tooling">
  ### Configuration et outils
</div>

* Configurer `tsconfig.json` avec des options de compilation appropriées
* Configurer les outils de build (Webpack, Vite, etc.)
* Mettre à jour les frameworks de test pour TypeScript
* Intégrer aux pipelines CI/CD existants

<div id="additional-resources">
  ## Ressources supplémentaires
</div>

* [Documentation de TypeScript](https://www.typescriptlang.org/docs/)
* [Guide de migration vers TypeScript](https://www.typescriptlang.org/docs/handbook/migrating-from-javascript.html)
* [Playbooks Devin](/fr/product-guides/creating-playbooks) - Créez des workflows de migration réutilisables
* [Devin Knowledge](/fr/product-guides/knowledge) - Stockez des modèles de types propres au projet

<div id="related-use-cases">
  ## Cas d'utilisation connexes
</div>

* [Tests et refactorisation](/fr/use-cases/testing-refactoring)
* [Migration et modernisation](/fr/use-cases/migration-modernization)