vue3实战:.ts文件定义interface、export抛出、其他文件的调用方式
此类应用场景:
- 常见于vue3 项目在进行数据重构后,二次赋值导致的数据格式校验不匹配问题。
- 针对此类场景问题,可由此切入,进而解决语法爆红bug.
代码示例:
-
在citys.ts 文件定义:
js// 定义城市对象类型 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 文件中引用、使用:
引用方式:
jsimport * as Citys from '@/utils/citys';
使用定义的类型:【三种使用方式,定义示下】
jsconst acc: Citys.CityList[] = [] // const acc = [] as Citys.CityList[] // const acc = ref<Citys.CityList[]>([])
博主自留地:
- 案例参考:
代码明细,请参考本地项目:
klcsxtxt.sys_uniapp_vue3》小程序端》地区选择功能。