如何将typescript添加到Vue 3和Vite项目

我的设置：我通过创建Vite应用程序模块安装了Vue和Vite，然后将“初始化Vite应用程序”生成的所有软件包更新为Vue和Vite的最新RC版本

现在我想对所有代码使用typescript。首先，我只是玩了一会儿，并在HelloWorld.vue中将lang=“ts”添加到标记中。虽然我不知道typescript是如何从vue文件传输过来的，但这似乎是可行的

然后我尝试将main.js重命名为main.ts。现在什么也没发生

我想我只需要安装typescript，但我突然想到，为什么它在.vue组件中工作？如果我现在安装typescript，我是否做错了什么

为什么typescript在vue模块（HelloWorld）中工作，但没有从*.ts文件生成js？

如何将typescript添加到vue 3和Vite项目中 我将创建一个vite项目，逐步使用typescript：

• 首先，我们应该首先创建一个vite项目

$npm初始化vite应用程序
$cd
$npm安装

• 其次，我们应该安装typescript

$npm安装类型脚本

• 第三，我们应该在根文件夹中创建一个

  tsconfig.json

  文件，如下所示：

{
“编译器选项”：{
“目标”：“esnext”，
“模块”：“esnext”，
“moduleResolution”：“节点”，
“进口者”：没错，
“隔离模块”：正确，
“noEmit”：对
}
}

你可以在这里查一下

• 然后，我们应该在

  src

  文件夹中创建一个

  vue.d.ts

  文件，如下所示：

声明模块“*.vue”{
从“vue”导入{defineComponent}；
常量组件：返回类型；
导出默认组件；
}

vue.d.ts

文件有助于您的IDE理解以

.vue

结尾的文件是什么。
现在，我们可以检查

.ts

文件是否工作正常。
在我的例子中，我将

src

文件夹中的

main.js

文件重命名为

main.ts

，
并修改

index.html

，12行：

到

最后，跑

npm运行开发

如果没有错误消息，您可以通过

.ts

创建组件文件

---

祝你好运

有一个名为

vue ts

的typescript模板。 因此，运行

npm init@vitejs/app my vue app--template vue ts

设置一个typescript vite项目

---

我不想

创建vite应用程序

，而想做

git克隆https://github.com/ktsn/vite-typescript-starter.git

，它使用最新版本的Vue 3和Vite。谢谢，这很有帮助。此外，它还确认了主要问题的简短答案是，是的，只需安装typscript，然后在编码时运行tsc-w。我做了您所说的一切，但为了使其工作，我必须添加

“strict”：true

编译器选项对象。来源