TypeScript Review and Q&A

In notebook:
FrontEndMasters Intermediate React
Created at:
2019-06-25
Updated:
2019-08-15
Tags:
React libraries JavaScript

https://frontendmasters.com/courses/intermediate-react-v2/typescript-review-and-q-a/

App.js

we don't have to change anything here, since we typed all the modules it was using.

Finally:

  --- a/src/index.html
+++ b/src/index.html
@@ -11,6 +11,6 @@
   <body>
     <div id="modal"></div>
     <div id="root">not rendered</div>
-    <script src="./App.js"></script>
+    <script src="./App.tsx"></script>
   </body>
 </html>

Question: should interfaces held in a separate file?

It depends on teams. For props and state, you should definitely put them in the same file. It's like documentation of the code.

If it's used across several files, then it can make sense to put them in a separate file. Some people think that definitions and code should not belong in the same files.

finally, add typecheck to package.json

for people who don't use VSCode but Vim etc.

  --- a/package.json
+++ b/package.json
"scripts": {
  "typecheck": "tsc --noEmit"
}

no you can locally or in a CI

npm run typecheck before you commit.

When to use TypeScript

If he writes a project that he intends to maintain for more than a week, he will use TypeScript. Long term productivity vs short term productivity. It forces you to think through your code.