DEV Community

Khánh Hoàng (Marcus)
Khánh Hoàng (Marcus)

Posted on

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:

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

For now our project structure looks like this

Porject structure

Let's coding!

1.Install typescript and typing

npm i typescript @types/react @types/react-dom -D
Enter fullscreen mode Exit fullscreen mode

and rename index.jsx to index.tsx

Project structure

Now you can run project

npm run start
Enter fullscreen mode Exit fullscreen mode

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

2.Create tsconfig.json

./node_modules/.bin/tsc --init
Enter fullscreen mode Exit fullscreen mode

Configuration

Our tsconfig.json should look like this

Configuration

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

Project structure

What will happen if we remove it?

Error

Oop!

3.Config babel

npm i @snowpack/plugin-babel @babel/preset-typescript @babel/preset-react -D
Enter fullscreen mode Exit fullscreen mode

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
Configt

Result

Wala!

Thanks for your reading, see you in next article
Part 3: Installing SASS/SCSS and Setting Up CSS Module

Discussion (0)