> ## 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 von JavaScript nach TypeScript

> JavaScript-Codebasen nach TypeScript migrieren, um die Typsicherheit und die Entwicklererfahrung zu verbessern

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">
  ## Überblick
</div>

Devin kann dabei helfen, JavaScript-Codebasen auf TypeScript umzustellen, Typensicherheit zu erhöhen, die Wartbarkeit des Codes zu verbessern und die Developer Experience zu steigern. Egal, ob du eine kleine Bibliothek oder eine groß angelegte Anwendung migrierst – Devin kann systematisch Typannotationen hinzufügen, Typfehler beheben und sicherstellen, dass deine Codebasis das volle Potenzial von TypeScript ausschöpft.

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

<div id="why-migrate-to-typescript">
  ## Warum auf TypeScript umsteigen?
</div>

<div id="developer-experience-benefits">
  ### Vorteile für die Developer Experience
</div>

* **Typsicherheit**: Fehler bereits zur Compile-Zeit statt erst zur Laufzeit erkennen
* **Bessere IDE-Unterstützung**: Verbesserte Autovervollständigung, Refactoring und Navigation
* **Selbstdokumentierender Code**: Typen dienen als Inline-Dokumentation
* **Einfacheres Refactoring**: Änderungen dank Typprüfungen sicher vornehmen

<div id="code-quality-improvements">
  ### Verbesserungen der Codequalität
</div>

* **Weniger Bugs**: Das Typsystem verhindert häufige JavaScript-Fehler
* **Bessere Wartbarkeit**: Klare Schnittstellen und Verträge zwischen Modulen
* **Verbesserte Zusammenarbeit**: Typen machen die Absichten im Code für Teammitglieder explizit
* **Leistungsfähigeres Tooling**: Zugriff auf erweiterte statische Analyse und Linting

<div id="common-migration-scenarios">
  ## Typische Migrationsszenarien
</div>

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

* Dateien schrittweise von `.js` auf `.ts` umstellen
* `allowJs` und `checkJs` für gemischte Codebasen verwenden
* Module mit hohem Nutzen zuerst priorisieren
* Während der Umstellung die Rückwärtskompatibilität sicherstellen

<div id="library-and-framework-migrations">
  ### Bibliotheks- und Framework-Migrationen
</div>

* React-Komponenten mit korrekten Prop-Typen
* Node.js-Backends mit typisierten APIs
* Express-Anwendungen mit typisierter Middleware
* Vue.js-Anwendungen mit TypeScript-Unterstützung

<div id="configuration-and-tooling">
  ### Konfiguration und Tooling
</div>

* Richte `tsconfig.json` mit passenden Compiler-Optionen ein
* Konfiguriere Build-Tools (Webpack, Vite usw.)
* Aktualisiere Test-Frameworks für TypeScript
* Integriere in vorhandene CI/CD-Pipelines

<div id="additional-resources">
  ## Zusätzliche Ressourcen
</div>

* [TypeScript-Dokumentation](https://www.typescriptlang.org/docs/)
* [TypeScript-Migrationsleitfaden](https://www.typescriptlang.org/docs/handbook/migrating-from-javascript.html)
* [Devin Playbooks](/de/product-guides/creating-playbooks) – Erstellen Sie wiederverwendbare Migrationsworkflows
* [Devin Knowledge](/de/product-guides/knowledge) – Speichern Sie projektspezifische Typmuster

<div id="related-use-cases">
  ## Verwandte Anwendungsfälle
</div>

* [Testen & Refactoring](/de/use-cases/testing-refactoring)
* [Migration & Modernisierung](/de/use-cases/migration-modernization)