DevExtreme初级入门教程（React篇）：TypeScript支持

DevExtreme React组件提供了TypeScript声明，Strict类型允许您在早期阶段捕获错误并使用代码完成和自动重构等功能。

以下代码展示了将TypeScript与DevExtreme组件结合使用的示例：

APP.tsx

import React from ‘react’;

import List from ‘devextreme-react/list’;

import ‘devextreme/dist/css/dx.light.css’;

interface IListItemProps {

text: string;

}

interface IComponentState {

counter: number;

}

const items: IListItemProps[] = [

{ text: “Item 1” },

{ text: “Item 2” },

{ text: “Item 3” }

];

class Item extends React.Component<ilistitemprops, icomponentstate=””> {

constructor(props: IListItemProps) {

super(props);

this.state = {

counter: 0

};

this.addCounter = this.addCounter.bind(this);

}

public render() {

return (

{this.props.data.text} was clicked {this.state.counter} times

);

}

private addCounter() {

this.setState({

counter: this.state.counter + 1

});

}

}

class App extends React.Component {

render() {

return (

);

}

}

export default App;

支持的版本