typescript 的常用方式（二）

---

前言

提示：

---

一、交叉类型

下面代码第一段 的效果和第二段的效果

type CommonType = {
  value: string;
  value2: string;
};

type TypeA = CommonType & {
  type: string;
};

type TypeB = CommonType & {
  value3: string;
};

type TypeA = {
  type: string;
  value: string;
  value2: string;
};

type TypeB = CommonType & {
  value: string;
  value2: string;
  value3: string;
};

二、ref 定义数据类型

1. 数组

import { ref, Ref } from 'vue';
interface listType {
   value1: string,
   value2: string,
   value3: Function,
   value4: string,
   value5: string,
   value6: string,
   value7?: boolean,
 }
 const list: Ref<listType[]> = ref([])

2. 对象

import { ref, Ref } from 'vue';
type listType  = {
   value1: string,
   value2: string,
 }
const list: Ref<listType> = ref({value1: '', value2:''})
console.log('list', list.value.value1);

3. 定义一个router的id为number类型

在 Vue Router 中，route.query 的类型是 { [key: string]: string | (string | null)[] }，也就是说，它的属性值可能是字符串或者字符串数组。因此，route.query.id 的类型可能是 string 或者 string[]，而不是 number。如果需要定义一个router的数据类型为number，可以如下

const id = router.query.id // 错误定义
const id: number = Number(route.query.id)  // 正确定义