网站模板上传教程广告软文营销平台

vue3实战：.ts文件定义interface、export抛出、其他文件的调用方式

此类应用场景：

• 常见于vue3 项目在进行数据重构后，二次赋值导致的数据格式校验不匹配问题。
• 针对此类场景问题，可由此切入，进而解决语法爆红bug.

---

代码示例：

• 在citys.ts 文件定义：

  // 定义城市对象类型
  interface City {city_name: string;
  }// 定义城市列表对象类型
  export interface CityList {idx: string;cities: City[];
  }/** 全国城市列表 */
  export const cityListPO: CityList[] = [{"idx": "A","cities": [{"city_name": "阿坝藏族羌族自治州",},{"city_name": "阿克苏市",},······]}
  ];
  

• 在 indexList.vue 文件中引用、使用：

  引用方式：

  import * as Citys from '@/utils/citys';
  

  使用定义的类型：【三种使用方式，定义示下】

  const acc: Citys.CityList[] = []
  // const acc = [] as Citys.CityList[]
  // const acc = ref<Citys.CityList[]>([])
  

---

博主自留地：

• 案例参考：
  代码明细，请参考本地项目：
  klcsxtxt.sys_uniapp_vue3》小程序端》地区选择功能。

---