我的设置:我通过 create-vite-app 模块安装了 Vue 和 Vite,然后将“init vite-app”生成的所有包更新为 Vue 和 Vite 的最新 RC 版本。
现在我想对我的所有代码使用打字稿。首先,我只是玩了一下,并将 lang="ts" 添加到 HelloWorld.vue 中的标签中。这似乎有效,尽管我不知道如何从 vue 文件中转换 typescript。
然后我尝试将 main.js 重命名为 main.ts。现在什么也没发生。
我以为我只需要安装 typescript,但后来我突然意识到,为什么它在 .vue 组件中工作?如果我现在安装 typescript 是不是做错了什么?
为什么 typescript 在 vue 模块(HelloWorld)中可以工作,但 *.ts 文件没有生成 js?
我将一步步创建一个使用typescript的vite项目:
$ npm init vite-app <project-name>
$ cd <project-name>
$ npm install
$ npm install typescript
tsconfig.json
文件,如下所示:{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"moduleResolution": "node",
"importHelpers": true,
"isolatedModules": true,
"noEmit": true
}
}
您可以在这里查看,什么是 tsconfig.json
shims-vue.d.ts
文件夹中创建一个src
文件,如下所示:declare module "*.vue" {
import { defineComponent } from "vue";
const Component: ReturnType<typeof defineComponent>;
export default Component;
}
shims-vue.d.ts
文件可帮助您的 IDE 理解以 .vue
结尾的文件是什么。.ts
文件是否正常工作。main.js
文件夹中的 main.ts
文件重命名为 src
,index.html
,第12行:
<script type="module" src="/src/main.js"></script>
到
<script type="module" src="/src/main.ts"></script>
最后,奔跑吧
npm run dev
如果没有错误信息,您可以通过
.ts
有一个名为
vue-ts
的打字稿模板。
因此,运行 npm init vite@latest my-vue-app -- --template vue-ts
会设置一个 typescript vite 项目。
https://vitejs.dev/guide/#scaffolding-your-first-vite-project
更新:反映了 Olanrewaju 的评论。
你可以尝试:
vue add typescript