Vue3项目中使用TypeScript

这篇具有很好参考价值的文章主要介绍了Vue3项目中使用TypeScript。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

wallhaven-wey567.jpeg

单文件用法

在单文件组件中使用 TypeScript,需要在

image.png

小结:

<script lang="ts">

</script>


<script setup lang="ts">

</script>

注意

当 script 中使用了 ts ,模板 template 在绑定表达式时也支持ts。
如果在表达式中不指名类型时,编译器会报警告提示。

image.png

正确写法
表达式指定类型
image.png

组合式API + TS

Props 标注 类型

Vue3项目中使用TypeScript

基于运行时声明

当使用

<script setup lang="ts">
  const props = defineProps({
    name: String,
    data:{
      type: Object,
      required: true
    }
  })
    </script>

基于类型声明

通过泛型来定义 Props

<script setup lang="ts">
interface MyProps {
    phone: string | number,
    name ?: string,
    age : number | string
    hobby: {
        type: string,
        required: true
    }
}


const props = defineProps<MyProps>()
</script>
语法规定

传递给 defineProps 的泛型参数必须是以下格式:

defineProps<{ /*... */ }>()     一个对象字面量

同一个文件中的一个接口或对象类型字面量的引用:

interface Props {/* ... */}

defineProps<Props>()

Props 默认值

当使用了 基于类型声明时,就失去了 默认值 能力。 Vue 提供了一个 Api 可以解决此问题, **withDefaults **编译器哄解决。
withDefaults 可以提供默认值的类型检查

先来复习一下 基于运行时怎么 声明默认值 Props

const props = defineProps({
    name: {
      type: String,
      default: () => '默认值'  
    },
    data:{
        type: Object,
        required: true
    }
})

基于运行时 Props 默认值写法:

interface MyProps {
    phone: string | number,
    name ?: string,
    age : number | string
    hobby: {
        type: string,
        required: true
    }
}

const props =  withDefaults(defineProps<MyProps>(),{
    name:'海军',
    phone: '123123123123'
})  

没有使用

当没有使用

import { defineComponent } from 'vue'

export default defineComponent({
  props: {
    message: String
  },
  setup(props) {
    props.message // <-- 类型:string
  }
})

注意

  1. 传递给 defineProps 的参数本身不能是一个导入类型, 只能是当前文件下的一个对象或者interface
因为 Vue 组件是单独编译的,编译器目前不会抓取导入的文件以分析源类型。我们计划在未来的版本中解决这个限制。

  1. 基于运行时声明 和 基于类型声明 不能混着用

Emits 类型标注

Vue3项目中使用TypeScript

在 < script setup> 写法

在 < script setup> 中 , 给emit 函数 类型标注 可以通过两种形式来标注

  1. 运行时声明
  2. 类型声明

运行时声明写法

//运行时写法
const emit = defineEmits(['getData'])

  emit('getData', {
      code:200,
      msg: "传入数据成功",
      str:"我是子组件过来的数据"
  })

类型声明写法

const emit = defineEmits<{
    (e: 'getId', id: number): void
}>()


 emit('getId',2)

基于类型的声明使我们可以对所触发事件的类型进行更细粒度的控制。

在 defineComponent 中写法

defineComponent() 也可以根据 emits 选项推导暴露在 setup 上下文中的 emit 函数的类型:

import { defineComponent } from 'vue'

export default defineComponent({
  emits: ['change'],
  setup(props, { emit }) {
    emit('change') // <-- 类型检查 / 自动补全
  }
})

ref 标注类型

有时我们想给 ref 指定一个 复杂类型时, 可以通过 Ref 类型 声明 或者 调用 ref 时 传入一个泛型参数 来覆盖默认推倒行为。

Ref 声明

import type {Ref} from "vue"

const studentId: Ref< String | Number> = ref(231)

泛型声明

调用ref 时,传入一个泛型参数,来覆盖默认的推倒行为

const teacherId = ref<String | Number>('4')

注意

  • 如果泛型参数没有给定初始值,那么会得到一个 undefined 的联合类型

reactive 标注类型

通过 定义一个接口 来做类型约束

interface StudentInfoFormat {
    name: string,
    id: number,
    age: number,
    hobby ?: string
}




const info : StudentInfoFormat = reactive({name:'海军',id:2})

const getStudentInfo = (data : StudentInfoFormat) => {
    console.log(data)
}

getStudentInfo(info)

这样就有很好的类型提示。
上面定义来 一个 可选属性 hobby,在初始化时,没有传递 age属性, 下面提示了 缺少 age 。
image.png

computed 标注类型

computed() 会自动从其计算函数的返回值上推导出类型

import { ref, computed } from 'vue'

const count = ref(0)

// 推导得到的类型:ComputedRef<number>
const double = computed(() => count.value * 2)

// => TS Error: Property 'split' does not exist on type 'number'
const result = double.value.split('')

泛型参数指定返回类型

若返回的参数不是指定的参数类型则会报错

computed<T>(() => {})
const num = computed<number>(() => {
    return 99 * 44
})

事件函数标注类型

在处理原生 DOM 事件时,应该为我们传递给事件处理函数的参数正确地标注类型。

 <input type="text" @change="change">
const change = (e : Event) => {
    
    console.log((e.target as HTMLInputElement).value)
}

当 参数 e 没有标注类型时, 它的类型为 any 。 如果在tsconfig.json 中配置了 “strict”: true 或 “noImplicitAny”: true 时报出一个 TS 错误。
我们可以显式强制转化 event 属性 , 让浏览器更好的知道类型。

Provide / inject 标注类型

在组件传值时,有时组件嵌套太深时,组件通信就变的麻烦起来了。 如果子子孙组件需要获取顶级组件状态时,那么它可以 通过 Vuex / Pinia / 事件总线 来通信,不过,不建议这样做。一般用 Vuex / Pinia 一般存储一些全局的状态时使用,这里用就小题大做了。 我们可以通过在顶级组件 Provide 提供需要的值,然后在它所嵌套的组件中注入需要的值即可,这样状态也好管理。

在Vue3 中,如果我们要给 提供的值 标注类型,可以借助这个 接口 来实 InjectionKey 接口,它是一个继承自 Symbol 的泛型类型,可以用来在提供者和消费者之间同步注入值的类型。

单独封装key

单独封装key 的好处,这样我们在别的组件也可以使用该key 做为类型标注。

//provideKey.ts

import { provide, inject } from 'vue'
import type { InjectionKey } from 'vue'


export  const key = Symbol() as InjectionKey<string>



组件中 Provide

在顶级组件中提供 key , 供下级组件使用key

import {key} from "../../common/provideKey"
import {provide} from "vue"

provide(key,'标注类型')

如果没有key 的value 类型不是指定的类型,则会报警告提示
image.png

下级组件 inject

下级组件注入 key

import { inject } from "vue"


const key = inject('token')

模板ref 标注类型

有时,我们需要通过原生DOM 做一些操作,就需要获取到原生DOM.
下面是 获取表单元素,进入该组件时,自动聚焦。

<el-input v-model="str" placeholder="" size="normal" clearable @change="" ref="formInputRef"></el-input>
const str = ref("测试")

const formInputRef = ref<HTMLInputElement | null>(null)


onMounted(() => {
    formInputRef.value?.focus()
})
   

:::danger
模板引用需要通过一个显式指定的泛型参数和一个初始值 null 来创建
:::

获取子组件 类型

有时候,我们需要直接操作子组件来获取它的状态和方法。 在Vue2.x 中,我们可以直接在子组件中绑定ref,然后通过 this.$refs.绑定的ref 就可以使用了。
在 Vue 3中,我们也是如此。但是在组合式API 中,调用的时候,不用this了,通过 ref.value 来操作。

**想要给给子组件标注类型时: **
我们就需要先通过 typeof 来 获取组件的类型,然后通过TypeScript 内置的InstanceType 工具类型来获取其实例类型,就可以操作子组件了。

  <ts-component   ref="tsRef" ></ts-component>

一般不标准类型写法:

<script setup lang="ts">
  import TsComponent from '../TsComponent/index.vue'
	const tsRef = ref(null)


  tsRef.value?.alerTest('测试')    //调用子组件方法
</script>

标注类型写法:

<script setup lang="ts">
  import TsComponent from '../TsComponent/index.vue'

	const tsRef = ref<InstanceType<typeof TsComponent> | null>(null)

  tsRef.value?.alerTest('测试')    //调用子组件方法
</script>

选项式API + TS

在Vue3 中 选项式 API 想要做类型推倒,得使用 defineComponent() 来包装组件。

Props 标注类型

需要使用 defineComponent() 包装组件包裹起来,

简单类型

只做简单类型推倒

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
    props:{
      code:{
        type:Number,
        default:22,
        required:true,
      },
      content:{
        type:String,
        default: () => "测试"
      }  
    },

})

</script>

复杂类型

有时,我们需要对Props 的属性要求是复杂类型或者多层级进行类型要求,按一般的写法是实现不了的,可以通过PropType 这个工具类型来标记更复杂的 props 类型

import { defineComponent } from 'vue'
import type { PropType } from 'vue'

interface InfoFormat {
    code: {
        type: number,
        required: true
    }
    msg:{
        type: string
    }
}


export default defineComponent({
    props:{ 
      info: {
        type:  Object as PropType<InfoFormat>,
      }
    },
})

注意

如果你的 TypeScript 版本低于 4.7,在使用函数作为 prop 的 validator 和 default 选项值时需要格外小心——确保使用箭头函数

emits 标注类型

:::info
可以给 emits 选项提供一个对象来声明组件所触发的事件,以及这些事件所期望的参数类型。试图触发未声明的事件会抛出一个类型错误
:::

事件加参数类型验证

    emits:{
        getData(ctx:{name:string,age:number}) {
            // 内部可以加 一些验证
            // return
            return 
        }
    },


//触发事件
this.$emit('getData',{name:'海军',age:22})

如果我们给emit 事件加了参数类型验证,当触发事件时,没有传递参数或者参数类型错误 都会警告提示。
image.png

计算属性 标注类型

计算属性会自动根据其返回值来推导其类型。
在某些场景,我们需要显示的标记出 计算属性的类型。因为在某些 TypeScript 因循环引用而无法推导类型的情况下,可能必须进行显式的类型标注。文章来源地址https://www.toymoban.com/news/detail-419464.html

  computed:{
      filterData(): Array<{code:number,msg:string}> {
          if(this.arrList.length == 0) {
              return []
          } else{
              return this.arrList.filter(i => i.code == 200)
          }
      }
  },

事件处理函数 标注类型

import { defineComponent } from 'vue'

export default defineComponent({
  methods: {
    handleChange(event: Event) {
      console.log((event.target as HTMLInputElement).value)
    }
  }
})

到了这里,关于Vue3项目中使用TypeScript的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue3,Typescript中引用组件路径无法找到模块报错

    是这么个事,我在vue3新创建的项目里,写了个组件叫headerIndex.vue,放到app.vue中import就会报错 路径肯定没写错,找到了解决方法,但是也没想明白为什么 解决方法如下 在vite-env.d.ts文件中加入 就好了,大概意思就是在文件中把组件声明一下,but why

    2024年02月09日
    浏览(22)
  • Vue3+Vite+TypeScript常用项目模块详解

      目录 1.Vue3+Vite+TypeScript 概述 1.1 vue3  1.1.1 Vue3  概述 1.1.2 vue3的现状与发展趋势 1.2 Vite 1.2.1 现实问题 1.2 搭建vite项目 1.3 TypeScript 1.3.1 TypeScript 定义 1.3.2 TypeScript 基本数据类型  1.3.3 TypeScript语法简单介绍 2. 项目配置简单概述 2.1 eslint 校验代码工具配置 2.1.1 eslint定义 2.1.2 esl

    2024年02月08日
    浏览(20)
  • Vue3父组件访问子组件数据 defineExpose用法

    在Vue3中,父组件可通过创建一个ref(null),然后将赋值的元素写在当前子组件上即可,在需要的时候,通过定义的响应式变量即可获取,获取后即可取得当前子组件内部dom以及当前子组件内部变量方法等,并且直接使用子组件内部方法。但是有时候获取的时候返回的没有什么信

    2024年02月12日
    浏览(24)
  • 在Vue3项目中使用VueCropper裁剪组件(裁剪及预览效果)

    某次看到后台系统中使用到了裁剪组件,感觉挺好玩的并且最近也在学Vue3和Ts,所以就研究了VueCropper组件,封装了裁剪组件,效果如下图。 npm i vue-cropper --save 代码如下(示例): import ‘vue-cropper/dist/index.css’ import { VueCropper } from ‘vue-cropper’ TipsDialog是我自己封装的dialog组

    2023年04月24日
    浏览(30)
  • Vue+SpringBoot后台管理系统:Vue3+TypeScript项目搭建(一)

    查看Note版本 查看npm版本 然后将npm升级至最新版本 将npm下载源换至http://registry.npm.taobao.org 可以在后续的npm下载提高下载速度 安装vue cli node版本v18.16.1 vue-cli版本v5.0.8 创建项目命令 vue_typescript_elementplus_demo 是项目名,可以自定义 选择 Manually select features ,进行自定义 然后选择

    2024年02月13日
    浏览(28)
  • 如何解决vue3.0+typescript项目提示找不到模块“./App.vue

    一、解决方案如下:需在项目目录下加上下面这段代码即可!如果没有vite-env.d.ts目录需要继续往下看 二、如果没有创建vite-env.d.ts这个文件,需要在和main.ts同级目录创建一个vite-env.d.ts文件,如图 创建好后,可能你没有tsconfig.json文件,那么你还要新创建一个tsconfig.json文件,

    2024年02月10日
    浏览(16)
  • vue3 子组件实现v-model用法

    在Vue 3中,实现自定义的 input 组件并支持 v-model 绑定,涉及到对 modelValue 这个默认prop的处理和对应的 update:modelValue 事件的触发。Vue 3使得这个过程比Vue 2更为简化和灵活,尤其是在可以自定义绑定的属性和事件名方面。 步骤 1: 创建自定义Input组件 首先,创建一个自定义的I

    2024年04月27日
    浏览(22)
  • 【项目实战】基于Vue3+TypeScript+Pinia的后台管理系统(coderwhy)

    是基于Vue3、Pinia、VueRouter、Vite、ElementPlus、TypeScript、Echarts等后台系统 https://documenter.getpostman.com/view/12387168/TzzDKb12 baseURL = ‘http://codercba.com:5000’ postman详细使用可以自己搜 也可以使用其他接口管理的工具 给项目添加 环境变量 baseURL https://gitee.com/yangyang993/vue3_ts_cms_admin.git 登录

    2024年02月07日
    浏览(21)
  • Vue3 + Vite2 + TypeScript4搭建企业级项目框架

    1. 创建项目 使用命令行工具进入到你想要创建项目的目录,然后执行以下命令: 这将会创建一个新的项目文件夹和一个 package.json 文件。 2. 安装依赖 接下来你需要在项目中安装 Vue、Vite、TypeScript 和其他需要的依赖。执行以下命令: 以上命令会安装最新的 Vue、Vite 和 TypeSc

    2024年02月08日
    浏览(26)
  • vue项目中对组件使用v-model绑定值,在vue3中如何更新数据

    在el-form 中 el-form-item 绑定组件进行校验 想在表单下面爆红提示 可以对组件使用v-model绑定值 vue2 通过this.$emit(‘input’,value) 更新 v-model值 vue3 通过this.$emit(‘update:modelValue’ ,value) 更新 v-model值

    2024年02月15日
    浏览(25)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包