复写class接口方式, 这里用antd来举例子

  1. /types/global.ts
  2. import * as PropTypes from 'prop-types'; 
  3. import { Table } from 'antd';
  5. declare type TableSize = 'default' | 'middle' | 'small';
  7. export declare class TableT<T> extends Table<T> {
  8.   static propTypes: {
  9.     dataSource: PropTypes.Requireable<any[]>;
  10.     columns: PropTypes.Requireable<any[]>;
  11.     prefixCls: PropTypes.Requireable<string>;
  12.     useFixedHeader: PropTypes.Requireable<boolean>;
  13.     rowSelection: PropTypes.Requireable<object>;
  14.     className: PropTypes.Requireable<string>;
  15.     size: PropTypes.Requireable<TableSize>;
  16.     loading: PropTypes.Requireable<boolean | object>;
  17.     bordered: PropTypes.Requireable<boolean>;
  18.     onChange: PropTypes.Requireable<(...args: any[]) => any>;
  19.     locale: PropTypes.Requireable<object>;
  20.     dropdownPrefixCls: PropTypes.Requireable<string>;
  21.     sortDirections: PropTypes.Requireable<any[]>;
  22.     batchButtons: any; 
  23.   };
  24. }
  26. /xxx/xxx.tsx
  28. import { TableT } from 'types/global.ts';
  29. /// <reference path = "types/global.ts" />
  30. class demo extends React.Component {
  31.     render(){
  32.       return(<Table ... />);
  33.   }
  34. }

如果你的eslint或tslint报错了，告诉你某某某组件没有某个参数或者方法

  1. // 使用接口基础的方式，讲属性或方法添加上
  2. interface HTMLElementDom extends HTMLElement {
  3.   select?: () => void;
  4.   value?: string;
  5. }
  6. // 使用时
  7. (dom as HTMLElementDom).value
  8. (dom as HTMLElementDom).select();

自定义属性

  1. // 新版本的，建议使用此种语法
  2. declare module 'react' {
  3.     interface HTMLAttributes<T> extends DOMAttributes<T> {
  4.         block?: string
  5.         element?: string
  6.         modifiers?: Modifiers // <-- custom interface
  7.     }
  8. }
  10. // 旧版本的
  11. declare namespace React {
  13.     interface HTMLProps<T> extends HTMLAttributes, ClassAttributes<T> {
  14.     }
  15. }
  17. // 一个例子
  18. import * as React from 'react';
  20. declare module 'react' {
  21.      interface HTMLProps<T> {
  22.         block?:string;
  23.         element?:string;
  24.         modifiers?:string;
  25.     }
  26. }
  28. export const Foo = () => {
  30.     return (
  31.         <div block="123" element="456">
  32.         </div>
  33.     )
  34. };
  36. // 定义公共
  37. import * as React from 'react';
  38. import './react_augmented';

传递Event

  1. public selectFn: (event: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void = (e) => {
  2.         // 这里要强制类型转换才可以使用getAttribute方法
  3.         const target = (e.target as HTMLElement);
  4.         console.log('selectFn', target.getAttribute('uid'));
  5. }
  7. <Component selectFn={this.selectFn} />
  9. interface Props {
  10.     selectFn(event: React.MouseEvent<HTMLSpanElement, MouseEvent>): void;
  11. }