Vue3：Typescript与组合式API、defineProps、defineEmits等使用

标注类型：props

使用 defineProps()

使用 <script setup>

在使用 <script setup> 时，defineProps() 宏函数支持从它的参数中推导类型：

• 运行时声明

<script setup lang="ts">
/**
 *  type：参数类型
 *  required：必须传参（默认：false）
 *  default：默认值
 * /
const props = defineProps({
  name: {
    type: String,
    required: true
  },
  title: {
    type: Number,
       required: false
  },
  status: Boolean
})
</script>

• 基于类型的声明

<script setup lang="ts">
/**
 * 方式一：通过泛型参数
 */
const props = defineProps<{
  name?: string,
  title: number,
  status?: boolean
}>()

/**
 * 方式二：编写单独接口
 */
interface Props {
  name?: string,
  title: number,
  status?: boolean
}
const props = defineProps<Props>()

// ?代表可选参数 可以不用传
</script>

注意：接口或对象字面类型可以包含从其他文件导入的类型引用，但是，传递给 defineProps 的泛型参数本身不能是一个导入的类型， 这是因为Vue 组件是单独编译的，编译器目前不会抓取导入的文件以分析源类型（这里只是 Vue3.2 不支持，可能在之后的版本中会支持），即：

<script setup lang="ts">
// 支持
interface Props {
  /****/
}
defineProps<Props>()

// 不支持
import { Props } from './Props'
defineProps<Props>()
</script>

设置默认值

当使用基于类型的声明时，我们失去了为 props 声明默认值的能力。这可以通过 withDefaults 编译器宏解决：

<script setup lang="ts">
const props = withDefaults(defineProps<{
  name: string
  title?: string
  num: number[]
}>(), {
  title: '测试标题',
  num: () => [10, 20, 30, 40, 50]
})
</script>

标注类型：emits

使用 defineEmits()

<script setup lang="ts">
// 运行时
const emit = defineEmits(['change', 'update'])

// 基于类型
const emit = defineEmits<{
  (e: 'change', id: number): void
  (e: 'update', array: number[]): void
}>()

// 使用
emit('change', 10)
</script>

标注类型：ref()

• 基本使用

ref 会根据初始化时的值推导其类型，也可指定具体类型：

<script setup lang="ts">
import {ref} from 'vue'
// 推导类型为 number
const count = ref(100)
// 指定具体类型
const val = ref<string>('你好世界')
</script>

• 复杂类型使用

通过使用 Ref 这个类型来指定更为复杂的类型：

<script setup lang="ts">
import {ref} from 'vue'
import type {Ref} from 'vue'

// 标识既可以是数值类型 也可以是布尔类型
const count: Ref<number | boolean> = ref(100)
// 或者直接使用 ref() 传入一个泛型参数，来覆盖默认的推导行为
const value = ref<string | boolean>(true)
</script>

注意：如果你指定了一个泛型参数但没有给出初始值，那么最后得到的就将是一个包含 undefined 的联合类型，如：

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

// 推导类型为Ref<number | boolean | undefined>
const count = ref<number | boolean>()
console.log(count.value)// 结果：undefined
</script>

标注类型：reactive()

reactive() 也会隐式地从它的参数中推导类型：

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

// 推导得到的类型：{ name: string }
const user = reactive({name: '张三'})

// 使用接口
interface User {
  name: string
  age: string | number
  gender?: string
}

const user: User = reactive({name: '张三', age: 23})
// 或者使用 reactive 泛型
const user = reactive<User>({name: '张三', age: 23, gender: '男'})
</script>

标注类型：computed()

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

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

const age = ref(23)

// 推导类型：ComputedRef<number>
const userAge = computed(() => age.value++)

// 使用泛型
const userAge = computed<number>(() => {
  // 若返回值不是 number 类型则会报错
  return 23;
})

// 设置 getter setter
const userAge = computed({
  get: () => {
  },
  set: () => {
  }
})
</script>