How to Run TypeScript Locally Using Vite (Fast, Easy Setup)

If you're looking to start using TypeScript locally and want the fastest, most modern development setup possible—look no further than with Vite. Here, I’ll walk you through setting up TypeScript with Vite on your local machine in just a few minutes.

Whether you're building a simple utility or a full-scale web app, this setup will give you a lightning-fast development environment , instant feedback, and optimized builds out of the box.

🧰 Prerequisites

Before we start, make sure you have the following installed:

• Node.js (v14 or higher)
• npm (comes with Node.js) or yarn/pnpm
• Code editor (I recommend Visual Studio Code)

🚀 Step 1: Create a Vite + TypeScript Project

Open your terminal and run:

npm create vite@latest my-ts-app – --template vanilla-ts. This will scaffold a fresh Vite project using TypeScript. Want to use React instead?

Use this: npm create vite@latest my-react-app – --template react-ts

You’ll be prompted to choose a project name and template. Once it’s done, navigate into the project folder:

cd my-ts-app

📦 Step 2: Install Dependencies

Run the following command to install all the project dependencies:

npm install

This installs everything you need to get started: Vite, TypeScript, and other essential packages for the template you chose.

⚙️ Step 3: Understand the File Structure

Here’s what your new project should look like:

my-ts-app/
├── index.html
├── package.json
├── tsconfig.json
├── src/
│ └── main.ts
└── vite.config.ts

• main.ts is your app’s entry point.
• tsconfig.json controls TypeScript behavior.
• vite.config.ts is optional, but useful if you need customization later.

🧪 Step 4: Run the Development Server

Start your local dev server by running:

npm run dev

You should see something like:

VITE v5.x.x ready in 100ms
➜ Local: http://localhost:5173/

Open the link in your browser—you now have a fully functional TypeScript app running locally with hot reload support!

🛠️ Step 5: Start Coding

Start editing the files inside the src/ folder. If you're using React, open App.tsx. For vanilla TypeScript, modify main.ts.

Every time you save, Vite instantly updates the browser—no need to refresh manually.

Pro Tip: Make sure "strict": true is enabled in your tsconfig.json for better type safety.

🧱 Step 6: Build for Production

Once you're ready to deploy your app, run:

npm run build

Vite will generate a highly optimized dist/ folder, ready to upload or deploy. You can also preview the production build locally:

npm run preview

✅ Recap

Here’s a quick overview of the process:

👋 Final Thoughts

Running TypeScript locally with Vite is one of the best development experiences available today. It’s blazing fast, beginner-friendly, and gives you instant feedback while coding. Whether you’re just learning TypeScript or building a production-ready app, this setup will help you move faster and write better code.