Vite with Laravel: Using TypeScript

2021-03-25 #laravel #vite-with-laravel #frontend #build-tools #typescript

Vite transpiles TypeScript out of the box.

Vite only performs transpilation on .ts files and does NOT perform type checking. It assumes type checking is taken care of by your IDE and build process.

If you like to see type errors in your terminal (like me), you'll need to add extra tooling. I solved this by running a parallel type check process with concurrently.

First, add concurrently to your dependencies. Then update your dev script to run a TypeScript watcher in parallel with Vite.

  {
      "private": true,
      "scripts": {
+         "dev": "concurrently \"npm run vite --clearScreen false\" \"npm run tsc -w --preserveWatchOutput\"",
          "production": "vite build"
      },
      "devDependencies": {
          "axios": "^0.21",
+         "concurrently": "^6.0.0",
          "lodash": "^4.17.19",
          "vite": "^2.1.0",
      }
  }

Vite's --clearScreen and TypeScript's --preserveWatchOutput flags ensure that they don't both try to reset the terminal while watching, otherwise you'd only see one of the two's output at a time.

If you want to make the difference between the two processes more clear, concurrently supports naming and color-coding.

concurrently
    -n "vite,typescript"
    -c "white,green"
    "npm run vite --clearScreen false"
    "npm run tsc -w --preserveWatchOutput"

With these settings, your output will look like this:

Screenshot of my terminal running Vite and TypeScript in parallel

Vite with Laravel