Andy Nguyen

Add TypeScript to Existing Vite Project

Recently, I added TypeScript to my personal project, Payday Calendar Generator, a React project using Vite as the bundler. Here's what I learned:

Initial Project Changes

These steps only work for existing React projects using Vite. Conveniently, it's a handful of steps since Vite supports TypeScript really well.

NOTE: This tutorial will utilize the official Vite + React + TS StackBlitz for files and references.

Update configuration files

  • Create TypeScript config files (tsconfig.json and tsconfig.node.json) in project root
    • Copy the respective config content from the StackBlitz example
  • Refactor Vite config file from vite.config.js to vite.config.ts
  • Create a src/vite-env.d.ts
    • Copy the respective config content from the StackBlitz example
  • Modify package.json's npm run build script
    • Update from "build": "vite build", to "build": "tsc && vite build",

Update entry point

  • Refactor main.jsx to main.tsx
  • Update index.html to include main.tsx

NOTE: At this point, the Vite project should be ready for TypeScript compilation, but as always, test the project to see if anything is not configured correctly. Here's some additional task I had to do.

Additional tasks

  • Update .js / .jsx filename globs to include .ts / .tsx where necessary
    • Like tailwind.config.js

Start Migration

Now the fun starts! My strategy was to update each file (and associated test file) to TypeScript one at a time. This flow was my guide for each file.

  • Rename file from .js / .jsx to .ts / .tsx
  • Convert CommonJS modules to ES6 modules
  • Add types!

Conclusion

Vite is a blazing-fast bundler, and adding TypeScript to a Vite project will make development even more pleasant.