TypeScript学习(九)interface 和 type 到底有什么区别?
总结
ts中定义对象类型有两种方式,interface和type,能用interface用interface,用不了再用type
参考
typescript 中的 interface 和 type 到底有什么区别?
实例
interface1
interface IBase { [propName: string]: any } export interface IRewardsInfo extends IBase { id: number, name: string, status: number, stock: number, icon: IBackgroundImgInfo[], labels: Array<string>, seniorReward: boolean } export interface IRewardsGroupInfo extends IBase { rewards: IRewardsInfo[] } export interface ILevelInfo extends IBase { point: number, normalRewardGroup: IRewardsGroupInfo[], seniorRewardGroup: IRewardsGroupInfo[] } export interface ITasks extends IBase { id: number | string, name: string, point: number, status: number, linkTo: string } export interface IBackgroundImgInfo extends IBase { cdn?: string, url: string } export interface IBpSwitchInfo extends IBase { showDownloadModule: boolean } export interface IBattlePassInfo extends IBase { sellOut: boolean, currentPoint: number, startTimeMillis: number, endTimeMillis: number, status: number, canDraw: boolean, canTakePartIn: boolean, point: Array<number>, bpSwitch: IBpSwitchInfo, level: ILevelInfo[], rawPrize: number, prize: number, tasks: ITasks[], backgroundImg: IBackgroundImgInfo[], backgroundColor: string, user: { head: IBackgroundImgInfo[] } } export interface IResInfo extends IBase { battlePassInfo: IBattlePassInfo } export interface IDrawGiftResInfo extends IBase { result: number, successNum: number, failNum: number } export interface IGameInfo extends IBase { gameId: string, icon?: string, downloadUrl: string, downloadName: string, gameName?: string, iosScheme?: string, gameBundleId: string, provider: number } export interface IResp extends IBase { result: number } export interface IGameInfoResp extends IResp { games: IGameInfo[] } export interface IGetPayCreateResInfo extends IBase, IResp { orderId: string, merchantId: string } export interface IDetailInfo extends IBase{ status: number } export interface IGetPayDetailResInfo extends IBase, IResp, IDetailInfo { detail: IDetailInfo } export interface IBindingSuccessInfo extends IBase { roleId: string, roleIcon: string } export interface IBindingInfo extends IBase { roleId: string, roleIcon: string, roleName: string } export interface IGiftStatusCountInfo extends IBase { notRewardNum: number, canRewardNum: number, rewardedNum: number, noGiftNum: number, rareNum: number } export interface IGroupGiftModelInfo extends IBase { isGroupGiftModelShow?: boolean, btnTextCancel?: string, btnTextOk?: string, rewardsArr?: IRewardsInfo[], title?: string, action?: string, flag: number, actionType: string } export interface IPayRewardsInfo extends IBase { name: string, icon: IBackgroundImgInfo[] } export interface IGuidePayInfo extends IBase { rawPrize: number, prize: number, shouldGuidePay: boolean, rewards: IPayRewardsInfo[] } export interface IInfo extends IBase { guidePay: IGuidePayInfo }
interface2
export interface IBase { [propName: string]: any } export interface IpropInfo extends IBase { name: string, icon: string } export interface IgameInfo extends IBase { userGiftVOList: IgiftInfo[] } export interface IgiftInfo extends IBase { name: string, desc: string, rewarded: boolean, completed: boolean, result: string, startTime: number | string, endTime: number | string, propVOList: IpropInfo[], usedCountDesc: string, taskId: string, giftId: string, // 后加的 btnText?: string, classStatus?: string, descList?: string[], moreIconFlag?: boolean, tag?: number, // vip等级 }
type1
import { type } from 'os'; // 1-未完成,2-已完成,3-已结束 export enum TASKSTATUS { UNDONE = 1, DONE = 2, END = 3, } export enum TASKTYPE { BOOK = 1, LIVE = 2, } // PREPARING(1), // 未开始 // TO_BEGIN(2), // 即将开始 // ONGOING(3), // 进行中 // END(4), // 已结束 export enum EVENTSTATUS { PREPARING = 1, TO_BEGIN = 2, ONGOING = 3, END = 4, } // 1. 手动点击报名 2.从任务点击跳转自动拉起的 3. 预约后自动引导的报名 export enum ENROLL_POPUP_SOURCE { CLICK = 1, TASK = 2, BOOK = 3, } // UNKNOWN_RESERVE_STATUS(0),// 未知 // NOT_RESERVE(1), // 未预约 // RESERVE(2), // 已预约 // UNRECOGNIZED(-1); export enum BOOKSTATUS { UNKNOWN_RESERVE_STATUS = 0, NOT_RESERVE = 1, RESERVE = 2, UNRECOGNIZED = 3, } // NEWLY(0), // 未报名 // VALID(1), // 报名有效 // CANCELED(2), // 报名已取消 export enum ENROLLSTATUS { NEWLY = 0, VALID = 1, CANCELED = 2, } // 区分tab点击的方式; // 1 手动切换tab // 2 首次进到页面默认选中当前地区所在tab // 3 首次进到页面进入兜底会场tab export const enum CLICKTABTYPE { MANUAL = 1, DEFAULT = 2, OUT = 3, } // 1 关注按钮 // 2 卡片其他 export const enum FOLLOWTYPE { BUTTON = 1, CARD = 2, } export type TBase = { [propName: string]: any; }; export type TreqCityVenue = { activityId?: number; authorId?: string; tabCode?: string; taskId?: string; }; export type TreqEnroll = { eventId: number; activityId?: number; }; export type TreqFeed = { tabCode: number; activityId?: number; }; export type TreqBook = { eventId?: number; eventIds?: string; taskToken?: string; taskId?: string; source?: string; activityId?: number; blindDateTaskId?: string; }; export type TabListItem = { tabTitle: string; tabCode: number; selectedTitle: string; }; /** * 响应数据 */ export type TResCommon = { result: number; error_msg: string; }; export type TResBook = { /** * 失败:"部分预约失败,请稍后重试", */ error_msg: string; failedList: string[]; result: number; successList: string[]; }; export type TResCityVenue = { enrollRaceList?: TEnrollRaceList[]; result?: number; tabPhotoList?: TTabPhotoList[]; officialAccount?: TOfficialAccount; title?: string; topTabIndex?: number; blindDateTaskId: string; }; export type TEnrollRaceList = { content?: string; userInfo?: TEnrollRaceListUserInfo; }; export type TEnrollRaceListUserInfo = { headurls?: TPurpleHeadurl[]; user_id?: number; user_name?: string; }; export type TPurpleHeadurl = { cdn?: string; url?: string; }; export type TTabPhotoList = { eventList?: TEventList[]; tabCode?: number; tabTitle?: string; selectedTitle?: string; }; export type TTabs = { eventList?: TEventList[]; tabCode?: number; tabTitle?: string; }; export type TEventList = { authorInfo?: TAuthorInfo; city?: string; enrollStatus?: number; eventDesc?: string; eventId?: number; eventStatus?: number; eventTitle?: string; isUserFollowAuthor?: boolean; liveStreamId?: string; photo?: TEventListPhoto; reservationId?: number; reservationStatus?: number; isClickFollow?: boolean; }; export type TAuthorInfo = { labelList?: TLabelList[]; userInfo?: TAuthorInfoUserInfo; }; export type TLabelList = { content?: string; iconLink?: TIconLink[]; }; export type TIconLink = { cdn?: string; url?: string; }; export type TAuthorInfoUserInfo = { headurls?: TFluffyHeadurl[]; user_id?: number; user_name?: string; }; export type TFluffyHeadurl = { cdn?: string; url?: string; }; export type TEventListPhoto = { poster: TPhotoElement[]; photoId: string; sourceUrls: TSourceURL[]; }; export type TPhotoElement = { cdn: string; /** * txmov2.a.kwimgs.com/kos/nlav11196/41050.d16e314c.mp4" */ url: string; }; export type TSourceURL = { cdn: string; /** * * static.yximgs.com/udata/pkg/KS-GAME-WEB/chrome-plugin-upload/2022-11-08/1667896998646.6ca6ee17a33c976c.png" */ url: string; }; export type TOfficialAccount = { title: string; subTitle: string; icon: TIconLink[]; accountId: number; isUserFollowOfficial: boolean; }; export type TResFeed = TBase & { pcursor?: string; feeds?: TResFeedList[]; }; export type TResFeedList = { cover_thumbnail_urls?: TFluffyHeadurl[]; // 背景图 liveStreamId?: string; // 直播间id coverWidgets?: TCoverWidget[]; audienceCount?: string; // 在线人数 user?: { user_name?: string; // 用户昵称 user_id?: number; }; }; export type TCoverWidget = { imageUrls?: TFluffyHeadurl[]; // icon角标 textInfo?: { content?: string; // icon文案 }; }; export type TRespTask = { result: number; taskList?: TTaskItem[]; }; export type TTaskItem = { id?: number; title?: string; icon?: { url: string; cdn: string; }[]; status?: number; type?: number; rewardDesc?: number; link?: string; extra?: { targetAuthorId?: number; }; };