Setting up simple React & TypeScript project
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 plug
index.tsx like you can see in
<title>TypeScript + React with Parcel Sandbox</title>
<meta charset="UTF-8" />
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:
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.
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: