Introduction to Vite Typescript

This guide will walk you through setting up a project using Vite and TypeScript from scratch. Don’t worry if you’re unfamiliar with programming or technical terms. We’ll explain everything in simple terms.

What Is Vite?

Before diving into the steps, let’s first understand what Vite is and why it’s useful.

Vite (pronounced like “veet”) is a tool that helps you develop websites. When building a website, you usually need to set up many things—like how to handle multiple files and make your website load quickly. Vite takes care of all that for you, so you can focus on writing your website’s code.
It makes development faster, especially when your project gets larger.
Instead of loading everything at once (which can make your website slow), Vite loads only what’s needed when you start developing.

Why use Vite? Let’s look at an example:

Imagine you’re building a website using plain HTML and JavaScript (the language used to make websites interactive). As your website grows, it gets slower because you have to load all the files at once. Vite helps avoid this by loading just the files you’re working on, making it much faster to work with.

Why is Vite Better than Plain HTML and JavaScript?

Faster development: Vite refreshes only the part of the page you’re working on, while with plain HTML/JavaScript, you’d have to reload the entire page.
Organized code: You can split your code into smaller parts, which Vite helps combine neatly.
Support for modern technologies: It makes it easier to use new web development features like TypeScript.

What is TypeScript?

Now, let’s talk about TypeScript:

TypeScript is a programming language that builds on JavaScript. It adds extra features, such as “types,” which help you avoid common mistakes when writing code.
It helps make your code more predictable, reducing the chances of bugs.

You don’t need to fully understand TypeScript yet to follow this guide, but think of it as a “safer” version of JavaScript that helps you write cleaner, less error-prone code.

Why Use TypeScript?

Catch errors early: TypeScript checks your code for potential problems before it runs, so you can fix them before they break your website.
Better collaboration: If you’re working with other developers, TypeScript makes it easier for everyone to understand how the code works.

Now that we know why Vite and TypeScript are useful, let’s get started with setting them up.

Step 1: Setting Up Your Development Environment

Before we can use Vite and TypeScript, you’ll need to install a few basic tools:

1.1 Install Node.js

Node.js is a tool that lets you run JavaScript (and TypeScript) outside of a web browser. Vite uses Node.js to manage your website’s files during development.
Download Node.js from its official website.
- Choose the LTS version (it stands for Long Term Support, meaning it is more stable).
- Once downloaded, install it by following the on-screen instructions.

1.2 Install a Code Editor

You’ll need a place to write your code. The most popular tool for this is Visual Studio Code (VS Code):

Download Visual Studio Code from its official site and install it.
This editor comes with useful features like error checking and highlighting code, which makes it beginner-friendly.

Step 2: Starting a Vite + TypeScript Project

With Node.js installed, you can create your Vite + TypeScript project.

2.1 Open Your Terminal

On your computer, open the Terminal or Command Prompt. If you’re using Windows, search for “Command Prompt” in the Start menu.

2.2 Create a New Vite Project

Now, let’s create your first Vite project:

In the terminal, type the following command and press Enter:
1
npm create vite@latest
- This command tells Node.js to create a new project using Vite.
You’ll be asked a few questions:
- Project name: Enter a name for your project (e.g., my-vite-project).
- Framework: Choose vanilla (this means basic JavaScript).
- Variant: Choose TypeScript (this sets up TypeScript automatically for you).
Once you’ve answered the questions, the terminal will set up your project. Next, move into the project folder by typing:
1
cd my-vite-project

2.3 Install Dependencies

Next, you’ll need to install some files that Vite needs to run your project. These are called dependencies.

Run this command in your terminal:
1
npm install

This will download all the necessary files.

Step 3: Running Your Project

You’re now ready to start your Vite project and see it in action!

In the terminal, type the following command:
1
npm run dev
Vite will start a local server, and it will tell you an address to visit in your web browser, something like:
```
Local: http://localhost:3000/
```
- Open your browser and go to this address. You should see a page that says Vite + TypeScript. Congratulations! You now have a basic Vite project running with TypeScript.

Step 4: Understanding Your Project’s Structure

Let’s break down what Vite has created for you:

index.html: This is the main page of your website. It tells the browser what content to display.
main.ts: This is the main TypeScript file. It is where you will write your code to make the page interactive.
style.css: This file contains the styles for your website. It controls how things look, such as colors and layouts.

You don’t need to worry too much about these files yet. Over time, as you add more features, you’ll add more files.

Step 5: Making Changes to Your Project

Now, let’s modify your project to see how easy it is to work with Vite and TypeScript.

5.1 Changing Text on the Page

Open index.html in your code editor.
Find the line that says:
1
<h1>Vite + TypeScript</h1>
Change it to:
1
<h1>Hello, World!</h1>
Save the file.

When you go back to your browser (the one you opened in Step 3), you’ll see the text has changed without refreshing the page! This is one of Vite’s cool features—it automatically updates the page when you save changes.

5.2 Adding Some Interactivity

Open main.ts in your editor.

Add the following code at the end of the file:

1
2
3
4
5
6
7
const button = document.createElement('button');
button.textContent = 'Click Me';
document.body.appendChild(button);

button.addEventListener('click', () => {
  alert('You clicked the button!');
});

Save the file.

When you look at your browser again, you’ll see a button has appeared. If you click it, an alert will pop up! This is an example of how you can make your page interactive using TypeScript.

Conclusion

You’ve now set up a project using Vite and TypeScript, made some changes, and added a button to your webpage. By using Vite, you can develop websites quickly, and with TypeScript, you can write code that’s safer and easier to manage.

Recap:

Vite helps you develop faster by loading only what you need and refreshing changes automatically.
TypeScript helps catch potential errors before they happen, making your code more reliable.

You can now continue building your project by exploring more TypeScript features or adding more pages to your website.

Happy coding!