global.d.ts

主要用于声明全局类型和模块

变量声明

declare const MY_GLOBAL_VAR: string;

模块声明

如果你使用的第三方库没有类型定义，可以在此文件中声明模块。

declare module 'my-module'

接口声明

interface Window {
    myCustomMethod: () => void;
}

扩展现有类型

interface Array<T> {
    customMethod(): void;
}

命名空间声明

declare namespace MyNamespace {
    interface MyInterface {
        prop: string;
    }

    function myFunction(): void;
}

常用

global.d.ts

declare global {

    /**
     * 全局自定义环境变量的类型声明
     */
    interface ViteEnv {
        VITE_PORT: number;
        VITE_PUBLIC_PATH: string;
        VITE_ROUTER_HISTORY: string;
        VITE_CDN: boolean;
        VITE_HIDE_HOME: string;
        VITE_COMPRESSION: ViteCompression;
        VITE_BASE_URL?: string;
        VITE_APP_ENV: string;
    }
}
// 此文件跟同级目录的 global.d.ts 文件一样也是全局类型声明，只不过这里存放一些零散的全局类型，无需引入直接在 .vue 、.ts 、.tsx 文件使用即可获得类型提示
type RefType<T> = T | null;

type EmitType = (event: string, ...args: any[]) => void;

type TargetContext = "_self" | "_blank";

type ComponentRef<T extends HTMLElement = HTMLDivElement> =
    ComponentElRef<T> | null;

type ElRef<T extends HTMLElement = HTMLDivElement> = Nullable<T>;

type ForDataType<T> = {
    [P in T]?: ForDataType<T[P]>;
};

type AnyFunction<T> = (...args: any[]) => T;

type PropType<T> = VuePropType<T>;

type Writable<T> = {
    -readonly [P in keyof T]: T[P];
};

type Nullable<T> = T | null;

type NonNullable<T> = T extends null | undefined ? never : T;

type Recordable<T = any> = Record<string, T>;

type ReadonlyRecordable<T = any> = {
    readonly [key: string]: T;
};

type Indexable<T = any> = {
    [key: string]: T;
};

type DeepPartial<T> = {
    [P in keyof T]?: DeepPartial<T[P]>;
};

type Without<T, U> = { [P in Exclude<keyof T, keyof U>]?: never };

type Exclusive<T, U> = (Without<T, U> & U) | (Without<U, T> & T);

type TimeoutHandle = ReturnType<typeof setTimeout>;

type IntervalHandle = ReturnType<typeof setInterval>;

type Effect = "light" | "dark";

interface ChangeEvent extends Event {
    target: HTMLInputElement;
}

interface WheelEvent {
    path?: EventTarget[];
}

interface ImportMetaEnv extends ViteEnv {
    __: unknown;
}

interface Fn<T = any, R = T> {
    (...arg: T[]): R;
}

interface PromiseFn<T = any, R = T> {
    (...arg: T[]): Promise<R>;
}

interface ComponentElRef<T extends HTMLElement = HTMLDivElement> {
    $el: T;
}

type Tree = {
    label: string;
    value: any;
    children?: Tree[];
    [property: string]: any;
};
type TreeNode = Tree;

type Similar = {
    label: string;
    prop: string;
    unit?: ((value: any) => string) | string;
    format?: (value: any) => string | number;
    icon?: string;
};

type Option = {
    label: string;
    value: any;
    [property: string]: any;
};

type Arrayable<T> = T | T[];