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;
    };
};