stackoom
  简体   繁体   中英

Kendo UI for JQuery with TypeScript

 原文  2020-10-11 12:42:57  8   1    node.js/ typescript/ kendo-ui

Question

I use KendoUI for JQuery along with TypeScript. My "package.json" is:

  "dependencies": {
    "@progress/kendo-theme-material": "^3.19.2",
    "@progress/kendo-ui": "^2020.3.915",
    "@types/jquery": "^3.5.1",
    "@types/kendo-ui": "^2020.3.0",
    "jquery": "^3.5.1",
  }

1) My "script.ts" file looks like this and I get these errors: 

/// <reference path="../../../../node_modules/@types/jquery/index.d.ts" />
/// <reference path="../../../../node_modules/@types/kendo-ui/index.d.ts" />  

import '@Progress/kendo-ui/js/kendo.tabstrip';
import '@Progress/kendo-ui/js/kendo.treeview';
import '@Progress/kendo-ui/js/kendo.multiselect';
import '@Progress/kendo-ui/js/kendo.dropdowntree';
import '@Progress/kendo-ui/js/kendo.button';
import '@Progress/kendo-theme-material/dist/all.scss';
    
$("#my-1").kendoMultiSelect({
  <...>,
  messages: {
    clear: "Clear!"
  }
});
    
$("#my-2").kendoDropDownTree({
  <...>,
  select: function (e) {            
    if (e.sender.dataItem(e.node).type !== 2) {
      e.preventDefault()
    }
  }
});
    
// let dataSource: kendo.data.HierarchicalDataSource;
dataSource.transport.options = {
  read: {
    url: '<url>',
    dataType: "json"
  }
};

Errors:

ERROR in [at-loader] ./script.ts:121:9 
    TS2345: Argument of type '{ dataSource: DataSource; dataTextField: string; dataValueField: string; filter: string; autoClose: true; change: (e: MultiSelectChangeEvent) => void; tagTemplate: (data: any) => string; tagMode: string; messages: { ...; }; }' is not assignable to parameter of type 'MultiSelectOptions'.
  Object literal may only specify known properties, and 'messages' does not exist in type 'MultiSelectOptions'.
ERROR in [at-loader] ./script.ts:228:26 
    TS2339: Property 'dataItem' does not exist on type 'DropDownTree'.
ERROR in [at-loader] ./script.ts:381:20 
    TS2339: Property 'transport' does not exist on type 'HierarchicalDataSource'.

This error occurs in the browser console when you start it: Uncaught (in promise) TypeError: kendo.observable is not a function

2) If you add import for observable: 

import '@progress/kendo-ui/js/kendo.binder';

everything starts working, there are no errors in the browser. But the errors still remained and more warnings were added:

WARNING in ./node_modules/@Progress/kendo-ui/js/kendo.core.js
There are multiple modules with names that only differ in casing.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Use equal casing. Compare these module identifiers:
* C:\Users\<project>\node_modules\@Progress\kendo-ui\js\kendo.core.js
    Used by 9 module(s), i. e.
    C:\Users\<project>\node_modules\@Progress\kendo-ui\js\kendo.button.js
* C:\Users\<project>\node_modules\@progress\kendo-ui\js\kendo.core.js
    Used by 4 module(s), i. e.
    C:\Users\<project>\node_modules\@progress\kendo-ui\js\kendo.binder.js
 @ ./node_modules/@Progress/kendo-ui/js/kendo.core.js
 @ ./node_modules/@Progress/kendo-ui/js/kendo.button.js
 @ ./<sub_project>/Areas/Map/JScripts/mapFilter.ts
 @ ./<sub_project>/Areas/Map/JScripts/map.ts
 @ multi ./<sub_project>/Areas/Map/JScripts/map.ts
WARNING in ./node_modules/@Progress/kendo-ui/js/kendo.data.js
There are multiple modules with names that only differ in casing.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Use equal casing. Compare these module identifiers:
* C:\Users\<project>\node_modules\@Progress\kendo-ui\js\kendo.data.js
    Used by 5 module(s), i. e.
    C:\Users\<project>\node_modules\@Progress\kendo-ui\js\kendo.tabstrip.js
* C:\Users\<project>\node_modules\@progress\kendo-ui\js\kendo.data.js
    Used by 1 module(s), i. e.
    C:\Users\<project>\node_modules\@progress\kendo-ui\js\kendo.binder.js
 @ ./node_modules/@Progress/kendo-ui/js/kendo.data.js
 @ ./node_modules/@Progress/kendo-ui/js/kendo.tabstrip.js
 @ ./<sub_project>/Areas/Map/JScripts/mapFilter.ts
 @ ./<sub_project>/Areas/Map/JScripts/map.ts
 @ multi ./<sub_project>/Areas/Map/JScripts/map.ts
WARNING in ./node_modules/@Progress/kendo-ui/js/kendo.data.odata.js
There are multiple modules with names that only differ in casing.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Use equal casing. Compare these module identifiers:
* C:\Users\<project>\node_modules\@Progress\kendo-ui\js\kendo.data.odata.js
    Used by 1 module(s), i. e.
    C:\Users\<project>\node_modules\@Progress\kendo-ui\js\kendo.data.js
* C:\Users\<project>\node_modules\@progress\kendo-ui\js\kendo.data.odata.js
    Used by 1 module(s), i. e.
    C:\Users\<project>\node_modules\@progress\kendo-ui\js\kendo.data.js
 @ ./node_modules/@Progress/kendo-ui/js/kendo.data.odata.js
 @ ./node_modules/@Progress/kendo-ui/js/kendo.data.js
 @ ./node_modules/@Progress/kendo-ui/js/kendo.tabstrip.js
 @ ./<sub_project>/Areas/Map/JScripts/mapFilter.ts
 @ ./<sub_project>/Areas/Map/JScripts/map.ts
 @ multi ./<sub_project>/Areas/Map/JScripts/map.ts
WARNING in ./node_modules/@Progress/kendo-ui/js/kendo.data.xml.js
There are multiple modules with names that only differ in casing.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Use equal casing. Compare these module identifiers:
* C:\Users\<project>\node_modules\@Progress\kendo-ui\js\kendo.data.xml.js
    Used by 1 module(s), i. e.
    C:\Users\<project>\node_modules\@Progress\kendo-ui\js\kendo.data.js
* C:\Users\<project>\node_modules\@progress\kendo-ui\js\kendo.data.xml.js
    Used by 1 module(s), i. e.
    C:\Users\<project>\node_modules\@progress\kendo-ui\js\kendo.data.js
 @ ./node_modules/@Progress/kendo-ui/js/kendo.data.xml.js
 @ ./node_modules/@Progress/kendo-ui/js/kendo.data.js
 @ ./node_modules/@Progress/kendo-ui/js/kendo.tabstrip.js
 @ ./<sub_project>/Areas/Map/JScripts/mapFilter.ts
 @ ./<sub_project>/Areas/Map/JScripts/map.ts
 @ multi ./<sub_project>/Areas/Map/JScripts/map.ts

3. If I replace all import Kendo with one like this: 

import "@progress/kendo-ui";

But the errors still remained and added more of these (however, everything works in the browser):

ERROR in [at-loader] ./node_modules/@types/kendo-ui/index.d.ts:16:1 
    TS6200: Definitions of the following identifiers conflict with those in another file: Class, Observable, View, ViewContainer, Layout, History, Route, Router, Binding, BindingTarget, EventBinding, TemplateBinding, Binder, TypedBinder, ObservableObject, Model, SchedulerEvent, TreeListModel, TreeListDataSource, GanttTask, GanttDependency, Node, FileEntry, SchedulerDataSource, GanttDataSource, GanttDependencyDataSource, HierarchicalDataSource, FileManagerDataSource, PivotDataSource, ObservableArray, DataSource, Query, attr, css, style, enabled, disabled, readonly, events, text, visible, invisible, html, value, source, checked, start, end, Widget, Draggable, DropTarget, DropTargetArea, Toolbar, Alert, AppBar, AutoComplete, Button, ButtonGroup, Calendar, Chat, ColorPalette, ColorPicker, ComboBox, Confirm, ContextMenu, DateInput, DatePicker, DateRangePicker, DateTimePicker, Dialog, Drawer, DropDownList, DropDownTree, Editor, FileManager, Filter, FilterMenu, FlatColorPicker, Form, Gantt, Grid, ImageEditor, ListBox, ListView, Loader, MaskedTextBox, MediaPlayer, Menu, MultiColumnComboBox, MultiSelect, MultiViewCalendar, Notification, NumericTextBox, PDFViewer, Pager, PanelBar, PivotConfigurator, PivotGrid, Popup, ProgressBar, Prompt, RangeSlider, Rating, ResponsivePanel, Scheduler, ScrollView, Slider, Sortable, Splitter, Spreadsheet, Switch, Stepper, TabStrip, TileLayout, TextArea, TextBox, TimePicker, Timeline, ToolBar, Tooltip, Touch, TreeList, TreeView, Upload, Validator, Window, Wizard, Application, ActionSheet, Badge, BackButton, Collapsible, DetailButton, ModalView, NavBar, Pane, PopOver, Scroller, SplitView, ArcGauge, Barcode, Chart, Diagram, LinearGauge, Map, QRCode, RadialGauge, Sparkline, StockChart, TreeMap, Shape, BingLayer, Extent, Layer, Location, Marker, MarkerLayer, ShapeLayer, TileLayer, ChartAxis, ChartPane, ChartPlotArea, ChartPoint, ChartSeries, Navigator, Circle, Connection, Connector, Group, Image, Line, Path, Point, Polyline, Rect, Rectangle, TextBlock, Arc, Element, Gradient, GradientStop, LinearGradient, MultiPath, OptionsStore, RadialGradient, Segment, Surface, Text, Matrix, Size, Transformation, Color, CustomFilter, DynamicFilter, Range, Sheet, TopFilter, ValueFilter, Step, Workbook
ERROR in [at-loader] ./node_modules/@progress/kendo-ui/index.d.ts:15:1 
    TS6200: Definitions of the following identifiers conflict with those in another file: Class, Observable, View, ViewContainer, Layout, History, Route, Router, Binding, BindingTarget, EventBinding, TemplateBinding, Binder, TypedBinder, ObservableObject, Model, SchedulerEvent, TreeListModel, TreeListDataSource, GanttTask, GanttDependency, Node, FileEntry, SchedulerDataSource, GanttDataSource, GanttDependencyDataSource, HierarchicalDataSource, FileManagerDataSource, PivotDataSource, ObservableArray, DataSource, Query, attr, css, style, enabled, disabled, readonly, events, text, visible, invisible, html, value, source, checked, start, end, Widget, Draggable, DropTarget, DropTargetArea, Toolbar, Alert, AppBar, AutoComplete, Button, ButtonGroup, Calendar, Chat, ColorPalette, ColorPicker, ComboBox, Confirm, ContextMenu, DateInput, DatePicker, DateRangePicker, DateTimePicker, Dialog, Drawer, DropDownList, DropDownTree, Editor, FileManager, Filter, FilterMenu, FlatColorPicker, Form, Gantt, Grid, ImageEditor, ListBox, ListView, Loader, MaskedTextBox, MediaPlayer, Menu, MultiColumnComboBox, MultiSelect, MultiViewCalendar, Notification, NumericTextBox, PDFViewer, Pager, PanelBar, PivotConfigurator, PivotGrid, Popup, ProgressBar, Prompt, RangeSlider, Rating, ResponsivePanel, Scheduler, ScrollView, Slider, Sortable, Splitter, Spreadsheet, Switch, Stepper, TabStrip, TileLayout, TextArea, TextBox, TimePicker, Timeline, ToolBar, Tooltip, Touch, TreeList, TreeView, Upload, Validator, Window, Wizard, Application, ActionSheet, Badge, BackButton, Collapsible, DetailButton, ModalView, NavBar, Pane, PopOver, Scroller, SplitView, ArcGauge, Barcode, Chart, Diagram, LinearGauge, Map, QRCode, RadialGauge, Sparkline, StockChart, TreeMap, Shape, BingLayer, Extent, Layer, Location, Marker, MarkerLayer, ShapeLayer, TileLayer, ChartAxis, ChartPane, ChartPlotArea, ChartPoint, ChartSeries, Navigator, Circle, Connection, Connector, Group, Image, Line, Path, Point, Polyline, Rect, Rectangle, TextBlock, Arc, Element, Gradient, GradientStop, LinearGradient, MultiPath, OptionsStore, RadialGradient, Segment, Surface, Text, Matrix, Size, Transformation, Color, CustomFilter, DynamicFilter, Range, Sheet, TopFilter, ValueFilter, Step, Workbook
ERROR in [at-loader] ./node_modules/@progress/kendo-ui/index.d.ts:557:9 
    TS2374: Duplicate string index signature.
ERROR in [at-loader] ./node_modules/@progress/kendo-ui/index.d.ts:1044:9 
    TS2374: Duplicate string index signature.
ERROR in [at-loader] ./node_modules/@progress/kendo-ui/index.d.ts:1056:9 
    TS2374: Duplicate string index signature.
ERROR in [at-loader] ./node_modules/@progress/kendo-ui/index.d.ts:1076:9 
    TS2374: Duplicate string index signature.
ERROR in [at-loader] ./node_modules/@progress/kendo-ui/index.d.ts:4320:9 
    TS2374: Duplicate string index signature.

How can I use Kendo UI for JQuery with TypeScript without errors and warnings?

1 answers

solution1
 -1  2020-10-12 08:59:32

Here are the docs: https://docs.telerik.com/kendo-ui/third-party/typescript

Notice they refer to kendo.all.d.ts , not index .

Keep in mind the typings are far from perfect, as you can see here: https://github.com/telerik/kendo-ui-core/issues?q=is%3Aissue+typings

You may need to cast to <any> or extend the typings in some cases.

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question How to build a UI with typescript/NodeJS Use Jquery in Aurelia with Typescript Kendo UI Angular Upload File to Backend as Node.JS Material-UI - TypeScript - Autocomplete with getOptionLabel and renderOption JQuery Ui and Electron Jquery ui tabs with jade Using jQuery in Angular (TypeScript, Webpack) Import jquery and bootstrap in typescript commonjs Unable to build jQuery ui with webpack What frameworks to use with JQuery UI?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM