10
class Component<P, S> {
20
        
30
    static contextType?: Context<any>;
40

50

60
    context: any;
70

80
    constructor(props: Readonly<P>);
90
    /**
10
     * @deprecated
11
     * @see https://reactjs.org/docs/legacy-context.html
12
     */
13
    constructor(props: P, context?: any);
14

15

16
    setState<K extends keyof S>(
17
        state: ((prevState: Readonly<S>, props: Readonly<P>) => (Pick<S, K> | S | null)) | (Pick<S, K> | S | null),
18
        callback?: () => void
19
    ): void;
20

21
    forceUpdate(callBack?: () => void): void;
22
    render(): ReactNode;
23

24

25
    readonly props: Readonly<{ children?: ReactNode }> & Readonly<P>;
26
    state: Readonly<S>;
27
    /**
28
     * @deprecated
29
     * https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs
30
     */
31
    refs: {
32
        [key: string]: ReactInstance
33
    };
34
}

100
// index.tsx
200

300
import * as React from 'react';
400
import classnames from 'classnames';
500
import './style.css';
600

700
const isMoblie: boolean = 'ontouchstart' in window; // 是否为移动端
800

900
class Drag extends React.Component<drag.DragProps, drag.DragState> {
100
  private elementWid: number;
110
  private elementHeight: number;
120
  private left: number;
130
  private top: number;
140
  private zIndex: number;
150
  private clientWidth: number;
160
  private clientHeight: number;
170
  
180
  private clientX: number;
190
  private clientY: number;
200

210
  private startX: number;
220
  private startY: number;
230

240
  private disX: number;
250
  private disY: number;
260

270
  private _dragStart: () => any;
280
  private _dragMove: () => any;
290
  private _dragEnd: () => any;
300

310
  constructor(props: drag.DragProps) {
320
    super(props);
330
    this.elementWid = props.width || 100;
340
    this.elementHeight = props.height || 100;
350
    this.left = props.left || 0;
360
    this.top = props.top || 0;
370
    this.zIndex = props.zIndex || 0;
380
    this.clientWidth = props.maxWidth || 600;
390
    this.clientHeight = props.maxHeight || 600;
400
    this._dragStart = this.dragStart.bind(this);
410

420
    this.state = {
430
      left: this.left,
440
      top: this.top
450
    };
460
  }
470

480
  public dragStart(ev: React.TouchEvent & React.MouseEvent): void {
490
    const target = ev.target;
500
    if (isMoblie && ev.changedTouches) {
510
      this.startX = ev.changedTouches[0].pageX;
520
      this.startY = ev.changedTouches[0].pageY;
530
    } else {
540
      this.startX = ev.clientX;
550
      this.startY = ev.clientY;
560
    }
570
    // @ts-ignore 偏移位置 = 鼠标的初始值 - 元素的offset
580
    this.disX = this.startX - target.offsetLeft;
590

600
    // @ts-ignore
610
    this.disY = this.startY - target.offsetTop;
620

630
    this.zIndex += 1;
640

650
    this._dragMove = this.dragMove.bind(this);
660
    this._dragEnd = this.dragEnd.bind(this);
670

680
    if (!isMoblie) {
690
      document.addEventListener('mousemove', this._dragMove, false);
700
      document.addEventListener('mouseup', this._dragEnd, false);
710
    }
720
  }
730

740
  public dragMove(ev: drag.TouchEvent): void {
750
    if (isMoblie && ev.changedTouches) {
760
      this.clientX = ev.changedTouches[0].pageX;
770
      this.clientY = ev.changedTouches[0].pageY;
780
    } else {
790
      this.clientX = ev.clientX;
800
      this.clientY = ev.clientY;
810
    }
820

830
    // 元素位置 = 现在鼠标位置 - 元素的偏移值
840
    let left = this.clientX - this.disX;
850
    let top = this.clientY - this.disY;
860

870
    if (left < 0) {
880
      left = 0;
890
    }
900

910
    if (top < 0) {
920
      top = 0;
930
    }
940

950
    if (left > this.clientWidth - this.elementWid) {
960
      left = this.clientWidth - this.elementWid;
970
    }
980

990
    if (top > this.clientHeight - this.elementHeight) {
100
      top = this.clientHeight - this.elementHeight;
101
    }
102

103
    this.setState({ left, top });
104
  }
105

106
  public dragEnd(ev: drag.TouchEvent): void {
107
    const { onDragEnd } = this.props;
108
    document.removeEventListener('mousemove', this._dragMove);
109
    document.removeEventListener('mouseup', this._dragEnd);
110

111
    if (onDragEnd) {
112
      onDragEnd({
113
        X: this.startX - this.clientX,
114
        Y: this.startY - this.clientY
115
      })
116
    };
117
  }
118

119
  public render() {
120
    const { className, width = 100, height = 100, zIndex } = this.props;
121
    const { left = 0, top = 0 } = this.state;
122

123
    const styles: drag.LiteralO = {
124
      width,
125
      height,
126
      left,
127
      top
128
    }
129

130
    if (zIndex) {
131
      styles['zIndex'] = this.zIndex;
132
    }
133

134
    /**
135
     * dragbox 为拖拽默认样式
136
     * className 表示可以从外部传入class修改样式
137
     */
138
    const cls = classnames('dragbox', className);
139

140
    return (
141
      <div
142
        className={cls}
143
        onTouchStart={this._dragStart}
144
        onTouchMove={this._dragMove}
145
        onTouchEnd={this._dragEnd}
146
        onMouseDown={this._dragStart}
147
        onMouseUp={this._dragEnd}
148
        style={styles}
149
      >
150
        {this.props.children}
151
      </div>
152
    )
153
  }
154
}
155

156

157
export default Drag;
158

159
// /**
160
//  * 索引类型
161
//  * 表示key值不确定，但是可以约束key的类型，与value的类型
162
//  */
163
// interface LiteralO {
164
//   [key: number]: string
165
// }
166

167
// const enx: LiteralO = {
168
//   1: 'number',
169
//   2: 'axios',
170
//   3: 'http',
171
//   4: 'zindex'
172
// }
173

174
// /**
175
//  * 映射类型用另外一种方式约束JSON的key值
176
//  */
177
// type keys = 1 | 2 | 3 | 4 | 5;
178
// type Mapx = {
179
//   [key in keys]: string
180
// }
181

182
// const enx2: Mapx = {
183
//   1: 'number',
184
//   2: 'axios',
185
//   3: 'http',
186
//   4: 'zindex',
187
//   5: 'other'
188
// }
189

190
// interface Person {
191
//   name: string,
192
//   age: number
193
// }
194
// type Mapo = {
195
//   [P in keyof Person]: string
196
// }
197

198
// const enx3: Mapo = {
199
//   name: 'alex',
200
//   age: '20'
201
// }

1
// 官网demo
2
declare namespace JSX {
3
  interface IntrinsicElements {
4
    foo: any
5
  }
6
}
7

8
<foo />; // 正确
9
<bar />; // 错误

1
declare namespace JSX {
2
  interface IntrinsicElements {
3
    foo: { bar?: boolean }
4
  }
5
}
6

7
// `foo`的元素属性类型为`{bar?: boolean}`
8
<foo bar />;

10
// demo来自官方文档
20
interface FooProp {
30
    name: string;
40
    X: number;
50
    Y: number;
60
}
70

80
declare function AnotherComponent(prop: {name: string});
90
function ComponentFoo(prop: FooProp) {
10
    return <AnotherComponent name={prop.name} />;
11
}
12

13
const Button = (prop: {value: string}, context: { color: string }) => <button>

10
// demo来自官方文档
20
declare namespace JSX {
30
    interface ElementClass {
40
    render: any;
50
    }
60
}
70

80
class MyComponent {
90
    render() {}
10
}
11

12
function MyFactoryFunction() {
13
    return { render: () => {} }
14
}
15

16
<MyComponent />; // 正确
17
<MyFactoryFunction />; // 正确

10
// 案例来自官方文档
20
declare namespace JSX {
30
    interface ElementAttributesProperty {
40
      props; // 指定用来使用的属性名
50
    }
60
}
70

80
class MyComponent {
90
    // 在元素实例类型上指定属性
10
    props: {
11
     foo?: string;
12
    }
13
}
14

15
// `MyComponent`的元素属性类型为`{foo?: string}`
16
<MyComponent foo="bar" />

1
declare namespace JSX {
2
  interface ElementChildrenAttribute {
3
    children: {};  // specify children name to use
4
  }
5
}