Adding aliases in vite with typescript needs the same alias in tsconfig

For example:

import { fileURLToPath, URL } from "url"
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
      "!component": fileURLToPath(new URL("./src/components", import.meta.url)),
      "!composable": fileURLToPath(new URL("./src/composables", import.meta.url)),
      "!lib": fileURLToPath(new URL("./src/lib", import.meta.url)),
    }
  }
})

will need the following in tsconfig.json:

{
  "compilerOptions": {
    "paths": {
      "@/*": [ "./src/*" ],
      "!component/*": [ "./src/components/*" ],
      "!composable/*": [ "./src/composables/*" ],
      "!lib/*": [ "./src/lib/*" ]
    }
  }
}

The asterixes in the syntax is important (alias/* => ./path/*).