DEV Community

Cover image for Setting up Vite with TypeScript for a Simple To-Do List

Setting up Vite with TypeScript for a Simple To-Do List

Shayan on January 16, 2025

In this guide, I'm going to walk you through the steps to set up a Vite project with TypeScript to create a basic to-do list application. We're goi...
Read full post
Collapse
 
code42cate profile image
Jonas Scholz •

What do the cool kids use these days besides vite?

Collapse
 
shayy profile image
Shayan •

Honestly Vite is amazing! haha

Collapse
 
thecodingthesi profile image
Thesi •

why no early return here?

if (text) return;
const newTodo: Todo = {
  id: nextTodoId++,
  text: text,
  completed: false,
};
todos.push(newTodo);
todoInput.value = '';
renderTodos();
Enter fullscreen mode Exit fullscreen mode
Thread Thread
 
shayy profile image
Shayan •

That's a good catch! I also prefer guard statements over nested ifs but this one slipped my mind. I'll update the post now.

Thread Thread
 
adam_winick_42d3f9c0e7bd1 profile image
Adam Winick •

Yeah your update was correct but the suggestion is not: you caught that it should be

// if there's no text, return.
if(!text) return;
Enter fullscreen mode Exit fullscreen mode

but also, you can shorthand the text property assignment

const newTodo: Todo = {
  id: nextTodoId++,
  text
  completed: false,
};
Enter fullscreen mode Exit fullscreen mode
Thread Thread
 
thecodingthesi profile image
Thesi •

whoopsie, that was a typo. Thanks for correcting!

Thread Thread
 
adam_winick_42d3f9c0e7bd1 profile image
Adam Winick • • Edited

You're very welcome, I love that you used Vanilla DOM for this! Big ups!

Collapse
 
firacode profile image
Firacode •

This guide walks you through setting up a simple to-do list application using Vite and TypeScript. You'll first create a new Vite project with the vanilla-ts template and install the necessary dependencies. The project structure includes essential files like main.ts, index.html, and tsconfig.json. You'll modify main.ts to implement the to-do list functionality, such as adding, marking as completed, and deleting items, with type safety ensured by TypeScript. The index.html file is updated to link to the TypeScript code, and running npm run dev will start the Vite development server. Finally, npm run build will bundle your app for production.

Collapse
 
shayy profile image
Shayan •

bruh

Collapse
 
thomas_baseline profile image
Thomas Nixon •

Nice article with a great step by step!

If you are looking for something already set up with Vite and Typescript, including hooking it up to the backend, check out the open-source serverless first fullstack framework ⚡️ Baseline ⚡️ github.com/Baseline-JS/core

Collapse
 
manuchehr profile image
Manuchehr •

clearing and rerendering after each action is really bad for performance