vue3.2/Vite/Ts40: 定义已有品牌 TS 类型
·
Yin灏
目录结构
└─src
├─api
│ └─product
│ └─trademark
│ ├─index.ts
│ └─type.ts
└─views
└─product
└─trademark
└─index.vue
定义接口类型
src/api/product/trademark/type.ts
export interface ResponseData {
code: number;
message: string;
ok: boolean;
}
export interface TradeMark {
id?: number;
tmName: string;
logoUrl: string;
}
export type Records = TradeMark[];
export interface TradeMarkResponseData extends ResponseData {
data: {
records: Records;
totle: number;
size: number;
current: number;
searchCount: boolean;
pages: number;
};
}
使用 TS 类型
src/api/product/trademark/index.ts
import request from "@/utils/request";
import { TradeMarkResponseData } from "./type";
enum API {
TRADEMARK_URL = "/admin/product/baseTrademark/",
}
export const reqHasTrademark = (page: number, limit: number) =>
request.get<any, TradeMarkResponseData>(
API.TRADEMARK_URL + `${page}/${limit}`
);
替换组件内部的 TS 类型
src/views/product/trademark/index.vue
<template>
<el-card>
<el-table border :data="trademarkArr">
<el-table-column
label="序号"
width="80px"
align="center"
type="index"
></el-table-column>
<el-table-column label="品牌名称">
<template #="{row}">
<pre style="color: red">{{row.tmName}}</pre>
</template>
</el-table-column>
<el-table-column label="品牌LOGO">
<template #="{row}">
<img :src="row.logoUrl" width="100" height="100" alt="" />
</template>
</el-table-column>
<el-table-column label="品牌操作">
<template #="{row}">
<el-button type="primary" size="small" icon="Edit"></el-button>
<el-button type="primary" size="small" icon="Delete"></el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
v-model:current-page="pageNo"
v-model:page-size="limit"
:page-sizes="[3,5,7,9]"
:background="true"
layout="prev,pager,next,jumper,->,sizes,total"
:total="total"
></el-pagination>
</el-card>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
import type {
Records,
TradeMarkResponseData,
} from "@/api/product/trademark/type";
// 引入接口
import { reqHasTrademark } from "@/api/product/trademark";
let pageNo = ref<number>(1);
let limit = ref<number>(3);
let total = ref<number>(0);
let trademarkArr = ref<Records>([]);
// 获取品牌数据
const getHasTrademark = async () => {
const result: TradeMarkResponseData = await reqHasTrademark(
pageNo.value,
limit.value
);
if (result.code === 200) {
total.value = result.data.total;
trademarkArr.value = result.data.records;
}
};
onMounted(() => {
getHasTrademark();
});
</script>