ts语法如何在Vue3中运用?

一、父子传值的用法

父传子:defineProps的TS写法

// 父组件:和 vue2 一样正常传值

// 子组件:接收




补充:

如果需要给 props 设置默认值,需要使用 withDefaults 函数:

const props = withDefaults(defineProps<{
  title?: string
  rightText?: string
}>(),{
  title: '首页'
})

// 以上代码通过语法糖解构,可以优化成如下代码:
const { title, title= "首页" } = defineProps<{
  title?: string
  rightText?: string
}>();

子传父:defineEmits的TS写法

// 子传
const emit = defineEmits<{
  (e: 'changeMoney', money: number): void
  (e: 'changeCar', car: string): void
}>()

// 父组件:和 vue2 一样正常接收
// @changeMoney="方法名"

二、ref/reactive的TS用法

1.简单数据类型可以不定义ts类型

ref() 会隐式的依据数据推导类型

// const money = ref(10)

const money = ref(10)

 2.如果是复杂类型,建议用泛型

type Todo = {
  id: number
  name: string
  done: boolean
}
const list = ref([])
list.value = [
  { id: 1, name: '吃饭', done: false },
  { id: 2, name: '睡觉', done: true }
]

三、computed的TS用法 

推荐泛型,一行搞定

const total = computed(() => (count.value * 2).toFixed(2));

四、非空断言

1.可选链




2.非空断言

  // 一定要确定不为空!!!
  console.log(input.value!.value)
  input.value!.value = '123'

五、自定义TypeScript类型声明文件

1.给JS文件提供类型

在导入 .js 文件时,TS 会自动加载与 .js 同名的 .d.ts 文件,以提供类型声明。

具体步骤如下:

1.declare 关键字:用于类型声明,为其他地方(比如,.js 文件)已存在的变量声明类型,而不是创建一个新的变量。

2.对于 type interface 等这些明确就是 TS 类型的(只能在 TS 中使用的),可以省略 declare 关键字。

3.其他 JS 变量,应该使用 declare 关键字,明确指定此处用于类型声明。

// 参考示例:自定义组件的类型,必须是同名的.d.ts文件
import CpIcon from '@/components/CpIcon.vue'

declare module 'vue' {
  interface GlobalComponents {
    CpIcon: typeof CpIcon
  }
}

 

 2.共享类型

如果多个 .ts 文件中都用到同一个类型,此时可以创建 .d.ts 文件提供该类型,实现类型共享。

1.创建 index.d.ts 类型声明文件。

2.创建需要共享的类型,并使用 export 导出(TS 中的类型也可以使用 import/export 实现模块化功能)。

3.在需要使用共享类型的 .ts 文件中,通过 import 导入即可(.d.ts 后缀导入时,直接省略)。

你可能感兴趣的:(vue,ts,javascript,vue.js,前端,typescript)