Setting up simple React & TypeScript project
March 11, 2019
It’s have been a long time since I last wrote my last blog post. But don’t worry I back and in the first blog post I give you a small template so if you are interested in working with React & TypeScript please join me!
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.
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
<!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>
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:
"noUnusedLocals": true, "noUnusedParameters": true, "noImplicitReturns": true, "noFallthroughCasesInSwitch": true,
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.
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.
Summary & TL;DR
I give you TypeScript + React with Parcel playground: