## 使用ts 定义类型 供页面使用
interface PageQuery {
pageNum: number;
pageSize: number;
}
export interface DictTypeQuery extends PageQuery {
/**
* keywords 可选参数
*/
keywords?: string;
}
export interface DictVO {
id: number;
name?: string;
sex: number;
detail?: any;
/**
* 如果孩子节点还有值,沿用父级类型
*/
children?: DictVO;
// 类型中并没有声明有content 属性,但是会穿这个值 [x: string]: any; 类型中就可以这样写 使用字符串索引签名
[x: string]: any;
[z: number]: any;
}
interface Point {
x: number;
}
interface Shape {
draw(): void;
}
export interface Human extends Point, Shape {
y: any;
}
export interface DictType {
label: string;
code: string;
styleName?: any;
}
## 定义的类型,页面使用
<script setup lang="ts">
import { reactive, ref } from "vue";
import { DictType, DictTypeQuery, DictVO, Human } from "./assets/type";
/**
* 定义四种类型的数组格式
*/
const arr: string[] = ["1"];
const arr1: number[] = [1];
const arr2: object[] = [
{
a: 11,
},
];
const arr3: any[] = [
1,
"33",
{
a: "11",
},
];
// 接口类型
const dictList = ref<DictType[]>([]);
dictList.value.push({
label: "企业类型",
code: "2",
});
const human = ref<Human>({
x: 1,
y: 2,
draw() {
console.log("3333333");
},
});
console.log(human);
const contentList = ref<DictVO[]>([
{
id: 3333,
sex: 1,
// 类型中并没有声明有content 属性,但是会穿这个值 [x: string]: any; 类型中就可以这样写 使用字符串索引签名
content: "333",
},
]);
contentList.value.push({
id: 444,
sex: 4,
content: "44444444",
detail: {
con: "3333333333",
},
});
let queryParams = reactive<DictTypeQuery>({
pageNum: 1,
pageSize: 10,
});
queryParams.pageNum = 2;
// console.log(queryParams);
// let ids = ref<number[]>([]);
// ids.value.push(2222);
// // ids.value.push("33"); ids 是一个数字类型的数组 只能push数字 ,字符串会报错
//
// let contentArr = reactive<number[]>([]);
// // contentArr.push("22");
// contentArr.push(2222);
// console.log(contentArr);
</script>
<template>
<div class="app-container">
<div v-for="(item, index) in contentList" :key="index">
{{ item.content }}
</div>
</div>
</template>
vue 3 使用ts
最新推荐文章于 2024-07-03 17:47:24 发布