const props = defineProps(["applyBasicInfo", "operateCommandType"]);

const props = defineProps(["applyBasicInfo", "operateCommandType"]);

defineProps({
  applyBasicInfo: null,       // 無(wú)類(lèi)型檢查
  operateCommandType: null     // 無(wú)類(lèi)型檢查
})

<!-- 父組件 -->
<ChildComponent 
  :applyBasicInfo="任何類(lèi)型的數(shù)據(jù)" <!-- 可以是對(duì)象、字符串、數(shù)字等 -->
  operateCommandType="任何內(nèi)容"    <!-- 可以是任意類(lèi)型 -->
/>

<!-- 子組件 -->
<script setup>
// 使用時(shí)需要自行確保類(lèi)型正確
console.log(props.applyBasicInfo) // 可能是任意類(lèi)型
</script>

<!-- 父組件傳遞錯(cuò)誤類(lèi)型 -->
<ChildComponent 
  :applyBasicInfo="123"        <!-- 傳遞數(shù)字 -->
  operateCommandType           <!-- 未傳遞 -->
/>

<!-- 子組件使用時(shí) -->
<script setup>
// 可能引發(fā)運(yùn)行時(shí)錯(cuò)誤
props.applyBasicInfo.name      // 報(bào)錯(cuò)：數(shù)字沒(méi)有 name 屬性
props.operateCommandType       // 拼寫(xiě)錯(cuò)誤也不會(huì)警告（正確是 operateCommandType）
</script>

const props = defineProps({
  applyBasicInfo: {
    type: Object,
    required: true
  },
  operateCommandType: {
    type: String,
    default: "view"
  }
});

interface ApplyBasicInfo {
  id: number;
  name: string;
}

const props = defineProps<{
  applyBasicInfo: ApplyBasicInfo;
  operateCommandType?: string;
}>();

/**
 * @typedef {Object} ApplyBasicInfo
 * @property {number} id
 * @property {string} name
 */

const props = defineProps(["applyBasicInfo", "operateCommandType"]);

const props = defineProps({
  applyBasicInfo: {
    type: Object, // 要求必須是 Object 類(lèi)型
    required: true // 表示父組件必須傳遞這個(gè)prop，不能與 default 同時(shí)使用
  },
  operateCommandType: {
    type: String, // 要求必須是 String 類(lèi)型
    default: "info-view" // 表示當(dāng)父組件沒(méi)有傳遞時(shí)使用默認(rèn)值，不能與 required 同時(shí)使用
  }
});

// 簡(jiǎn)寫(xiě)方式（不推薦）
defineProps(['applyBasicInfo', 'operateCommandType'])

// vs 

// 當(dāng)前對(duì)象寫(xiě)法（推薦）
defineProps({
  applyBasicInfo: { type: Object, required: true },
  operateCommandType: { type: String, default: "info-view" }
})

import type { PropType } from "vue";
import type { ApplyBasicInfo } from "@/interface";

const props = defineProps({
  applyBasicInfo: {
    type: Object as PropType<ApplyBasicInfo>, // 使用標(biāo)準(zhǔn)的PropType進(jìn)行對(duì)象類(lèi)型定義
    required: true // 表示父組件必須傳遞這個(gè)prop，不能與 default 同時(shí)使用
  },
  operateCommandType: {
    type: String,
    default: "info-view" // 表示當(dāng)父組件沒(méi)有傳遞時(shí)使用默認(rèn)值，不能與 required 同時(shí)使用
  }
});

import type { PropType } from "vue";
import type { ApplyBasicInfo } from "@/interface";

applyBasicInfo: {
  type: Object as PropType<ApplyBasicInfo>, // 類(lèi)型斷言
  required: true
}

// 普通寫(xiě)法（只有 Vue 校驗(yàn)）
applyBasicInfo: {
  type: Object,  // 只知道是個(gè)對(duì)象，不清楚具體結(jié)構(gòu)
  required: true
}

// 當(dāng)前寫(xiě)法（Vue校驗(yàn) + TS類(lèi)型）
applyBasicInfo: {
  type: Object as PropType<ApplyBasicInfo>, // 明確對(duì)象結(jié)構(gòu)
  required: true
}

graph TD
    A[父組件傳遞 props] --> B{Vue 運(yùn)行時(shí)校驗(yàn)}
    B -->|通過(guò)| C[組件內(nèi)使用]
    B -->|不通過(guò)| D[控制臺(tái)警告]
    C --> E[TypeScript 類(lèi)型檢查]
    E -->|類(lèi)型正確| F[正常開(kāi)發(fā)]
    E -->|類(lèi)型錯(cuò)誤| G[IDE 提示錯(cuò)誤]

// 假設(shè)在 @/interface 中
interface ApplyBasicInfo {
  id: number;          // 申請(qǐng)ID
  applicant: string;   // 申請(qǐng)人姓名
  status: 'pending' | 'approved'; // 申請(qǐng)狀態(tài)
  createTime: Date;    // 創(chuàng)建時(shí)間
}

// 正確使用（有提示）
props.applyBasicInfo.id          // 提示 number 類(lèi)型
props.applyBasicInfo.applicant   // 提示 string 類(lèi)型

// 錯(cuò)誤使用（立即報(bào)錯(cuò)）
props.applyBasicInfo.APPlicant   // ? 拼寫(xiě)錯(cuò)誤提示
props.applyBasicInfo.status = 'rejected' // ? 類(lèi)型不匹配

<template>
  <!-- 顯示申請(qǐng)人信息 -->
  <div>{{ props.applyBasicInfo.applicant }}</div>
  
  <!-- 根據(jù)操作類(lèi)型顯示不同內(nèi)容 -->
  <div v-if="operateCommandType === 'info-view'">
    查看模式
  </div>
</template>

// 錯(cuò)誤提示：Cannot find name 'ApplyBasicInfo'
// 解決方案：確保類(lèi)型文件正確定義并導(dǎo)出
// 在 @/interface.ts 中：
export interface ApplyBasicInfo { ... }

<!-- 父組件傳遞錯(cuò)誤數(shù)據(jù)結(jié)構(gòu) -->
<MyComponent :apply-basic-info="{ id: '100' }" />
<!-- 錯(cuò)誤：id 應(yīng)該是 number -->

// 組件內(nèi)使用時(shí)
const submit = () => {
  console.log(props.applyBasicInfo.createTime) // 如果接口中有該屬性
}
// 當(dāng)父組件傳遞的對(duì)象缺少 createTime 時(shí)，TS 會(huì)報(bào)錯(cuò)

interface ApplyBasicInfo {
  /**
   * 申請(qǐng)的唯一標(biāo)識(shí)
   * @example 123456
   */
  id: number;
}

applyBasicInfo: {
  type: Object as PropType<ApplyBasicInfo>,
  required: true,
  validator: (value: ApplyBasicInfo) => {
    return !!value.id // 添加自定義校驗(yàn)邏輯
  }
}

// 對(duì)于復(fù)雜對(duì)象，建議提供默認(rèn)值函數(shù)
applyBasicInfo: {
  type: Object as PropType<ApplyBasicInfo>,
  default: () => ({ id: 0, applicant: '', status: 'pending' })
}

import type { ApplyBasicInfo } from "@/interface";

const props = defineProps({
  applyBasicInfo: {
    type: Object as () => ApplyBasicInfo, // 使用箭頭函數(shù)返回類(lèi)型
    required: true // 表示父組件必須傳遞這個(gè)prop，不能與 default 同時(shí)使用
  },
  operateCommandType: {
    type: String,
    default: "info-view" // 表示當(dāng)父組件沒(méi)有傳遞時(shí)使用默認(rèn)值，不能與 required 同時(shí)使用
  }
});

import type { ApplyBasicInfo } from "@/interface"; // 導(dǎo)入類(lèi)型

const props = defineProps({
  applyBasicInfo: {
    type: Object as () => ApplyBasicInfo, // 核心類(lèi)型聲明
    required: true
  },
  operateCommandType: {
    type: String,
    default: "info-view"
  }
});

import type { ApplyBasicInfo } from "@/interface";

// 假設(shè)在 @/interface 中
interface ApplyBasicInfo {
  id: number;
  name: string;
  status: 'pending' | 'approved';
  createTime: Date;
}

const props = defineProps({...});

{
  type: Object as () => ApplyBasicInfo,
  required: true
}

// 使用時(shí)可以獲得類(lèi)型提示
props.applyBasicInfo.id // 提示 number 類(lèi)型
props.applyBasicInfo.name // 提示 string 類(lèi)型

{
  type: String,
  default: "info-view"
}

// 父組件使用時(shí)
<MyComponent 
  :apply-basic-info="{
    id: 123,           // ? 必須 number
    name: '張三',       // ? 必須 string
    status: 'pending',  // ? 必須是枚舉值
    createTime: new Date() // ? 必須 Date
  }"
/>

// 錯(cuò)誤1：缺少必填字段
props.applyBasicInfo.missingProp // ? TS 報(bào)錯(cuò)：屬性不存在

// 錯(cuò)誤2：類(lèi)型不匹配
props.applyBasicInfo.id = "100" // ? TS 報(bào)錯(cuò)：不能將 string 賦給 number

// 錯(cuò)誤3：錯(cuò)誤的值類(lèi)型
<MyComponent :apply-basic-info="'字符串'" /> 
// ? Vue 控制臺(tái)警告：期望 Object，得到 String

<script setup>
// 獲得智能提示
const submit = () => {
  console.log(props.applyBasicInfo.id) // 正確：number 類(lèi)型
  console.log(props.operateCommandType.toUpperCase()) // 正確：string 方法
}

// 類(lèi)型安全操作
const statusLabel = computed(() => {
  switch(props.applyBasicInfo.status) {
    case 'pending': return '審批中';
    case 'approved': return '已通過(guò)';
    // case 'rejected' 會(huì)觸發(fā) TS 錯(cuò)誤（如果接口中未定義）
  }
})
</script>

// 使用解構(gòu)默認(rèn)值
const { applyBasicInfo = DEFAULT_INFO } = toRefs(props)

interface ApplyBasicInfo {
  /** 申請(qǐng)ID，唯一標(biāo)識(shí) */
  id: number;
  /** 申請(qǐng)人姓名 */
  name: string;
  // ...
}

import { toRefs } from "vue";
import type { ApplyBasicInfo } from "@/interface";

const props = defineProps<{
  applyBasicInfo: ApplyBasicInfo;
  operateCommandType: string;
}>();

{
  applyBasicInfo: ApplyBasicInfo;
  operateCommandType: string;
}

interface ApplyBasicInfo {
  id: number;
  applicantName: string;
  applyDate: Date;
  // ...其他字段
}

{
  applyBasicInfo: { /* 具體數(shù)據(jù) */ },
  operateCommandType: "edit" // 示例值
}

// 父組件使用
<ChildComponent 
  :applyBasicInfo="myApplyInfo" 
  operateCommandType="edit"
/>

// 子組件內(nèi)使用
console.log(props.applyBasicInfo.applicantName)
console.log(props.operateCommandType)

const props = defineProps({
  applyBasicInfo: {
    type: Object,
    required: true
  },
  operateCommandType: {
    type: String,
    default: 'view'
  }
})

<script setup lang="ts" name="ApplySampleOtherTable">

// 1、數(shù)組寫(xiě)法
const props = defineProps(["applySampleData", "applySampleTableScrollTop", "operateCommandType"]);
</script>

<script setup lang="ts" name="ApplySampleOtherTable">

// 2、對(duì)象寫(xiě)法
const props = defineProps({
  applySampleData: {
    type: Object, // 要求必須是 Object 類(lèi)型
    required: true // 表示父組件必須傳遞這個(gè)prop，不能與 default 同時(shí)使用
  },
  applySampleTableScrollTop: {
    type: Number, // 要求必須是 Number 類(lèi)型
    default: 0 // 表示當(dāng)父組件沒(méi)有傳遞時(shí)使用默認(rèn)值，不能與 required 同時(shí)使用
  },
  operateCommandType: {
    type: String, // 要求必須是 String 類(lèi)型
    default: "info-add" // 表示當(dāng)父組件沒(méi)有傳遞時(shí)使用默認(rèn)值，不能與 required 同時(shí)使用
  }
});
</script>

<script setup lang="ts" name="ApplySampleOtherTable">
import type { ApplySample } from "@/interface";
import type { PropType } from "vue";

// 3、TypeScript 的類(lèi)型聲明寫(xiě)法1：使用標(biāo)準(zhǔn)的PropType進(jìn)行對(duì)象類(lèi)型定義
const props = defineProps({
  applySampleData: {
    type: Object as PropType<ApplySample[]>, // 要求必須是 Object 類(lèi)型，類(lèi)型為ApplySample[]
    required: true // 表示父組件必須傳遞這個(gè)prop，不能與 default 同時(shí)使用
  },
  applySampleTableScrollTop: {
    type: Number, // 要求必須是 Number 類(lèi)型
    default: 0 // 表示當(dāng)父組件沒(méi)有傳遞時(shí)使用默認(rèn)值，不能與 required 同時(shí)使用
  },
  operateCommandType: {
    type: String, // 要求必須是 String 類(lèi)型
    default: "info-add" // 表示當(dāng)父組件沒(méi)有傳遞時(shí)使用默認(rèn)值，不能與 required 同時(shí)使用
  }
});
</script>

<script setup lang="ts" name="ApplySampleOtherTable">
import type { ApplySample } from "@/interface";

// 4、TypeScript 的類(lèi)型聲明寫(xiě)法2：結(jié)合了 Vue 的運(yùn)行時(shí) props 校驗(yàn)和 TypeScript 類(lèi)型提示的混合寫(xiě)法
const props = defineProps({
  applySampleData: {
    type: Object as () => ApplySample[], // 要求必須是 Object 類(lèi)型，類(lèi)型為ApplySample[]，使用箭頭函數(shù)返回類(lèi)型
    required: true // 表示父組件必須傳遞這個(gè)prop，不能與 default 同時(shí)使用
  },
  applySampleTableScrollTop: {
    type: Number, // 要求必須是 Number 類(lèi)型
    default: 0 // 表示當(dāng)父組件沒(méi)有傳遞時(shí)使用默認(rèn)值，不能與 required 同時(shí)使用
  },
  operateCommandType: {
    type: String, // 要求必須是 String 類(lèi)型
    default: "info-add" // 表示當(dāng)父組件沒(méi)有傳遞時(shí)使用默認(rèn)值，不能與 required 同時(shí)使用
  }
});
</script>

<script setup lang="ts" name="ApplySampleOtherTable">
import type { ApplySample } from "@/interface";

// 5、TypeScript 的類(lèi)型聲明寫(xiě)法3：vue3的寫(xiě)法，不設(shè)置默認(rèn)值
const props = defineProps<{
  applySampleData: ApplySample[];
  applySampleTableScrollTop: number;
  operateCommandType: string;
}>();
</script>

<script setup lang="ts" name="ApplySampleOtherTable">
import type { ApplySample } from "@/interface";

// 6、TypeScript 的類(lèi)型聲明寫(xiě)法3：vue3的寫(xiě)法，設(shè)置默認(rèn)值
const props = withDefaults(
  // withDefaults 是 Vue3 提供的一個(gè)工具函數(shù)，專(zhuān)門(mén)用于處理類(lèi)型聲明的 props 默認(rèn)值。
  defineProps<{
    applySampleData: ApplySample[];
    applySampleTableScrollTop: number;
    operateCommandType: string;
  }>(),
  {
    // 數(shù)組類(lèi)型，使用工廠(chǎng)函數(shù)返回默認(rèn)值
    applySampleData: () => [],
    // 數(shù)字類(lèi)型，使用默認(rèn)值
    applySampleTableScrollTop: 0,
    // 字符串類(lèi)型，使用默認(rèn)值
    operateCommandType: "info-add"
  }
);
</script>

<script setup lang="ts" name="CommonApplyItemTable">
import type { ApplyItem } from "@/interface";

const props = withDefaults(
  defineProps<{
    // 受理項(xiàng)目列表
    applyItemList: ApplyItem[];
    // 受理模式，1：樣品檢相同項(xiàng)目；2：樣品檢不同項(xiàng)目
    dataType: 1 | 2;
    // 操作指令類(lèi)型：新增刪除：info-new；修改：info-modify；查看：info-view
    operateCommandType: "info-add" | "info-modify" | "info-view";
  }>(),
  {
    applyItemList: () => {
      let applyItemList: ApplyItem[] = [];
      return applyItemList;
    },
    dataType: 1,
    operateCommandType: "info-view"
  }
);
</script>

<script setup lang="ts" name="CommonApplyBasicInfoForm">
import type { ApplyBasicInfo, ApplyBasicInfoOperateCommandType } from "@/interface";

const props = withDefaults(
  defineProps<{
    // 受理基礎(chǔ)信息
    applyBasicInfo: ApplyBasicInfo;
    // 操作指令類(lèi)型
    operateCommandType: ApplyBasicInfoOperateCommandType;
  }>(),
  {
    // 對(duì)象類(lèi)型，使用工廠(chǎng)函數(shù)返回默認(rèn)值
    applyBasicInfo: () => {
      return {
        id: 0,
        verifyType: null,
        verifyTypeName: "",
        outerApplyId: "",
        acceptType: "",
        acceptTypeName: "",
        acceptDate: "",
        acceptGroupId: null,
        acceptGroupName: "",
        acceptPerson: "",
        acceptPersonName: "",
        reportDate: "",
        wspjType: 0,
        sjdwName: "",
        sjdwAddress: "",
        sjdwRegion: "",
        cydwName: "",
        cydwAddress: "",
        cyDate: "",
        cyPerson: "",
        cyType: "",
        wsdwName: "",
        wsdwAddress: "",
        wsPerson: "",
        lxPerson: "",
        lxPhone: "",
        email: "",
        payType: "",
        createTime: ""
      };
    },
    // 字符串類(lèi)型，使用默認(rèn)值
    operateCommandType: "info-view"
  }
);