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

相关推荐
酷飞飞5 分钟前
C语言的复合类型、内存管理、综合案例
java·c语言·前端
轻抚酸~9 分钟前
小迪23-28~31-js简单回顾
javascript·web安全
姜太小白1 小时前
【前端】CSS Grid布局介绍及示例
前端·css
风继续吹..4 小时前
后台管理系统权限管理:前端实现详解
前端·vue
yuanmenglxb20045 小时前
前端工程化包管理器:从npm基础到nvm多版本管理实战
前端·前端工程化
新手小新5 小时前
C++游戏开发(2)
开发语言·前端·c++
我不吃饼干6 小时前
【TypeScript】三分钟让 Trae、Cursor 用上你自己的 MCP
前端·typescript·trae
飞翔的佩奇6 小时前
基于SpringBoot+MyBatis+MySQL+VUE实现的经方药食两用服务平台管理系统(附源码+数据库+毕业论文+部署教程+配套软件)
数据库·vue.js·spring boot·mysql·毕业设计·mybatis·经方药食两用平台
小杨同学yx7 小时前
前端三剑客之Css---day3
前端·css
星月心城7 小时前
Promise之什么是promise?(01)
javascript