记录 Vue3 + Ts 类型使用

news2024/11/16 11:41:25

阅读时长: 10 分钟

本文内容：记录在 Vue3 中使用 ts 时的各种写法.

在这里插入图片描述

类型大小写

vue3 + ts 项目中，类型一会儿大写一会儿小写。

怎么区分与基础类型使用? String、string、Number、number、Boolean、boolean …

在 js 中，以 string 与 String 举例，后者是前者的包装对象，其他类型也一个意思。
在 ts 中，以 string 与 String 举例，前者是 ts 中的类型，后者是 js 中的对象，其他类型也一个意思。

结论：在 ts 中使用小写 定义参数类型（例如：定义 title: string，而不是 title: String ）。

<script setup lang="ts">

  interface DialogOptions {
    title: string; // 小写
    visible?: boolean; // 小写
  }

  const props = defineProps<DialogOptions>();
  
</script>

props 类型约束

对于 props 类型进行限制时有 4 种写法:

1.(推荐) 先定义接口,然后使用

缺陷：无法定义默认值

<script setup lang="ts">
  interface DialogOptions {
    title: string;
    visible?: boolean;
    callback: (row: any) => any;
  }
  const props = defineProps<DialogOptions>();
</script>

2.(不推荐) 直接通过泛型约束类型

缺陷：写起来过于复杂

<script setup lang="ts">
  const props = defineProps<{
    title: string;
    visible?: boolean;
    callback: (row: any) => any;
  }>();
</script>

3.(推荐) 先定义接口,结合 Vue3 框架提供的 withDefaults() 来约束类型

适用于：可定义默认值

<script setup lang="ts">
  interface DialogOptions {
    title?: string;
    visible?: boolean;
    callback: (row: any) => any;
  }

  const props = withDefaults(defineProps<DialogOptions>(), {
    title: "dialog title",
    visible: false,
  });
</script>

4.(不推荐)保持与 vue2 一致的写法。使用 Vue3 框架提供的宏函数 defineProps() 内置的类型推导功能

优点：此写法虽然与 Vue2 中写法一致，但是 type 的值必须使用大写。大小写混用，容易造成认知错误

<script setup lang="ts">
  const props = defineProps({
    title: {
      type: String, // 大写
      default: "Dialog",
      required: true,
    },
    visible: {
      type: Boolean, // 大写
      default: false,
      required: false,
    },
    callback: {
      type: Function, // 大写
      default: () => {},
      required: false,
    },
  });
</script>

4.(......) 使用 validor 验证 props 参数的情况

需要用到 validator 来约束值时，使用此方法，无法分离使用（如果你有好办法，请评论留言）

<script setup lang="ts">
  const props = defineProps({
    title: {
      type: String as PropType<"提示" | "弹窗" | "确认框">,
      default: "提示",
      validator: (prop: string) => ["提示", "弹窗", "确认框"].includes(prop),
    },
    visible: {
      type: Boolean,
      default: false,
      required: false,
    },
    callback: {
      type: Function,
      default: () => {},
      required: false,
    },
  });
</script>

emit 类型约束

数组用法(无法约束类型)

<script setup lang="ts">
  // 申明
  const emit = defineEmits(["receiveData"]);

  // 使用
  const clickButton = () => {
    emit("receiveData", "456");
  };
</script>

Object 用法 (无法约束类型)

<script setup lang="ts">
  const emit = defineEmits({
    receiveData: (payload) => {
      return typeof payload === "string";
    },
  });

  // 使用
  const clickButton = () => {
    emit("receiveData", 123456);
  };
</script>

ref 类型约束

通过泛型约束

<script setup lang="ts">
  interface ReceiveData {
    value: number;
  }
  const year = ref<ReceiveData>({ value: 2023 });
  console.log(year.value);
</script>

通过值约束

<script setup lang="ts">
  interface ReceiveData {
    value: number;
  }
  const year: Ref<ReceiveData> = ref({ value: 2023 });
  console.log(year.value);
</script>

reactive 类型约束

<script setup lang="ts">
  interface ReceiveData {
    value: number;
  }
  // 1. 通过泛型约束
  const year = reactive<ReceiveData>({ value: 2023 });
  console.log(year);

  // 2. 通过值约束
  const year: ReceiveData = reactive({ value: 2023 });
  console.log(year);
</script>