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

# JavaScript から TypeScript への移行

> 型安全性と開発者体験を向上させるために JavaScript コードベースを TypeScript に移行する

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">
  ## 概要
</div>

Devin は、JavaScript コードベースの TypeScript への移行を支援します。型安全性を高め、コードの保守性を向上させ、開発者体験を改善できます。小規模なライブラリでも大規模なアプリケーションでも、Devin は体系的に型注釈を追加し、型エラーを解消し、コードベースが TypeScript の持つ可能性を最大限に引き出せるようにします。

<iframe width="840" height="473" src="https://www.youtube.com/embed/p_cvVcm0Zhk" title="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">
  ## なぜ TypeScript に移行するのか？
</div>

<div id="developer-experience-benefits">
  ### 開発者体験のメリット
</div>

* **型安全性**: 実行時ではなくコンパイル時にエラーを検出できる
* **優れた IDE サポート**: コード補完、リファクタリング、ナビゲーション機能が強化される
* **自己文書化コード**: 型がインラインのドキュメントとして機能する
* **リファクタリングが容易**: 型チェックにより安心して変更できる

<div id="code-quality-improvements">
  ### コード品質の向上
</div>

* **バグの削減**: 型システムにより、一般的な JavaScript のエラーを防ぐ
* **保守性の向上**: モジュール間のインターフェースやコントラクトが明確になる
* **コラボレーションの改善**: 型によってコードの意図がチームメンバーに明示される
* **ツールの強化**: 高度な静的解析やリンティングを利用可能になる

<div id="common-migration-scenarios">
  ## よくある移行シナリオ
</div>

<div id="gradual-migration">
  ### 段階的な移行
</div>

* `.js` から `.ts` へのファイル変換を段階的に行う
* 混在したコードベースでは `allowJs` と `checkJs` を使用する
* 重要度の高いモジュールから優先的に対応する
* 移行期間中は後方互換性を維持する

<div id="library-and-framework-migrations">
  ### ライブラリおよびフレームワークのマイグレーション
</div>

* 適切な props 型定義を備えた React コンポーネント
* 型付き API を備えた Node.js バックエンド
* 型付きミドルウェアを備えた Express アプリケーション
* TypeScript 対応の Vue.js アプリケーション

<div id="configuration-and-tooling">
  ### 設定とツール
</div>

* 適切なコンパイラオプションを指定して `tsconfig.json` を設定する
* ビルドツール（Webpack、Vite など）を設定する
* テストフレームワークを TypeScript 向けに更新する
* 既存の CI/CD パイプラインに統合する

<div id="additional-resources">
  ## 追加リソース
</div>

* [TypeScript ドキュメント](https://www.typescriptlang.org/docs/)
* [TypeScript 移行ガイド](https://www.typescriptlang.org/docs/handbook/migrating-from-javascript.html)
* [Devin Playbooks](/ja/product-guides/creating-playbooks) - 再利用可能な移行ワークフローを作成
* [Devin Knowledge](/ja/product-guides/knowledge) - プロジェクト固有の型パターンを蓄積

<div id="related-use-cases">
  ## 関連ユースケース
</div>

* [テストとリファクタリング](/ja/use-cases/testing-refactoring)
* [移行とモダナイゼーション](/ja/use-cases/migration-modernization)