Part 2: Installing TypeScript and Setting Up Development

Hi! I'm Marcus.
This is my 2nd article in my Front End series.
Each article will be written to read in 5 mins per purpose itself. I'll make a video for more understanding if possible.

Table of contents:

Part 1: Setup Snowpack
Part 2: Installing TypeScript and Setting Up Development

Today I'll guide you on Installing TypeScript and Setting Up Development project.

For now our project structure looks like this

Let's coding!

1.Install `typescript` and `typing`

npm i typescript @types/react @types/react-dom -D

and rename index.jsx to index.tsx

Now you can run project

npm run start

But we should create a tsconfig.json file to configure our typescript project

2.Create `tsconfig.json`

./node_modules/.bin/tsc --init

Our tsconfig.json should look like this

For now, our project looks good and run perfectly. But when open index.tsx we'll see a redundant import line here

What will happen if we remove it?

Oop!

3.Config babel

npm i @snowpack/plugin-babel @babel/preset-typescript @babel/preset-react -D

We need install
@babel/preset-typescript & @babel/preset-react to resolve above issue
and install @snowpack/plugin-babel to integrate it into snowpack.

After that we need create a babel.config.json file in root folder