位置: IT常识 - 正文
Vue 之 vue3 与 TS 的配合使用整理(vue3和ts)
发布时间：2024-01-17推荐整理分享Vue 之 vue3 与 TS 的配合使用整理(vue3和ts)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:vue3和typescript,vue3和typescript,vue3和ts,vue3区别,vue3区别,vue3和ts,vue3和ts,vue3和ts,内容如对您有帮助，希望把文章链接给更多的朋友！
本文主要是说明vue3中的一些ts的用法，且**文章内容都是从vue官网整理下来的**，如有重复，请说明，谢谢。
前言配置 tsconfig.json
通过 create-vue 搭建的项目包含了预先配置好的 tsconfig.json。其底层配置抽象于 @vue/tsconfig 包中。在项目内我们使用 Project References 来确保运行在不同环境下的代码的类型正确 (比如应用代码和测试代码应该有不同的全局变量)。
手动配置 tsconfig.json 时，请留意以下选项：
compilerOptions.isolatedModules 应当设置为 true，因为 Vite 使用 esbuild 来转译 TypeScript，并受限于单文件转译的限制。
如果你正在使用选项式 API，需要将 compilerOptions.strict 设置为 true (或者至少开启 compilerOptions.noImplicitThis，它是 strict 模式的一部分)，才可以获得对组件选项中 this 的类型检查。否则 this 会被认为是 any。
如果你在构建工具中配置了路径解析别名，例如 @/* 这个别名被默认配置在了 create-vue 项目中，你需要通过 compilerOptions.paths 选项为 TypeScript 再配置一遍。
正文TypeScript 与组合式 API为组件的 props 标注类型使用 <script setup>当使用 <script setup> 时，defineProps() 宏函数支持从它的参数中推导类型：
<script setup lang="ts">const props = defineProps({ foo: { type: String, required: true }, bar: Number})props.foo // stringprops.bar // number | undefined</script>这被称之为“运行时
上一篇：教你一文解决 js 数字精度丢失问题(js遇到的问题)
下一篇：React通过classnames库添加类(react中key)
