如何使用第三方库提供的类型？（打字稿，Element-UI）

Posted 2023-02-16

技术标签:

【中文标题】如何使用第三方库提供的类型？（打字稿，Element-UI）【英文标题】：How do I use types provided by third party library? (Typescript, Element-UI) 【发布时间】：2021-11-12 07:43:54 【问题描述】：

我对 Typescript 相当陌生，不太确定如何利用已经提供的开箱即用的 od 类型。就我而言 - 在 Element UI (element.eleme.io) 中。

我正在使用带有类组件语法、Nuxt.js、ElementUI 的 Vue 2。

node_modules 中有 types 文件夹，其中包含我感兴趣的类型，但我如何将它们“应用”到代码的变量和元素中？我知道这些类型是通过Vue.use(Element) 安装在我的 /plugins/element-ui.js 中的，对吗？

import Vue from 'vue'
import Element from 'element-ui'
import locale from 'element-ui/lib/locale/lang/en'

Vue.use(Element,  locale )

例如下面我有一个带有date-picker 的组件。我希望这个日期选择器遵循element-ui.d.ts 中提供的类型结构。还有一个名为picker-options 的属性，它也已经提供了一些类型。见下文。

示例组件： 组件/订单/OrderFilterBar.vue

<template>
  <el-container class="container-filter__row">
    <el-date-picker
      v-model="dateRange"
      class="container-filter__date"
      type="daterange"
      start-placeholder="Start Date"
      end-placeholder="End Date"
      :picker-options="pickerOptions"
      format="yyyy-MM-dd"
      value-format="yyyy-MM-dd"
      @change="queryDatabaseAsync"
    />
  </el-container>
</template>

<script lang="ts">
import  Vue, Component  from 'vue-property-decorator'
import  dateFilterPickerOptions  from '@/components/options/datePickerOptions'
import OrderServiceAPI from '~/services/OrderServiceAPI'
import  ProviderState  from '~/types/store/providers.types'

@Component
export default class OrderFilterBar extends Vue 
  /* Props */
  /* State */
  providersState = this.$store.state.dashboard as ProviderState

  /* Data */
  searchQuery: string = ''
  paid: boolean = true
  unpaid: boolean = false
  otherFilter: boolean = false
  dateRange: string[] = []

  pickerOptions = dateFilterPickerOptions

  /* Hooks */
  /* Methods */
  async queryDatabaseAsync(): Promise<void> 
    try 
      const resp = await OrderServiceAPI.getFilteredOrders(this.$axios, 
        searchQuery: this.searchQuery,
        paid: this.paid,
        unpaid: this.unpaid,
        dateStart: this.dateRange[0],
        dateEnd: this.dateRange[1],
        providerID: null,
      )
     catch (error: any) 
      console.error('error, ', error.response)
    
  

  /* Computed */
  get currentProviderId(): number 
    return this.providersState.currentProvider.id
  
  /* Watchers */

</script>
<style lang="scss" scoped></style>

示例类型： node_modules/element-ui/types/element-ui.d.ts

import Vue,  PluginObject  from 'vue'
import  ElementUIComponent, ElementUIComponentSize, ElementUIHorizontalAlignment  from './component'

import  ElAlert  from './alert'
import  ElAside  from './aside'
import  ElAutocomplete  from './autocomplete'
import  ElBadge  from './badge'
import  ElBreadcrumb  from './breadcrumb'
import  ElBreadcrumbItem  from './breadcrumb-item'
import  ElButton  from './button'
import  ElButtonGroup  from './button-group'
import  ElCard  from './card'
import  ElCarousel  from './carousel'
import  ElCarouselItem  from './carousel-item'
import  ElCascader  from './cascader'
import  ElCheckbox  from './checkbox'
import  ElCheckboxButton  from './checkbox-button'
import  ElCheckboxGroup  from './checkbox-group'
import  ElCol  from './col'
import  ElCollapse  from './collapse'
import  ElCollapseItem  from './collapse-item'
import  ElColorPicker  from './color-picker'
import  ElContainer  from './container'
import  ElDatePicker  from './date-picker'
import  ElDialog  from './dialog'
import  ElDropdown  from './dropdown'
import  ElDropdownItem  from './dropdown-item'
import  ElDropdownMenu  from './dropdown-menu'
import  ElFooter  from './footer'
import  ElForm  from './form'
import  ElFormItem  from './form-item'
import  ElHeader  from './header'
import  ElInput  from './input'
import  ElInputNumber  from './input-number'
import  ElLoading  from './loading'
import  ElMain  from './main'
import  ElMenu  from './menu'
import  ElMenuItem  from './menu-item'
import  ElMenuItemGroup  from './menu-item-group'
import  ElMessage  from './message'
import  ElMessageBox  from './message-box'
import  ElNotification  from './notification'
import  ElOption  from './option'
import  ElOptionGroup  from './option-group'
import  ElPagination  from './pagination'
import  ElPopover  from './popover'
import  ElProgress  from './progress'
import  ElRate  from './rate'
import  ElRadio  from './radio'
import  ElRadioButton  from './radio-button'
import  ElRadioGroup  from './radio-group'
import  ElRow  from './row'
import  ElSelect  from './select'
import  ElSlider  from './slider'
import  ElStep  from './step'
import  ElSteps  from './steps'
import  ElSubmenu  from './submenu'
import  ElSwitch  from './switch'
import  ElTable  from './table'
import  ElTableColumn  from './table-column'
import  ElTag  from './tag'
import  ElTabs  from './tabs'
import  ElTabPane  from './tab-pane'
import  ElTimeline  from './timeline'
import  ElTimelineItem  from './timeline-item'
import  ElTimePicker  from './time-picker'
import  ElTimeSelect  from './time-select'
import  ElTooltip  from './tooltip'
import  ElTransfer  from './transfer'
import  ElTree, TreeData  from './tree'
import  ElUpload  from './upload'
import  ElLink  from './link'
import  ElDivider  from './divider'
import  ElIcon  from './icon'
import  ElCalendar  from './calendar'
import  ElImage  from './image'
import  ElBacktop  from './backtop'
import  ElInfiniteScroll  from './infinite-scroll'
import  ElPageHeader  from './page-header'
import  ElAvatar  from './avatar'
import  ElDrawer  from './drawer'
import  ElPopconfirm  from './popconfirm'
import  ElSkeleton  from './skeleton'
import  ElSkeletonItem  from './skeleton-item'
import  ElCascaderPanel  from './cascader-panel'
import  ElEmpty  from './empty'
import  ElSpinner  from './spinner'

export interface InstallationOptions 
  locale: any,
  i18n: any,
  size: string


/** The version of element-ui */
export const version: string

/**
 * Install all element-ui components into Vue.
 * Please do not invoke this method directly.
 * Call `Vue.use(ElementUI)` to install.
 */
export function install (vue: typeof Vue, options: InstallationOptions): void

/** ElementUI component common definition */
export type Component = ElementUIComponent

/** Component size definition for button, input, etc */
export type ComponentSize = ElementUIComponentSize

/** Horizontal alignment */
export type HorizontalAlignment = ElementUIHorizontalAlignment

/** Show animation while loading data */
export const Loading: ElLoading

/** Used to show feedback after an activity. The difference with Notification is that the latter is often used to show a system level passive notification. */
export const Message: ElMessage

/** A set of modal boxes simulating system message box, mainly for message prompt, success tips, error messages and query information */
export const MessageBox: ElMessageBox

/** Displays a global notification message at the upper right corner of the page */
export const Notification: ElNotification

// TS cannot merge imported class with namespace, so declare subclasses instead

/** Alert Component */
export class Alert extends ElAlert 

/** Aside Component */
export class Aside extends ElAside 

/** Autocomplete Component */
export class Autocomplete extends ElAutocomplete 

/** Bagde Component */
export class Badge extends ElBadge 

/** Breadcrumb Component */
export class Breadcrumb extends ElBreadcrumb 

/** Breadcrumb Item Component */
export class BreadcrumbItem extends ElBreadcrumbItem 

/** Button Component */
export class Button extends ElButton 

/** Button Group Component */
export class ButtonGroup extends ElButtonGroup 

/** Card Component */
export class Card extends ElCard 

/** Cascader Component */
export class Cascader extends ElCascader 

/** Carousel Component */
export class Carousel extends ElCarousel 

/** Carousel Item Component */
export class CarouselItem extends ElCarouselItem 

/** Checkbox Component */
export class Checkbox extends ElCheckbox 

/** Checkbox Button Component */
export class CheckboxButton extends ElCheckboxButton 

/** Checkbox Group Component */
export class CheckboxGroup extends ElCheckboxGroup 

/** Colunm Layout Component */
export class Col extends ElCol 

/** Collapse Component */
export class Collapse extends ElCollapse 

/** Collapse Item Component */
export class CollapseItem extends ElCollapseItem 

/** Color Picker Component */
export class ColorPicker extends ElColorPicker 

/** Container Component */
export class Container extends ElContainer 

/** Date Picker Component */
export class DatePicker extends ElDatePicker 

/** Dialog Component */
export class Dialog extends ElDialog 

/** Dropdown Component */
export class Dropdown extends ElDropdown 

/** Dropdown Item Component */
export class DropdownItem extends ElDropdownItem 

/** Dropdown Menu Component */
export class DropdownMenu extends ElDropdownMenu 

/** Footer Component */
export class Footer extends ElFooter 

/** Form Component */
export class Form extends ElForm 

/** Form Item Component */
export class FormItem extends ElFormItem 

/** Header Component */
export class Header extends ElHeader 

/** Input Component */
export class Input extends ElInput 

/** Input Number Component */
export class InputNumber extends ElInputNumber 

/** Main Component */
export class Main extends ElMain 

/** Menu that provides navigation for your website */
export class Menu extends ElMenu 

/** Menu Item Component */
export class MenuItem extends ElMenuItem 

/** Menu Item Group Component */
export class MenuItemGroup extends ElMenuItemGroup 

/** Dropdown Select Option Component */
export class Option extends ElOption 

/** Dropdown Select Option Group Component */
export class OptionGroup extends ElOptionGroup 

/** Pagination Component */
export class Pagination extends ElPagination 

/** Popover Component */
export class Popover extends ElPopover 

/** Progress Component */
export class Progress extends ElProgress 

/** Rate Component */
export class Rate extends ElRate 

/** Radio Component */
export class Radio extends ElRadio 

/** Radio Button Component */
export class RadioButton extends ElRadioButton 

/** Radio Group Component */
export class RadioGroup extends ElRadioGroup 

/** Row Layout Component */
export class Row extends ElRow 

/** Dropdown Select Component */
export class Select extends ElSelect 

/** Slider Component */
export class Slider extends ElSlider 

/** Step Component */
export class Step extends ElStep 

/** Steps Component */
export class Steps extends ElSteps 

/** Submenu Component */
export class Submenu extends ElSubmenu 

/** Switch Component */
export class Switch extends ElSwitch 

/** Table Component */
export class Table extends ElTable 

/** Table Column Component */
export class TableColumn extends ElTableColumn 

/** Tabs Component */
export class Tabs extends ElTabs 

/** Tab Pane Component */
export class TabPane extends ElTabPane 

/** Tag Component */
export class Tag extends ElTag 

/** Timeline Component */
export class Timeline extends ElTimeline 

/** Timeline Item Component */
export class TimelineItem extends ElTimelineItem 

/** TimePicker Component */
export class TimePicker extends ElTimePicker 

/** TimeSelect Component */
export class TimeSelect extends ElTimeSelect 

/** Tooltip Component */
export class Tooltip extends ElTooltip 

/** Transfer Component */
export class Transfer extends ElTransfer 

/** Tree Component */
export class Tree<K = any, D = TreeData> extends ElTree<K, D> 

/** Upload Component */
export class Upload extends ElUpload 

/** Divider Component */
export class Divider extends ElDivider 

/** Link Component */
export class Link extends ElLink 

/** Image Component */
export class Image extends ElImage 

/** Icon Component */
export class Icon extends ElIcon 

/** Calendar Component */
export class Calendar extends ElCalendar 

/** Backtop Component */
export class Backtop extends ElBacktop 

/** InfiniteScroll Directive */
export const InfiniteScroll: PluginObject<ElInfiniteScroll>;

/** PageHeader Component */
export class PageHeader extends ElPageHeader 

/** Avatar Component */
export class Avatar extends ElAvatar 

/** Drawer Component */
export class Drawer extends ElDrawer 

/** Popconfirm Component */
export class Popconfirm extends ElPopconfirm 

/** Skeleton Component */
export class Skeleton extends ElSkeleton 

/** Skeleton Item Component */
export class SkeletonItem extends ElSkeletonItem 

/** CascaderPanel Component */
export class CascaderPanel extends ElCascaderPanel 

/** Empty Component */
export class Empty extends ElEmpty 

/** Spinner Component */
export class Spinner extends ElSpinner

选择器选项 组件/选项/datePickerOptions.ts

import DatePickerOptions from 'element-ui'

export const dateFilterPickerOptions: DatePickerOptions =  // ERROR in DatePickerOptions saying: Cannot use namespace 'DatePickerOptions' as a type.ts(2709)
  disabledDate(time:  getTime: () => number ) 
    return time.getTime() > Date.now()
  ,
  shortcuts: [
    
      text: 'Today',
      onClick(picker: 
        $emit: (arg0: string, arg1: Date) => void
      ) 
        picker.$emit('pick', new Date())
      ,
    ,
    
      text: 'Yesterday',
      onClick(picker:  $emit: (arg0: string, arg1: Date) => void ): void 
        const yesterday = new Date()
        yesterday.setTime(yesterday.getTime() - 3600 * 1000 * 24)
        picker.$emit('pick', yesterday)
      ,
    ,
  ],

最后，我的 index.d.ts：

import Vue,  ComponentOptions  from 'vue';
import  VueClass  from './declarations';
export  createDecorator, VueDecorator, mixins  from './util';
declare function Component<V extends Vue>(options: ComponentOptions<V> & ThisType<V>): <VC extends VueClass<V>>(target: VC) => VC;
declare namespace Component 
    var registerHooks: (keys: string[]) => void;

declare function Component<VC extends VueClass<Vue>>(target: VC): VC;
declare namespace Component 
    var registerHooks: (keys: string[]) => void;

export default Component;

我的问题是：如何使我的date-picker 遵循类型中描述的结构？我很困惑，因为 date-picker 是在 template 中声明的，这只是一个普通的 <tag>，显然我需要在 javascript 中分配类型。

提前感谢您的建议。

【问题讨论】：

【参考方案1】：

对于日期选择器，element-ui 索引 exports only the class definition of ElDatePicker。

但是DatePickerOptions 可以作为named export from element-ui/types/date-picker 使用：

import  DatePickerOptions  from 'element-ui/types/date-picker'

demo

【讨论】：

以上是关于如何使用第三方库提供的类型？（打字稿，Element-UI）的主要内容，如果未能解决你的问题，请参考以下文章

如何使用打字稿为反应测试库设置智能感知

为我的反应打字稿组件库生成/维护打字稿定义文件

是否可以强制打字稿使用来自definitelyTyped 的类型而不是本机库类型？

在 ASP.NET Core 应用程序中编译打字稿时如何包含引导表的类型

手动设置电流时，我在 useRef() 钩子上使用啥打字稿类型？

在打字稿中带有参数类型的角度 ui-state

如何使用第三方库提供的类型？ （打字稿，Element-UI）

如何使用第三方库提供的类型？（打字稿，Element-UI）