制作公司网站要多少钱热词搜索排行榜
阅读时长: 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>
参考阅读
- types validator issuse#8152