vue 3 使用ts

## 使用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>