本文へスキップ

TypeScript移行チートシート

このチートシートは、大規模なコードベースをプレーンなJSまたはFlowからTypeScriptに移行する際の、実際の事例から得られたアドバイスとユーティリティをまとめたものです。TypeScriptへの移行を説得しようとするものではありませんが、企業が移行後の経験について提供するわずかな統計情報を収集しています。

⚠️ このチートシートは非常に新しく、皆様からのご協力が必要です。的確なアドバイス、結果、最新のコンテンツを歓迎いたします。

前提条件​

JSからの移行に関するTypeScript公式ガイドをお読みください。また、React変換ガイドにも精通している必要があります。

一般的な変換アプローチ​

  • レベル0：TypeScriptを使用せず、JSDocを使用する
  • レベル1A：主にJavaScript、徐々に厳格なTypeScript
  • レベル1B：最初からTypeScriptへの完全な名前変更
  • レベル2：厳格なTypeScript
    • Microsoftのdts-genを使用して、型定義されていないファイルの.d.tsファイルを生成します。このSOの回答では、このトピックについて詳しく説明しています。
    • アンビエント宣言にはdeclareキーワードを使用します - ライブラリの宣言をインラインで修正するには、宣言のマージを参照してください。

成功した企業が採用したその他のヒント/アプローチ

  • 型定義がないライブラリのコンパイラエラーには@ts-expect-errorを使用します。
  • TSLintではなくESLintを選択する（出典：ESLintおよびTSロードマップ）。このツールを使用してTSLintをESLintに変換できます。
  • 新しいコードは常にTypeScriptで記述する必要があります。例外はありません。既存のコードについては：JavaScriptコードを変更する必要があるタスクの場合、コードを書き直す必要があります。（出典：Hootsuite)
Webpackのヒント
  • Webpackローダー：awesome-typescript-loader対ts-loader？（これについてはコミュニティで意見が分かれているが、awesomeの見解を読んでください）
  • Webpack設定
module.exports = {

resolve: {
-    extensions: ['.js', '.jsx']
+    extensions: ['.ts', '.tsx', '.js', '.jsx']
},

// Source maps support ('inline-source-map' also works)
devtool: 'source-map',

// Add the loader for .ts files.
module: {
  loaders: [{
-       test: /\.jsx?$/,
-       loader: 'babel-loader',
-       exclude: [/node_modules/],
+       test: /\.(t|j)sx?$/,
+       loader: ['awesome-typescript-loader?module=es6'],
+       exclude: [/node_modules/]
+   }, {
+       test: /\.js$/,
+       loader: 'source-map-loader',
+       enforce: 'pre'
  }]
}
};

ts-loaderとサードパーティライブラリに関する特別な注意：https://twitter.com/acemarke/status/1091150384184229888

移行に関する学術研究​

注：経験的ソフトウェアエンジニアリングは望ましいですが、非常に困難です。優しくしてください。しかし、質の高い研究を見つけた場合は共有してください！

私たちの主要な発見は、両方の静的型システムが重要な割合のパブリックバグを見つけることです。Flow 0.30とTypeScript 2.0の両方で、15％のバグを検出することに成功しました！

私が間違っていたこと：型とGitHubにおけるプログラミング言語とコード品質に関する大規模研究も参照してください。

著名な企業とオープンソースによるその他の移行事例​

オープンソース

移行結果​

  • Hootsuiteでは、本番デプロイの回数が2倍になりました。
  • Tinyでは、意図しないグローバル変数が発見されました。
  • Tinyでは、間違った関数呼び出しが発見されました。
  • Tinyでは、滅多に使われず、バグがあり、テストされていないコードが発見されました。