vue3+typescript使用

一、开发前配置                                          

1.安装eslint+Volar+prettier（TypeScript Vue Plugin ）扩展，支持vue3，ts语法校验。安装 Volar需禁用 Vetur。

2. vscode开启takeover模式，使Volar和vscode内置ts扩展 使用一个 ts语言服务工作，具体步骤参考官网：https://cn.vuejs.org/guide/typescript/overview.html#volar-takeover-mode

3.安装unplugin-auto-import插件，全局引入vue3常用方法。

使用步骤:

1. 安装unplugin-auto-import插件
2. 在vue.config.js文件中添加相关配置

1. 第一次启动的时候把eslintrc.enabled设置为true，会在项目根目录生成一个eslintrc-auto-import.json文件，我们需要把他在eslint配置文件中引入一下。

二、开发中部分常用说明

1．不使用<script setup>时使用defineComponent定义组件开启props类型推导。

2.单文件组件中script标签，添加lang=”ts”属性，启用ts类型检查

3.强制类型转化 as

4. 当使用<script setup lang=”ts”>时，组件属性使用defineProps定义，

1）从参数中推到类型

2）传入泛型参数

 

3）添加默认值

5.在<script setup>中，使用defiineEmits定义要抛出的事件

6.不使用<script setup>时，可以在emits选中定义抛出的方法

7.ref，reactive标注类型

1）根据初始化值推导

2）定义时指定类型

3）ref()传入泛型参数

8．给computed标注类型

1）通常自动通过返回值推导出类型。

2）通过泛型参数指定类型

9.事件处理函数标注类型

10．Provide/inject标注类型

11、html模板引用标注类型

12、组件模板引用标注类型

13.使用<script setup>时，组件暴露属性或方法

14．属性使用。

const $attrs = useAttrs();

15．全局属性定义， app.config.globalProperties+接口扩展