How does ts syntax work in Vue3?

1. The usage of passing value from parent to child

Father to son: TS writing method of defineProps

// 父组件：和 vue2 一样正常传值
<template>
  <div class="login-page">
    <cp-nav-bar title="登录" right-text="注册"></cp-nav-bar>
  </div>
</template>

// 子组件：接收
<script setup lang="ts">
import { defineProps } from 'vue'
const props = defineProps<{
  title: string
  rightText?: string // ？表示可传可不传
}>()
// js中使用
console.log(props.title)
</script>

<template>
  <!-- 模板中直接使用变量名 -->
  <van-nav-bar
    fixed
    left-arrow
    :title="title"
    :right-text="rightText"
  ></van-nav-bar>
</template>

Replenish:

If you need to set a default value for props, you need to use  withDefaults a function:

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

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

From son to father: TS writing method of defineEmits

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

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

2. TS usage of ref/reactive

1. Simple data types do not need to define ts types

ref() Will implicitly deduce the type from the data

// const money = ref<number>(10)

const money = ref(10)

 2. If it is a complex type, it is recommended to use generics

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

3. Computed TS Usage 

Generics are recommended and can be done in one line

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

4. Non-null assertion

1. Optional Chaining

<script setup lang="ts">
import { onMounted, ref } from 'vue';

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

onMounted(()=>{
  // 如果获取的元素不是input,就可能没有value值
  console.log(input.value?.value);
})
</script>

<template>
  <div>App组件</div>
  <input type="text" ref="input" value="abc">
</template>

2. Non-null assertion

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

Five, custom TypeScript type declaration file

1. Provide types to JS files

When importing a .js file, TS will automatically load a .d.ts file with the same name as the .js to provide type declarations.

Specific steps are as follows:

1.declare keyword: Used for type declarations, declaring types for variables that already exist elsewhere (for example, .js files) instead of creating a new variable.

2. For  type interface those that are clearly of TS type (only used in TS), you can use 省略 the declare keyword.

3. For other JS variables,  declare keywords should be used to clearly specify that this is used for type declaration.

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

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

 

 2. Sharing type

If  .ts the same type is used in multiple files, you can create  .d.ts a file to provide this type to realize type sharing.

1. Create  index.d.ts a type declaration file.

2. Create the type that needs to be shared and use  export the export (types in TS can also be used to  import/export achieve modular functions).

3. In the file that needs to use the shared type  .ts ,  import it can be imported ( .d.ts when the suffix is ​​imported, it is omitted directly).