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

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》小程序端》地区选择功能。

相关推荐
sorryhc6 分钟前
【AI解读源码系列】ant design mobile——Avatar头像
前端·javascript·react.js
Mintopia14 分钟前
🎭 一场浏览器里的文艺复兴
前端·javascript·aigc
Mintopia14 分钟前
🎬《Next 全栈 CRUD 的百老汇》
前端·后端·next.js
AryaNimbus29 分钟前
你不知道的Cursor系列:如何使用Cursor同时开发多项目?
前端·ai编程·cursor
国家不保护废物33 分钟前
Function Call与MCP:给AI插上连接现实的翅膀
前端·aigc·openai
500佰34 分钟前
阿里Qoder AI 新开发工具,长期记忆、Wiki和Quest模式是它的独有特性
前端
Juchecar35 分钟前
Vue3 Class 和 Style 绑定详解
前端·vue.js
coding随想36 分钟前
揭秘DOM键盘事件:从基础到高级技巧全解析!
前端
xianxin_38 分钟前
CSS Position(定位)
前端
xianxin_38 分钟前
CSS Float(浮动)
前端