How to Migrate your React Project to TypeScript

• react-app

  3 2 5.5 JavaScript

  

  This is in our handleChange function that’s attached to our element. When our user types in the , the event is passed to the handleChange function and becomes the value for our setAffirmation hook. We know that we don’t want the type of our event to be any. This is a journal app and that value is text, or more specifically, a string.

  We need to let the application know that we don’t want it to accept any other type. We’re going to give our function a type of React.ChangeEventHandler since we have access to React.ChangeEventHandler through @types/react. This is what it will look like if you use inline types:
  

  const handleChange: React.ChangeEventHandler<HTMLTextAreaElement> 
      = (e) => {
          setAffirmation(e.target.value)
      }
  

  Enter fullscreen mode Exit fullscreen mode

  The next update we need to make is in our handleSubmit function:
  

   const handleSubmit = (e) => {
          e.preventDefault()
          setFinalAffirmation(true)
      }
  

  Enter fullscreen mode Exit fullscreen mode

  If we hover over the e, we get the same message we did above. You might be tempted to type it in the same way, but let’s think about what’s happening here for a second. We’re submitting a completed form here. If we head over to the React TypeScript Cheatsheet, we’ll find an event type of FormEvent, which they describe as an “Event that occurs whenever a form or form element gets/loses focus, a form element value is changed or the form is submitted.” That sounds like a good choice.
  

  /* submit is a form event */
  const handleSubmit = (e: 
     React.FormEvent<HTMLFormElement>) => {
          /* prevent page from refreshing */
          e.preventDefault()
          setFinalAffirmation(true)
      }
  

  Enter fullscreen mode Exit fullscreen mode

  We add a comment there for clarity that submit is a form event, and then we specify the type as an HTMLFormElement.

  We’ll move on to the last one in this example.

  Around line 57, we can see that TypeScript is complaining about socketRef.current. If we hover over it, we get this message:
  

  Because we added the WebSocket types package, @types/websocket, we have access to a WebSocket type. However, we don’t set the type on line 57. The actual problem is with const socketRef = useRef(null).

  We need to let TypeScript know that we’re looking at a WebSocket or null: const socketRef = useRef(null).

  With that last update, we no longer have TypeScript complaining in this file. That doesn’t mean that there aren’t other updates that we can make. If you hover over other variables or functions, we can see what TypeScript is inferring.

  

  To complete this migration, we need to update the .js files to .tsx. But the nice thing is that we don’t have to do that all at once. For now, this is where we’ll leave it.

  Learn More About TypeScript

  There’s a lot to learn about TypeScript. Here are some resources I've found helpful:

  • TypeScript Handbook
  • Totally TypeScript
  • React + TypeScript Cheatsheets

  And check out the Bonus Section of Sandra’s post on how to Build a To-do List App with Pinia and Vue 3.

  To access the code for this blog post, select the feature/typescript branch from the React App GitHub Repository. If you have any thoughts, comments, or questions, please drop a comment in our General Discussion category, or if you want to say hey, drop your intro in our intro thread.

• react

  40 39,159 8.1 JavaScript

  Cheatsheets for experienced React developers getting started with TypeScript (by typescript-cheatsheets)

  

  This is in our handleChange function that’s attached to our element. When our user types in the , the event is passed to the handleChange function and becomes the value for our setAffirmation hook. We know that we don’t want the type of our event to be any. This is a journal app and that value is text, or more specifically, a string.

  We need to let the application know that we don’t want it to accept any other type. We’re going to give our function a type of React.ChangeEventHandler since we have access to React.ChangeEventHandler through @types/react. This is what it will look like if you use inline types:
  

  const handleChange: React.ChangeEventHandler<HTMLTextAreaElement> 
      = (e) => {
          setAffirmation(e.target.value)
      }
  

  Enter fullscreen mode Exit fullscreen mode

  The next update we need to make is in our handleSubmit function:
  

   const handleSubmit = (e) => {
          e.preventDefault()
          setFinalAffirmation(true)
      }
  

  Enter fullscreen mode Exit fullscreen mode

  If we hover over the e, we get the same message we did above. You might be tempted to type it in the same way, but let’s think about what’s happening here for a second. We’re submitting a completed form here. If we head over to the React TypeScript Cheatsheet, we’ll find an event type of FormEvent, which they describe as an “Event that occurs whenever a form or form element gets/loses focus, a form element value is changed or the form is submitted.” That sounds like a good choice.
  

  /* submit is a form event */
  const handleSubmit = (e: 
     React.FormEvent<HTMLFormElement>) => {
          /* prevent page from refreshing */
          e.preventDefault()
          setFinalAffirmation(true)
      }
  

  Enter fullscreen mode Exit fullscreen mode

  We add a comment there for clarity that submit is a form event, and then we specify the type as an HTMLFormElement.

  We’ll move on to the last one in this example.

  Around line 57, we can see that TypeScript is complaining about socketRef.current. If we hover over it, we get this message:
  

  Because we added the WebSocket types package, @types/websocket, we have access to a WebSocket type. However, we don’t set the type on line 57. The actual problem is with const socketRef = useRef(null).

  We need to let TypeScript know that we’re looking at a WebSocket or null: const socketRef = useRef(null).

  With that last update, we no longer have TypeScript complaining in this file. That doesn’t mean that there aren’t other updates that we can make. If you hover over other variables or functions, we can see what TypeScript is inferring.

  

  To complete this migration, we need to update the .js files to .tsx. But the nice thing is that we don’t have to do that all at once. For now, this is where we’ll leave it.

  Learn More About TypeScript

  There’s a lot to learn about TypeScript. Here are some resources I've found helpful:

  • TypeScript Handbook
  • Totally TypeScript
  • React + TypeScript Cheatsheets

  And check out the Bonus Section of Sandra’s post on how to Build a To-do List App with Pinia and Vue 3.

  To access the code for this blog post, select the feature/typescript branch from the React App GitHub Repository. If you have any thoughts, comments, or questions, please drop a comment in our General Discussion category, or if you want to say hey, drop your intro in our intro thread.

• Appwrite

  appwrite.io

  sponsored

  Appwrite - The Open Source Firebase alternative introduces iOS support . Appwrite is an open source backend server that helps you build native iOS applications much faster with realtime APIs for authentication, databases, files storage, cloud functions and much more!

  

Suggest a related project