React with Typescript or Javascript

Tina Huynh - Jun 25 '22 - - Dev Community

Which side are you on? Typescript? JavaScript?

typescript javascript circle

Typescript is in fact a superset of JavaScript, which means whatever code that runs on JavaScript will also be able to run TypeScript files. All JavaScript are valid TypeScript code but not all TypeScript are valid JavaScript code. Read that again. This concept is similar to how all CSS are valid SASS code, but not all SASS code are valid CSS code. Got it?

If you are familiar with Typescript and React, you are either running a React project with either commands:

npx create-react-app my-app --template typescript

OR

yarn create react-app my-app --template typescript

And you are transforming React JavaScript projects into TypeScript by running either commands:

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

OR

yarn add typescript @types/node @types/react @types/react-dom @types/jest

Tip: For those who want to introduce TypeScript into their projects but don't have the energy to do so: use Bit. You are able to create, compose, and publish decoupled React components with or without TypeScript. This means you can start introducing TypeScript into an existing React application, one components at a time!

What's great about TypeScript:

  1. Easy to read and understand components
  2. Better support for JSX
  3. Gradual adoption for existing projects
  4. Benefits comes with Statics type checking and IntelliSense in general
  5. Less amount of undefined errors
  6. Better readability and maintainability

What's great about Javascript:

  1. Dynamically types
  2. Doessn't need to be compiled
  3. Doesn't use declaration files
  4. Is perfect for simple web applications
  5. Fast re-compliation time

What are your thoughts? Do you prefer working with TypeScript or JavaScript? For which projects and why?

Happy coding!

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .