DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 966,904 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
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)

This post blew up on DEV in 2020:

js visualized

πŸš€βš™οΈ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! πŸ₯³

Happy coding!