DEV Community

Chris Otto
Chris Otto

Posted on • Originally published at chrisotto.dev on

React Tutorial - Add Typescript

This week I was going through the React tutorial. While going through each phase of the tutorial; going over state, JSX and React Components I wanted to be writing it in Typescript. I’ll go through the tutorial code of what I had to change in order to get it working.

  • Use node to install the typescript dependencies we need:

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

  • Change the function definition of Square, pass (props: any) instead of just (props):
function Square(props: any) {}
Enter fullscreen mode Exit fullscreen mode
  • Modify the Board and Game Component to accept any in the Component definition:
class Board extends React.Component<any, any> {}

class Game extends React.Component<any, any> {}
Enter fullscreen mode Exit fullscreen mode
  • Change the file type to be .tsx instead of .js

Just like that, with a few package installs and a few code changes you’re able to compile the project using typescript instead of normal JS. You will probably want to make other modifications to take advantage of other useful parts of typescript.

Top comments (0)