ts declare使用,全局声明类型

概论

declare是声明全局类型的一种方式
declare 关键字用来告诉编译器，某个类型是存在的，可以在当前文件中使用。

测试代码

测试了type 和 function

声明代码

declare type myGlobalNumber=number;

//注意这里的function 是个值，不是一个类型
declare function myGlobalOneFn(a:string):string;

使用代码

let myTwoData:myGlobalNumber=2323423423; //全局declare类型可以全局使用
console.log(myTwoData,"myTwoData")
//函数的具体实现
let myGlobalOneFn=(a:string)=>{
  return a;
}
let xxx=myGlobalOneFn("sdlfjslfkjs")
console.log(xxx,"xxx")

也可以声明module

declare module '*.css';
declare module '*.less';
declare module '*.png';

其他知识点

declare module 静态文件示例

//这样declare代表不对这些文件进行类型检查
declare module '*.svg'
declare module '*.png'
declare module '*.jpg'
declare module '*.jpeg'
declare module '*.gif'
declare module '*.bmp'
declare module '*.tiff'

declare jquery示例
declare vue module 示例

/* eslint-disable */
/* prettier-ignore */
// @ts-nocheck
// Generated by unplugin-vue-components
// Read more: https://github.com/vuejs/core/pull/3399
export {}

declare module "vue" {
  export interface GlobalComponents {
    AppLink: (typeof import("./../components/AppLink/index.vue"))["default"];
    AppMain: (typeof import("./../layout/components/AppMain/index.vue"))["default"];
    BarChart: (typeof import("./../views/dashboard/components/BarChart.vue"))["default"];
    Breadcrumb: (typeof import("./../components/Breadcrumb/index.vue"))["default"];
    DeptTree: (typeof import("./../views/system/user/components/dept-tree.vue"))["default"];
    Dictionary: (typeof import("./../components/Dictionary/index.vue"))["default"];
    DictItem: (typeof import("./../views/system/dict/components/dict-item.vue"))["default"];
    ElBacktop: (typeof import("element-plus/es"))["ElBacktop"];
    ElBreadcrumb: (typeof import("element-plus/es"))["ElBreadcrumb"];
    ElBreadcrumbItem: (typeof import("element-plus/es"))["ElBreadcrumbItem"];
    ElButton: (typeof import("element-plus/es"))["ElButton"];
    ElCard: (typeof import("element-plus/es"))["ElCard"];
    ElCheckbox: (typeof import("element-plus/es"))["ElCheckbox"];
    ElCheckboxGroup: (typeof import("element-plus/es"))["ElCheckboxGroup"];
    ElCol: (typeof import("element-plus/es"))["ElCol"];
    ElColorPicker: (typeof import("element-plus/es"))["ElColorPicker"];
    ElConfigProvider: (typeof import("element-plus/es"))["ElConfigProvider"];
    ElDatePicker: (typeof import("element-plus/es"))["ElDatePicker"];
    ElDialog: (typeof import("element-plus/es"))["ElDialog"];
    ElDivider: (typeof import("element-plus/es"))["ElDivider"];
    ElDrawer: (typeof import("element-plus/es"))["ElDrawer"];
    ElDropdown: (typeof import("element-plus/es"))["ElDropdown"];
    ElDropdownItem: (typeof import("element-plus/es"))["ElDropdownItem"];
    ElDropdownMenu: (typeof import("element-plus/es"))["ElDropdownMenu"];
    ElForm: (typeof import("element-plus/es"))["ElForm"];
    ElFormItem: (typeof import("element-plus/es"))["ElFormItem"];
    ElIcon: (typeof import("element-plus/es"))["ElIcon"];
    ElImage: (typeof import("element-plus/es"))["ElImage"];
    ElInput: (typeof import("element-plus/es"))["ElInput"];
    ElInputNumber: (typeof import("element-plus/es"))["ElInputNumber"];
    ElLink: (typeof import("element-plus/es"))["ElLink"];
    ElMenu: (typeof import("element-plus/es"))["ElMenu"];
    ElMenuItem: (typeof import("element-plus/es"))["ElMenuItem"];
    ElOption: (typeof import("element-plus/es"))["ElOption"];
    ElPagination: (typeof import("element-plus/es"))["ElPagination"];
    ElPopover: (typeof import("element-plus/es"))["ElPopover"];
    ElRadio: (typeof import("element-plus/es"))["ElRadio"];
    ElRadioGroup: (typeof import("element-plus/es"))["ElRadioGroup"];
    ElRow: (typeof import("element-plus/es"))["ElRow"];
    ElScrollbar: (typeof import("element-plus/es"))["ElScrollbar"];
    ElSelect: (typeof import("element-plus/es"))["ElSelect"];
    ElStatistic: (typeof import("element-plus/es"))["ElStatistic"];
    ElSubMenu: (typeof import("element-plus/es"))["ElSubMenu"];
    ElSwitch: (typeof import("element-plus/es"))["ElSwitch"];
    ElTable: (typeof import("element-plus/es"))["ElTable"];
    ElTableColumn: (typeof import("element-plus/es"))["ElTableColumn"];
    ElTabPane: (typeof import("element-plus/es"))["ElTabPane"];
    ElTabs: (typeof import("element-plus/es"))["ElTabs"];
    ElTag: (typeof import("element-plus/es"))["ElTag"];
    ElText: (typeof import("element-plus/es"))["ElText"];
    ElTooltip: (typeof import("element-plus/es"))["ElTooltip"];
    ElTree: (typeof import("element-plus/es"))["ElTree"];
    ElTreeSelect: (typeof import("element-plus/es"))["ElTreeSelect"];
    ElUpload: (typeof import("element-plus/es"))["ElUpload"];
    ElWatermark: (typeof import("element-plus/es"))["ElWatermark"];
    Form: (typeof import("./../components/PageModal/Form.vue"))["default"];
    FunnelChart: (typeof import("./../views/dashboard/components/FunnelChart.vue"))["default"];
    GithubCorner: (typeof import("./../components/GithubCorner/index.vue"))["default"];
    Hamburger: (typeof import("./../components/Hamburger/index.vue"))["default"];
    IconSelect: (typeof import("./../components/IconSelect/index.vue"))["default"];
    IEpArrowDown: (typeof import("~icons/ep/arrow-down"))["default"];
    IEpArrowUp: (typeof import("~icons/ep/arrow-up"))["default"];
    IEpClose: (typeof import("~icons/ep/close"))["default"];
    IEpDelete: (typeof import("~icons/ep/delete"))["default"];
    IEpDownload: (typeof import("~icons/ep/download"))["default"];
    IEpEdit: (typeof import("~icons/ep/edit"))["default"];
    IEpPlus: (typeof import("~icons/ep/plus"))["default"];
    IEpPosition: (typeof import("~icons/ep/position"))["default"];
    IEpQuestionFilled: (typeof import("~icons/ep/question-filled"))["default"];
    IEpRefresh: (typeof import("~icons/ep/refresh"))["default"];
    IEpRefreshLeft: (typeof import("~icons/ep/refresh-left"))["default"];
    IEpSearch: (typeof import("~icons/ep/search"))["default"];
    IEpTop: (typeof import("~icons/ep/top"))["default"];
    IEpUploadFilled: (typeof import("~icons/ep/upload-filled"))["default"];
    LangSelect: (typeof import("./../components/LangSelect/index.vue"))["default"];
    LayoutSelect: (typeof import("./../layout/components/Settings/components/LayoutSelect.vue"))["default"];
    MultiUpload: (typeof import("./../components/Upload/MultiUpload.vue"))["default"];
    NavBar: (typeof import("./../layout/components/NavBar/index.vue"))["default"];
    NavbarLeft: (typeof import("./../layout/components/NavBar/components/NavbarLeft.vue"))["default"];
    NavbarRight: (typeof import("./../layout/components/NavBar/components/NavbarRight.vue"))["default"];
    PageContent: (typeof import("./../components/PageContent/index.vue"))["default"];
    PageModal: (typeof import("./../components/PageModal/index.vue"))["default"];
    PageSearch: (typeof import("./../components/PageSearch/index.vue"))["default"];
    Pagination: (typeof import("./../components/Pagination/index.vue"))["default"];
    PieChart: (typeof import("./../views/dashboard/components/PieChart.vue"))["default"];
    RadarChart: (typeof import("./../views/dashboard/components/RadarChart.vue"))["default"];
    RouterLink: (typeof import("vue-router"))["RouterLink"];
    RouterView: (typeof import("vue-router"))["RouterView"];
    Settings: (typeof import("./../layout/components/Settings/index.vue"))["default"];
    Sidebar: (typeof import("./../layout/components/Sidebar/index.vue"))["default"];
    SidebarLogo: (typeof import("./../layout/components/Sidebar/components/SidebarLogo.vue"))["default"];
    SidebarMenu: (typeof import("./../layout/components/Sidebar/components/SidebarMenu.vue"))["default"];
    SidebarMenuItem: (typeof import("./../layout/components/Sidebar/components/SidebarMenuItem.vue"))["default"];
    SidebarMenuItemTitle: (typeof import("./../layout/components/Sidebar/components/SidebarMenuItemTitle.vue"))["default"];
    SidebarMixTopMenu: (typeof import("./../layout/components/Sidebar/components/SidebarMixTopMenu.vue"))["default"];
    SingleUpload: (typeof import("./../components/Upload/SingleUpload.vue"))["default"];
    SizeSelect: (typeof import("./../components/SizeSelect/index.vue"))["default"];
    SvgIcon: (typeof import("./../components/SvgIcon/index.vue"))["default"];
    TableSelect: (typeof import("./../components/TableSelect/index.vue"))["default"];
    TagsView: (typeof import("./../layout/components/TagsView/index.vue"))["default"];
    ThemeColorPicker: (typeof import("./../layout/components/Settings/components/ThemeColorPicker.vue"))["default"];
    WangEditor: (typeof import("./../components/WangEditor/index.vue"))["default"];
  }
  export interface ComponentCustomProperties {
    vLoading: (typeof import("element-plus/es"))["ElLoadingDirective"];
  }
}

declare vue文件示例

declare module "*.vue" {
  import { DefineComponent } from "vue";
  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
  const component: DefineComponent<{}, {}, any>;
  export default component;
}

declare 普通js文件库示例

// https://github.com/sockjs/sockjs-client/issues/565

declare module "sockjs-client/dist/sockjs.min.js" {
  import Client from "sockjs-client";
  export default Client;
}

declare 全局组件、方法示例

declare global {
  const EffectScope: (typeof import("vue"))["EffectScope"];
  const ElForm: (typeof import("element-plus/es"))["ElForm"];
  const ElMessage: (typeof import("element-plus/es"))["ElMessage"];
  const ElMessageBox: (typeof import("element-plus/es"))["ElMessageBox"];
  const ElTree: (typeof import("element-plus/es"))["ElTree"];
  const acceptHMRUpdate: (typeof import("pinia"))["acceptHMRUpdate"];
  const asyncComputed: (typeof import("@vueuse/core"))["asyncComputed"];
  const autoResetRef: (typeof import("@vueuse/core"))["autoResetRef"];
  const computed: (typeof import("vue"))["computed"];
  const computedAsync: (typeof import("@vueuse/core"))["computedAsync"];
  const computedEager: (typeof import("@vueuse/core"))["computedEager"];
  const computedInject: (typeof import("@vueuse/core"))["computedInject"];
  ...
}

global declare 示例

declare global 后属性比如：ResponseData 就是全局的，可以直接项目中使用

declare global {
  /**
   * 响应数据
   */
  interface ResponseData<T = any> {
    code: string;
    data: T;
    msg: string;
  }

  /**
   * 分页查询参数
   */
  interface PageQuery {
    pageNum: number;
    pageSize: number;
  }

  /**
   * 分页响应对象
   */
  interface PageResult<T> {
    /** 数据列表 */
    list: T;
    /** 总数 */
    total: number;
  }

  /**
   * 页签对象
   */
  interface TagView {
    /** 页签名称 */
    name: string;
    /** 页签标题 */
    title: string;
    /** 页签路由路径 */
    path: string;
    /** 页签路由完整路径 */
    fullPath: string;
    /** 页签图标 */
    icon?: string;
    /** 是否固定页签 */
    affix?: boolean;
    /** 是否开启缓存 */
    keepAlive?: boolean;
    /** 路由查询参数 */
    query?: any;
  }

  /**
   * 系统设置
   */
  interface AppSettings {
    /** 系统标题 */
    title: string;
    /** 系统版本 */
    version: string;
    /** 是否显示设置 */
    showSettings: boolean;
    /** 是否固定头部 */
    fixedHeader: boolean;
    /** 是否显示多标签导航 */
    tagsView: boolean;
    /** 是否显示侧边栏Logo */
    sidebarLogo: boolean;
    /** 导航栏布局(left|top|mix) */
    layout: string;
    /** 主题颜色 */
    themeColor: string;
    /** 主题模式(dark|light) */
    theme: string;
    /** 布局大小(default |large |small) */
    size: string;
    /** 语言( zh-cn| en) */
    language: string;
    /** 是否开启水印 */
    watermarkEnabled: boolean;
    /** 水印内容 */
    watermarkContent: string;
  }

  /**
   * 组件数据源
   */
  interface OptionType {
    /** 值 */
    value: string | number;
    /** 文本 */
    label: string;
    /** 子列表  */
    children?: OptionType[];
  }
}
export {};

posted on 2024-06-24 20:36 joken1310 阅读(3) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

joken-前端工程师

概论

测试代码

其他知识点

declare module 静态文件示例

global declare 示例