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>
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,
followed by:
"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.
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)