CODEWITHSUNDEEP
typescriptvue.jsvite
Solsiden
Solsiden

Reputation: 784

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?

Upvotes: 32

Views: 34317

Answers (3)

Riza Khan
Riza Khan

Reputation: 3158

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

Upvotes: 0

kena0ki
kena0ki

Reputation: 507

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.

Upvotes: 13

gg.jiang
gg.jiang

Reputation: 846

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!

Upvotes: 73

Related Questions