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

Krzysztof Ε»uraw
Krzysztof Ε»uraw

Posted on

Setting up simple React & TypeScript project

Hello πŸ‘‹πŸ»

This is my first blog post on dev.to. If you want to get those posts 1 week before those on dev.to you can join my newsletter on: https://krzysztofzuraw.com/newsletter

Why

You may ask yourself why even bother adding a new template
when there is so much already existing? The answer is simple - because I can.
I also have an idea about presenting changes in this template as my project will grow so you can
see what was added and why.

Template

It is nothing magical over there: you have parcel-bundler that is doing the most of the work. You just plug index.tsx like you can see in index.html:

<!DOCTYPE html>
<html>
  <head>
    <title>TypeScript + React with Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="app"></div>

    <script src="src/index.tsx"></script>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

One more important config to look into is tsconfig.json which tells TypeScript compiler how to compile a project. The most important entry from the point of type-safely is:

"strict": true,
Enter fullscreen mode Exit fullscreen mode

followed by:

"noUnusedLocals": true,
"noUnusedParameters": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
Enter fullscreen mode Exit fullscreen mode

Type-safely means that you have to put more hard work into typing your application (like ensuring there are no implicit anys) but in reward of having fewer bugs in runtime. I encourage you to enable it every time.

As we are still in tsconfig - there is one entry called plugin where I put typescript-tslint-plugin. This little fella will run tslint plugin from Microsoft in your VSCode. If you don't use VSCode - you can remove this one line.

Next to tsconfig is tslint.json - linter for TypeScript files configured to follow recommended rules and prettier one. This tslint-config-prettier entry should be the last in extends array to ensure that prettier will format code according to tslint.

I've added also a jest for testing with ts-jest that enables TypeScript support to unit test files.

Summary & TL;DR

I give you TypeScript + React with Parcel playground:

Top comments (0)

Hey 😍

Want to help the DEV Community feel more like a community?

Head over to the Welcome Thread and greet some new community members!

It only takes a minute of your time, and goes a long way!