29

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?

Solsiden
  • 673
  • 1
  • 7
  • 22
  • 1
    Instead of `create-vite-app`, I would do `git clone https://github.com/ktsn/vite-typescript-starter.git`, which uses the latest version of Vue 3 and Vite. – tony19 Sep 03 '20 at 16:48
  • 1
    Thank you, this helps a lot. Also it kind of confirms that the short answer to the main question is, yes, one just installs typscript and then run tsc -w while coding. – Solsiden Sep 03 '20 at 17:53

3 Answers3

65

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>

to

 <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!

gg.jiang
  • 766
  • 6
  • 3
  • I did everything you said but to make it work I had to add `"strict": true` the `compilerOptions` object. Source https://github.com/vuejs/vetur/issues/2534#issuecomment-741752908 – DannyFeliz Dec 10 '20 at 16:59
  • Shouldn't it be `npm install typescript --save-dev`? – Roel Feb 15 '23 at 14:33
12

There is a template for typescript named vue-ts. So running npm init vite@latest my-vue-app -- --template vue-ts sets up a typescript vite project.

https://vitejs.dev/guide/#scaffolding-your-first-vite-project

UPDATE: reflected Olanrewaju's comment.

kena0ki
  • 479
  • 6
  • 9
-1

Per the latest docs, you can run one of the following commands which will give you the choice of framework and typescript options:

npm init vite@latest

yarn create vite

pnpm dlx create-vite

Riza Khan
  • 2,712
  • 4
  • 18
  • 42