How to add typescript to Vue 3 and Vite project

My setup: I installed Vue and Vite via the create-vite-app module, and then updated all the packages that was generated by 'init vite-app' to the very latest RC versions for Vue and Vite.

Now I want to use typescript for all my code. First I just played around a little bit, and added the lang="ts" to the tag in HelloWorld.vue. That seems to work, though I have no idea how typescript gets transpiled from the vue file though.

Then I tried to rename the main.js to main.ts. Now nothing happen.

I was thinking that I just need to install typescript, but then it hit me, why is it working in the .vue component then? Am I doing something wrong if I install typescript now?

Why does typescript work in the vue module (HelloWorld), but no js is generated from the *.ts file?

Solution

How to add typescript to Vue 3 and Vite project

I will create a vite project to use typescript step by step:

first, we should create a vite project at first

$ npm init vite-app <project-name>
$ cd <project-name>
$ npm install

second, we should install typescript

$ npm install typescript

third, we should create a tsconfig.json file in the root folder, like this:

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "importHelpers": true,
    "isolatedModules": true,
    "noEmit": true
  }
}

And you can check here, What is a tsconfig.json

then, we sholud create a shims-vue.d.tsfile in the src folder, like this:

declare module "*.vue" {
  import { defineComponent } from "vue";
  const Component: ReturnType<typeof defineComponent>;
  export default Component;
}

The shims-vue.d.ts file helps your IDE to understand what a file ending in .vue is.
Now, we can check whether the .ts file works well.
In my case, i rename the main.js file to main.ts in the src folder,
and modify the index.html, 12 line:

 <script type="module" src="/src/main.js"></script>

 <script type="module" src="/src/main.ts"></script>

At last, run

npm run dev

If there is no error message, you can create your component file by .ts
Good luck!