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

草巾冒小子2025-07-10 23:11

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 文件中引用、使用：

引用方式：
js 复制代码
```
import * as Citys from '@/utils/citys';
```
使用定义的类型：【三种使用方式，定义示下】
js 复制代码
```
const acc: Citys.CityList[] = []
// const acc = [] as Citys.CityList[]
// const acc = ref<Citys.CityList[]>([])
```

博主自留地：

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