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

相关推荐
中微子4 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
秋田君4 小时前
深入理解JavaScript设计模式之命令模式
javascript·设计模式·命令模式
中微子5 小时前
React 状态管理 源码深度解析
前端·react.js
风吹落叶花飘荡6 小时前
2025 Next.js项目提前编译并在服务器
服务器·开发语言·javascript
加减法原则6 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js
yanlele7 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
lichenyang4537 小时前
React移动端开发项目优化
前端·react.js·前端框架
天若有情6737 小时前
React、Vue、Angular的性能优化与源码解析概述
vue.js·react.js·angular.js
你的人类朋友7 小时前
🍃Kubernetes(k8s)核心概念一览
前端·后端·自动化运维
web_Hsir7 小时前
vue3.2 前端动态分页算法
前端·算法