1
方法
通过上一篇文章的学习，我们知道，typescript其实是一套约束规则。
理解了这一点，就可以大概确定我们的学习方向。
- 是规则，那么知识点之间，就不会有太强的关联性。我们可以一条一条的逐步学习。也就意味着我们并不用急于把官方文档里所有的规则一次性学完。甚至可以把文档当成一个手册，在具体使用时再去查询。
- 是约束，也就意味着开发方式的改变与限制。ts的开发会与通常情况下松散灵活的开发不太一样，这就必然会带来初期的不适应。约束带来的痛苦无法避免，我们要有这样一个心理预期。
最后抛开规则的学习，最重要的应该是什么？毫无疑问，是实践。这也是无法从官方文档获取到的重要讯息。
许多人只看官方文档，一脸懵逼！规则的学习好像不难，可运用到实践到底是什么样子？不知道。
所以，第一件事情，我们要抛开规则，来看一看，把ts用在实践里到底是什么样。这里以react中实现拖拽为例。
拖拽的原理与实现过程之前已经学习过，所以这里就把之前的代码直接拿过来调整一下
2
环境
一个简单的方式，是直接使用create-react-app创建一个已经支持typescript开发的项目。
> create-react-app tsDemo --typescript
当然，在不同的项目中支持typescirpt可能不太一样，因此这里就不做统一讲解，大家根据自己的需求在网上搜索方案即可。
除此之外，也可以clone我们的**练习项目**。
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
