这是我在公众号的第 60 篇原创

意不意外，怎么就直接实践了？这才第二篇呀！这就是我文章的特别之处了。往下看！

1

方法

通过上一篇文章的学习，我们知道，typescript其实是一套约束规则。

理解了这一点，就可以大概确定我们的学习方向。

是规则，那么知识点之间，就不会有太强的关联性。我们可以一条一条的逐步学习。也就意味着我们并不用急于把官方文档里所有的规则一次性学完。甚至可以把文档当成一个手册，在具体使用时再去查询。
是约束，也就意味着开发方式的改变与限制。ts的开发会与通常情况下松散灵活的开发不太一样，这就必然会带来初期的不适应。约束带来的痛苦无法避免，我们要有这样一个心理预期。

最后抛开规则的学习，最重要的应该是什么？毫无疑问，是实践。这也是无法从官方文档获取到的重要讯息。

许多人只看官方文档，一脸懵逼！规则的学习好像不难，可运用到实践到底是什么样子？不知道。

所以，第一件事情，我们要抛开规则，来看一看，把ts用在实践里到底是什么样。这里以react中实现拖拽为例。

拖拽的原理与实现过程之前已经学习过，所以这里就把之前的代码直接拿过来调整一下

2

环境

一个简单的方式，是直接使用create-react-app创建一个已经支持typescript开发的项目。

> create-react-app tsDemo --typescript

当然，在不同的项目中支持typescirpt可能不太一样，因此这里就不做统一讲解，大家根据自己的需求在网上搜索方案即可。

除此之外，也可以clone我们的**练习项目**。

https://github.com/daraluv/practice

3

.d.ts

在ts的开发中，.d.ts文件扮演着至关重要的作用。通常情况下，这样的文件，我们称之为声明文件。

那么声明文件是一个什么样的东西呢？

前一篇文章我们讲过，ts的规则能够描述一个简单的变量，能够描述一个复杂的JSON数据，能够描述函数，也能够描述对象class。可是大量的描述规则代码如果和实际功能代码糅合在一起，势必会导致整个代码冗余杂乱。因此在实践中，当声明内容很多时，通常会统一在一个文件中编写ts的描述规则，这个文件，就是以.d.ts为后缀名的声明文件。

如果声明文件过多，那么就非常可能重名，为了避免相互干扰，typescript又引入了作用域namespace概念。

因此，如果我们要利用ts实现拖拽组件，那么文件结构会如下展示：

+ Drag
   - index.tsx
   - style.scss
   - interface.d.ts

其中interface中会声明在开发过程中遇到的所有复杂数据结构。大概内容如下：

declare namespace drag {
  ...
}

我们可以使用interface语法来约束一个JSON数据。

JSONdemo

在创建一个需要符合这个约束规则的数据时，只需要直接使用命名空间drag即可。ts会自动帮助我们识别而无需引入，或者ts会自动帮助我们引入(必要时)。

使用

整个拖拽功能完整声明文件如下

/** declare 为声明关键字，让外部组件能访问该命名空间*/
declare namespace drag {
  interface JSONDemo {
    name: string,
    age: number
  }
  interface DragProps {
    width?: number,
    height?: number,
    left?: number,
    top?: number,
    zIndex?: number,
    maxWidth?: number,
    maxHeight?: number,
    className?: string,
    onDragEnd?: (target: DragEndParam) => any,
    children?: any
  }

  interface DragState {
    left: number,
    top: number
  }

  interface DragEndParam {
    X: number,
    Y: number
  }

  type TouchEvent = React.TouchEvent & React.MouseEvent;

  interface LiteralO {
    width: number,
    height: number,
    [key: string]: any
  }
}

本文的主要目的在于帮助大家了解实践中ts的运用，所以如果初学ts，对一些语法不是很熟悉不用太过在意，具体的语法可以通过官方文档，或者后续文章中学习

通常情况下，每个「复杂」组件都会对应创建一个.d.ts的声明文件。

如果比较简单，我们不会需要.d.ts

4

React with TypeScript

我们可以使用 ES6 语法的 class 来创建 React 组件，所以如果熟悉 ES6 class 语法，则可以比较轻松的进一步学习TypeScript的class语法。在React中使用结合TypeScript是非常便利的。

首先，应该使用明确的访问控制符表明变量的有效范围

借鉴于其他编程语言的特性，一个类中的角色可能会包含

private 声明的私有变量/方法
public 声明的共有变量/方法
static声明的静态变量/方法

也就是说，每声明一个变量或者方法，我们都应该明确指定它的角色。而不是直接使用this.xxxx随意的给 class 新增变量。

然后，我们可以通过 TypeScript 的特性阅读 React 的声明(.d.ts)文件。以进一步了解React组件的使用。

React的声明文件，详细的描述了React的每一个变量，方法的实现。通过阅读它的声明文件，我们可以进一步加深对React的理解。

最后，理解泛型

class Component<P, S> {
        
        static contextType?: Context<any>;

        
        context: any;

        constructor(props: Readonly<P>);
        /**
         * @deprecated
         * @see https://reactjs.org/docs/legacy-context.html
         */
        constructor(props: P, context?: any);

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

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

        
        readonly props: Readonly<{ children?: ReactNode }> & Readonly<P>;
        state: Readonly<S>;
        /**
         * @deprecated
         * https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs
         */
        refs: {
            [key: string]: ReactInstance
        };
    }

这是在React的声明文件中，对于React.Component的描述。我们可以看到一些常用的state, setState, render等都有对应的描述。关键的地方是声明文件中有许多用到泛型的地方可能大家理解起来会比较困难。

class Component<P, S>

这里的<P, S>就是传入的泛型约束变量。

从构造函数constructor(props: P, context?: any); 的约束中，我们可以得知，P其实就是react组件中props的约束条件。

其中对于state的约束state: Readonly<S>;也可以看到，S是对State的约束。

暂时对泛型不理解也没关系，后续我们再进一步学习

基于上面几点理解，我们就可以实现Drag组件了。如下。代码仅仅只是阅读可能难以理解，一定要动手试试看！

// index.tsx

import * as React from 'react';
import classnames from 'classnames';
import './style.css';

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

class Drag extends React.Component<drag.DragProps, drag.DragState> {
  private elementWid: number;
  private elementHeight: number;
  private left: number;
  private top: number;
  private zIndex: number;
  private clientWidth: number;
  private clientHeight: number;
  
  private clientX: number;
  private clientY: number;

  private startX: number;
  private startY: number;

  private disX: number;
  private disY: number;

  private _dragStart: () => any;
  private _dragMove: () => any;
  private _dragEnd: () => any;

  constructor(props: drag.DragProps) {
    super(props);
    this.elementWid = props.width || 100;
    this.elementHeight = props.height || 100;
    this.left = props.left || 0;
    this.top = props.top || 0;
    this.zIndex = props.zIndex || 0;
    this.clientWidth = props.maxWidth || 600;
    this.clientHeight = props.maxHeight || 600;
    this._dragStart = this.dragStart.bind(this);

    this.state = {
      left: this.left,
      top: this.top
    };
  }

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

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

    this.zIndex += 1;

    this._dragMove = this.dragMove.bind(this);
    this._dragEnd = this.dragEnd.bind(this);

    if (!isMoblie) {
      document.addEventListener('mousemove', this._dragMove, false);
      document.addEventListener('mouseup', this._dragEnd, false);
    }
  }

  public dragMove(ev: drag.TouchEvent): void {
    if (isMoblie && ev.changedTouches) {
      this.clientX = ev.changedTouches[0].pageX;
      this.clientY = ev.changedTouches[0].pageY;
    } else {
      this.clientX = ev.clientX;
      this.clientY = ev.clientY;
    }

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

    if (left < 0) {
      left = 0;
    }

    if (top < 0) {
      top = 0;
    }

    if (left > this.clientWidth - this.elementWid) {
      left = this.clientWidth - this.elementWid;
    }

    if (top > this.clientHeight - this.elementHeight) {
      top = this.clientHeight - this.elementHeight;
    }

    this.setState({ left, top });
  }

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

    if (onDragEnd) {
      onDragEnd({
        X: this.startX - this.clientX,
        Y: this.startY - this.clientY
      })
    };
  }

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

    const styles: drag.LiteralO = {
      width,
      height,
      left,
      top
    }

    if (zIndex) {
      styles['zIndex'] = this.zIndex;
    }

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

    return (
      <div
        className={cls}
        onTouchStart={this._dragStart}
        onTouchMove={this._dragMove}
        onTouchEnd={this._dragEnd}
        onMouseDown={this._dragStart}
        onMouseUp={this._dragEnd}
        style={styles}
      >
        {this.props.children}
      </div>
    )
  }
}


export default Drag;

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

// const enx: LiteralO = {
//   1: 'number',
//   2: 'axios',
//   3: 'http',
//   4: 'zindex'
// }

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

// const enx2: Mapx = {
//   1: 'number',
//   2: 'axios',
//   3: 'http',
//   4: 'zindex',
//   5: 'other'
// }

// interface Person {
//   name: string,
//   age: number
// }
// type Mapo = {
//   [P in keyof Person]: string
// }

// const enx3: Mapo = {
//   name: 'alex',
//   age: '20'
// }

你会发现，React与ts的结合使用，并没有特别。我们只需要把React组件，看成一个class，他和其他的calss，并没有什么特别的不同了。

函数式组件同理。

5

JSX

普通的ts文件，以.ts作为后缀名。

而包含JSX的文件，则以.tsx作为后缀名。这些文件通常也被认为是React组件。

若要支持jsx，我们需要在tsconfig.js中，配置jsx的模式。一般都会默认支持。

ts支持三种jsx模式，preserve, react, react-native。这些模式只在代码生成阶段起作用 - 类型检查并不受影响。

这句话怎么理解呢？也就意味着，typescript在代码生成阶段，会根据我们配置的模式，对代码进行一次编译。例如，我们配置jsx: preserve，根据下面的图，.tsx 文件会被编译成 .jsx文件。而这个阶段是在代码生成阶段，因此，生成的 .jsx还可以被后续的代码转换操作。例如再使用babel进行编译。

配图来自官方文档

类型检查

这部分内容可能会难理解一点，大家不必强求现在就掌握，以后再说也OK

我们在实际使用过程中，经常会遇到组件类型兼容性的错误，甚至也看不太明白报错信息在说什么。这大概率是对JSX的属性类型理解不到位导致。

理解JSX的类型检测之前，我们需要理清楚两个概念。

「固有元素」

通常情况下，固有元素是指html中的已经存在元素。例如div。

固有元素div

固有元素使用特殊的接口 JSX.IntrinsicElements 来查找。我们也可以利用这个接口，来定义自己的固有元素「但是没必要」。

// 官网demo
declare namespace JSX {
  interface IntrinsicElements {
    foo: any
  }
}

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

固有元素都以小写开头。

我们可以通过以下方式，给固有元素定义属性。

declare namespace JSX {
  interface IntrinsicElements {
    foo: { bar?: boolean }
  }
}

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

「基于值的元素」

也就是React中常常提到的自定义元素。规定必须以大写字母开头。基于值的元素会简单的在它所在的作用域里按标识符查找。

// demo来自官方
import MyComponent from "./myComponent";
                                
<MyComponent />; // 当前作用域找得到，正确
<SomeOtherComponent />; // 找不到，错误

React自定义组件有两种方式

class 类组件
function 函数组件

由于这两种基于值的元素在 JSX 表达式里无法区分，因此 TypeScript首先会尝试将表达式做为函数组件进行解析。如果解析成功，那么TypeScript 就完成了表达式到其声明的解析操作。如果按照函数组件解析失败，那么 TypeScript 会继续尝试以类组件的形式进行解析。如果依旧失败，那么将输出一个错误。

「函数组件」

正如其名，组件被定义成 JavaScript 函数，它的第一个参数是 props 对象。TypeScript 会强制它的「函数执行的」返回值可以赋值给 JSX.Element。

// demo来自官方文档
interface FooProp {
    name: string;
    X: number;
    Y: number;
}

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

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

「类组件」

当一个组件由 class 创建而成「例如我们刚才实践的Drag组件」，那么当我们在使用该组件「即生成实例对象」时，则该实例类型必须赋值给 JSX.ElementClass 或抛出一个错误。

// demo来自官方文档
declare namespace JSX {
    interface ElementClass {
    render: any;
    }
}

class MyComponent {
    render() {}
}

function MyFactoryFunction() {
    return { render: () => {} }
}

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

函数组件的props直接作为参数传入，而类组件的 props，则取决于 JSX.ElementAttributesProperty。

// 案例来自官方文档
declare namespace JSX {
    interface ElementAttributesProperty {
      props; // 指定用来使用的属性名
    }
}

class MyComponent {
    // 在元素实例类型上指定属性
    props: {
     foo?: string;
    }
}

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

如果未指定 JSX.ElementAttributesProperty，那么将使用类元素构造函数或 SFC 调用的第一个参数的类型。因此，如果我们在定义类组件时，应该将props对应的泛型类型传入，以确保JSX的正确解析。

「子孙类型检查」

从TypeScript 2.3开始，ts引入了 children 类型检查。children 是元素属性「attribute」类型的一个特殊属性「property」，子 JSXExpression 将会被插入到属性里。与使用JSX.ElementAttributesProperty 来决定 props 名类似，我们可以利用 JSX.ElementChildrenAttribute 来决定 children 名。JSX.ElementChildrenAttribute 应该被声明在单一的属性里。

declare namespace JSX {
    interface ElementChildrenAttribute {
      children: {};  // specify children name to use
    }
}

「JSX表达式结果类型」

默认地JSX表达式结果的类型为any。我们可以自定义这个类型，通过指定JSX.Element接口。然而，不能够从接口里检索元素，属性或JSX的子元素的类型信息。它是一个黑盒。

自动推导结果为JSX.Element

E

最后，混迹半生，变成了一个贼爱钱的人，如果大家觉得文章写得还不错，一定要多多打赏我呀！至少点个再看吧 `(∩_∩)′ 嘻嘻 ~

TypeScript：React、拖拽、实践！

1

2

3

4

5

E