Vue3+TypeScript该如何结合使用，这一篇保证你学会

vue3学会了， TypeScript也学会了，但是动手vue3+TypeScript后，发现很多问题，我在这里根据自己多年的经验整理分享vue3+TypeScript所有细节
更多学习资源点我获取

vue3

1. TS + ref

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

  // 一 ts + ref
  // 1 自动类型推导
  const show = ref(false) 
  // 系统会自动推到出show是Ref类型，show.value是boolean类型
  const person = ref({
    age: 10,
    name: 'jiang'
  })
  // person自动推导的类型是
  // const person: Ref<{
  //     age: number;
  //     name: string;
  // }>
  // 2 泛型显示执行类型
  //  ref()
  // 作用： 1 限制初始值， 2 限制后续赋值操作性新值类型  3 智能提示
  type Person = {
    name: string,
    age: number,
    gender?: boolean
  }
  const p1 = ref<Person>({
    name: 'jiang',
    age: 18,
    gender: false
  })
  
</script>

2. TS + reactive

  // 一 ts + reactive
  //  1 自动推到
  const userInfo = reactive({
    name: 'jiang',
    age: 100
  })
  userInfo.age = 100
  
  // 2 泛型类型
  interface Person {
    name: string,
    age: number
  }

  const p: Person = reactive({
    name: 'jiang',
    age: 100
  })

3. TS + computed

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

  // 一 ts + computed
  //  1 自动推到（推荐）
  const list = ref([1,2,3])
  // computedList推导的类型是ComputedRef
  const computedList = computed(() => {
    return list.value.filter(item => item > 2)
  })
  // 2 泛型类型
  const list1 = computed<number[]>(() => {
    return [1,2,3]
    // return 111  // 报错
  })

</script>

4. TS + Inject

// symbolkey.ts
import type {InjectionKey} from 'vue'
const titleKey = Symbol() as InjectionKey<string>
// 如果是响应式数据
// const titleKey = Symbol() as InjectionKey>
export {titleKey}
// App.vue
<script setup lang="ts">
import  A from './A.vue'
import { provide } from 'vue';
import {titleKey} from './symbolkey'

// App -> A -> B
// 只能写string类型
provide(titleKey, 'this is titleKey')
</script>

<template>
  <div>
    <A>
    </A>
  </div>
</template>

<style scoped>
</style>
// A.vue
<template>
  <div class="">
    这是A
    <B></B>
  </div>
</template>

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

<style scoped>
</style>
// B.vue
<template>
  <div class="">这是B{{ title }}</div>
</template>

<script setup lang="ts">
import { inject } from 'vue';
import { titleKey } from './symbolkey';

// title: string | undefined
const title = inject(titleKey)
</script>

<style scoped>
</style>

5. TS + props

//App.vue
<script setup lang="ts">
import Son from './Son.vue'
</script>

<template>
  <div>
    <son title="jiang"></son>
  </div>
</template>

<style scoped>
</style>

//Son.vue
<template>
  <div class="">{{ title }}</div>
</template>

<script setup lang="ts">
// type 和  interface 都可以
type Title = {
    title?: string
}
const props = defineProps<Title>()
// 给title添加一个默认值
const props = withDefaults(defineProps<Title>(), {
    title: '默认值'
})
// const props = defineProps<{
//     title: string
// }>()
// props.title
</script>

<style scoped>
</style>

6. TS + emits

<template>
  <div class="">
    <button onclick="updateHandle"></button>
  </div>
</template>

<script setup lang="ts">
const emits = defineEmits<{
    'update-title': [title: string]
}>()

// 多个参数
// const emits = defineEmits<{
//     'update-title': [title: string, msg: string]
// }>()
const updateHandle = () => {
    emits('update-title', 'this. is title')
}
</script>

<style scoped>
</style>

7. TS + 获取DOM

<template>
  <div class="">
    <input type="text" ref="inputRef">
  </div>
</template>

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

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

onMounted(() => {
    inputRef.value?.focus()
})
</script>

<style scoped>
</style>

8. TS + 获取自定义组件

// App.vue
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import Son from './Son.vue'
type SonInstanceType = InstanceType<typeof Son>
  const sonRef = ref<SonInstanceType | null>(null)
  onMounted(() => {
    sonRef.value?.initData()
  })
</script>

<template>
  <div>
    <son ref="sonRef"></son>
  </div>
</template>

<style scoped>
</style>

// Son.vue
<template>
  <div class="">
  </div>
</template>

<script setup lang="ts">
const initData = () => {
    console.log('initData')
}
defineExpose({initData})
</script>

<style scoped>
</style>

9. 两种命令挂在组件方式

import Alert from './index.vue'
import {h, render , createApp} from 'vue'
function alert(){
    const VNode = h(Alert)
    const conatainer = document.createElement('div')
    document.body.appendChild(conatainer)
    render(VNode, conatainer)
}

function alert2(){
    const VNode = h(Alert)
    const conatainer = document.createElement('div')
    document.body.appendChild(conatainer)
    createApp(VNode).mount(conatainer)
}
function alert3(){
    const conatainer = document.createElement('div')
    document.body.appendChild(conatainer)
    createApp(Alert).mount(conatainer)
}

export {alert, alert2, alert3}