[Typescript] Step1 & 2 for converting a js app to ts

1. Compiling in "loose mode"

  • Start with all tests passing
  • Rename all .js to .ts, allowing implicit any
  • Fix only things that are not type-checking, or causing compile errors
  • Be careful to avoid changing behavior of function
  • Get test passing again.
# rename all JSX files in src/ to TSX
find src -name '*.jsx' -exec bash -c 'git mv "$0" "${0%.jsx}.tsx"' "{}" \;
# rename all JS files in src/ to TS
find src -name '*.js' -exec bash -c 'git mv "$0" "${0%.js}.ts"' "{}" \;
# rename all JSX files in src/ to TSX
find tests -name '*.jsx' -exec bash -c 'git mv "$0" "${0%.jsx}.tsx"' "{}" \;
# rename all JSX files in src/ to TSX
find tests -name '*.jsx.snap' -exec bash -c 'git mv "$0" "${0%.jsx.snap}.tsx.snap"' "{}" \;
# rename all JS files in tests/ to TS
find tests -name '*.js' -exec bash -c 'git mv "$0" "${0%.js}.ts"' "{}" \;
and don't forget to make this small change to index.html
```diff
--- a/index.html
+++ b/index.html
@@ -8,6 +8,6 @@
   </head>
   <body class="font-sans antialiased h-screen">
     <div id="appContainer" class="w-full h-full"></div>
-    <script src="src/index.js" type="text/javascript"></script>
+    <script src="src/index.ts" type="text/javascript"></script>
   </body>
 </html>
```
and this change to tsconfig for step 1.

2. Explicit Any

  • Start with tests passing
  • Ban implicit any

"noImplicityAny": true,

  • Where possible, provide a specific and appropriate type
    • Import types for dependencies from DefinitelyTypes
    • otherwise explicit any
  • Get tests passing again
```diff
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -3,9 +3,10 @@
     "target": "ES2018",
     "allowJs": true,
     "module": "commonjs" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,
-    "strict": true /* Enable all strict type-checking options. */,
+    // "strict": true /* Enable all strict type-checking options. */,
     "forceConsistentCasingInFileNames": true,
     "noEmit": true,
+    "noImplicitAny": false,
     "outDir": "dist",
     "declaration": true,
     "jsx": "react",
```

 

See this commit example: https://github.com/zhentian-wan/professional-ts/commit/158d8032edf0dc71033fb9b1b32e8022671b0836

 

posted @   Zhentiw  阅读(59)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· AI技术革命,工作效率10个最佳AI工具
历史上的今天:
2019-08-29 [React + GraphQL] Use useLazyQuery to manually execute a query with Apollo React Hooks
2019-08-29 [CSS] Conditionally Assign Style to a Parent Element with Focus-Within Pseudo-class
2019-08-29 [Angular 8] Calculate and Measure Performance budgets with the Angular CLI
2019-08-29 [Angular 8] Custom Route Preloading with ngx-quicklink and Angular
2019-08-29 [Angular 8] Implement a Custom Preloading Strategy with Angular
2019-08-29 [Angular 8] Lazy loading with dynamic loading syntax
2018-08-29 [React] Prevent Unnecessary Rerenders of Compound Components using React Context
点击右上角即可分享
微信分享提示