TypeScript 声明复杂变量时 如何指定数据类型？PropType 有啥用？

目录

一. TypeScript 定义复杂变量示例

二. 使用 PropType 定义 vue props 数据类型示例

---

一. TypeScript 定义复杂变量示例

• 对象、数组、函数等，都算复杂变量
• 复杂变量少用 any 定义数据类型，应该使用具体数据类型接口，定义数据类型
• 举个栗子：

1. 类似 columnData: any[] = []，是不优雅的写法
2. 类似 columnData: ColumnData[] = []，是优雅的写法

---

• 举个栗子：

// bad
columnData: any[] = []

// good
interface ColumnData {
  title?: string;
  key?: number;
  type?: string;
  render?: object;
}

columnData: ColumnData[] = []

---

二. 使用 PropType 定义 vue props 数据类型示例

• 用 vue3 封装组件时，难免需要规定较为复杂的数据类型，用于声明组件接受的参数类型，比如下面这种数据类型接口

// 这是一个复杂的数据类型接口
export interface ColumnProps {
  _id: number;
  title: string;
  description: string;
}

• 假设我现在需要指定一个变量 list 的数据类型为 Array，如何规范 Array 的格式呢？

1. 错误示例：type: Array: ColumnProps[],
2. 正确示例：type: Array as PropType<ColumnProps[]>,

• 原因：此处 Array 并非作为数据类型存在，而是作为 构造函数 存在，为构造函数指定类型，应用  PropType  这个 API

• ---

  举个栗子：

// bad
  props: {
    list: {
      type: ColumnProps[],
      required: true
    }
  }

// good
import { PropType } from 'vue'
export interface ColumnProps {
  _id: string;
  title: string;
  description: string;
}

  props: {
    list: {
      // 此处的 Array 并不是变量类型，而是构造函数
      // 通过 PropType 指定构造函数的类型
      type: Array as PropType<ColumnProps[]>,
      required: true
    }
  }