ts语法如何在Vue3中运用?

一、父子传值的用法

父传子：defineProps的TS写法

  

   

    

     

    
    

     

      // 父组件：和 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>
     
    
   

    

     

    
    

     
 
     
    
  
 

  
 

补充：

如果需要给 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<number>(10)
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      const money = 
      ref(
      10)
     
    
  

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

  

   

    

     

    
    

     

      type 
      Todo = {
     
    
   

    

     

    
    

     
  
      id: 
      number
     
    
   

    

     

    
    

     
  
      name: 
      string
     
    
   

    

     

    
    

     
  
      done: 
      boolean
     
    
   

    

     

    
    

     

      }
     
    
   

    

     

    
    

     

      const list = ref<
      Todo[]>([])
     
    
   

    

     

    
    

     

      list.
      value = [
     
    
   

    

     

    
    

     

        { 
      id: 
      1, 
      name: 
      '吃饭', 
      done: 
      false },
     
    
   

    

     

    
    

     

        { 
      id: 
      2, 
      name: 
      '睡觉', 
      done: 
      true }
     
    
   

    

     

    
    

     

      ]
     
    
  

三、computed的TS用法 

推荐泛型，一行搞定

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

四、非空断言

1.可选链

  

   

    

     

    
    

     

      <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.非空断言

  

   

    

     

    
    

     
  
      // 一定要确定不为空！！！
     
    
   

    

     

    
    

     
  
      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 后缀导入时，直接省略)。