择要： TS入门手册。
- 原文：TypeScript，初次见面，请多指教
- 作者：徐祁
Fundebug经受权转载，版权归原作者一切。
为什么用 TS ?
说实话，最最先并没有想把 TS 用到现实项目中来，一来是觉得“范例”会限定 JS 的上风（好吧，就是浪写浪惯了）；二来听闻 TS + Redux 的酸爽味道，有点望而生畏；三来 TS 环境运用的库须要加范例的声明，许多库并不支撑，有点忧郁推进的流通度 …
这个时刻，就须要有一股无形的气力推你一把。推我的是团队正在日趋提高 TS, 我愿望推进你的可所以这篇文章 ~
接下来，会有 React + TS 的项目为背景，引见我在初学 TS 开辟项目中碰到的一些题目，愿望对你有所协助。
一. 怎样文雅的声明范例
1. 基础
不就是比 JS 多了一个范例声明吗？老汉撸起袖子拎起键盘就是一梭子：
interface Basic {
num: number;
str: string | null;
bol?: boolean;
}轻轻松松，五种 JS 值范例就声明好了。那数组、函数呢？再来：
interface Func {
func(str: string): void;
}
interface Arr {
str: string[];
mixed: Array<string | number>;
fixedStructure: [string, number];
basics: Basic[];
}除此之外，居然还能够定义本身的范例呢，比方经常使用的回调函数，在声明处须要指定回调函数的范例：
event.on('change', function() {});那这个 on 要领须要怎样声明呢？碰运气 Function当 cb 函数的范例呢
on(type: string, cb: Function): {}然后就祝贺了，你会获得一个 tslint error :
光荣的是，在这个 error 内里它通知了你应当怎样做：声明一个专用的函数范例就可以够了：
type Cb = () => void;
on(type: string, cb: Cb);至此，我们的 TS 人生算是起步了 👏👏👏
别的，罗列范例也是很经常使用的，比方声明一个状况机的各个状况：
enum Status {
Draft,
Published
}
// 也可指定值
enum Status {
Draft = 'Draft',
Published = 'Published'
}在运用罗列的时刻，常会碰到怎样将罗列和原始数据范例互相转换的需求，比方接口要求到的 status 是 Draft 字符串，然则代码中声明的 status 是 Enum 范例，怎样转换呢？
// string to enum
const str = 'Draft';
const status: Status = Status[str];
// enum to string
Status[Status.Published] === 'Published'2. 糅合
自力的范例或接口声明看起来好像并没有那末难，到项目中糅合一下呢？
- 能够会有几十个范例声明；
- 范例声明能够出如今接口入参出参中、React 组件的 Props 和 State 中、函数要领中；
- 当项目抵达一定范围，能够笼统出自力的库的时刻，范例也须要笼统；
- …
你能够碰到各种情况，会突破你对 TS 的掌控。如之奈何？
先说我们实践下来的结论：自力声明、就近声明、按职责分组、根绝“硬凑”关联、有限笼统。
– 自力声明
一个 ts 文件只声明一个范例或许接口，文件名为须要暴露的范例称号，轻易检索和治理。
– 就近声明
当一个声明没有被外部援用或许依靠时，能够斟酌就近放在运用的处所，典范的场景是 React 组件的 Props 和 State 的范例声明。
– 按职责分组
在项目中，须要声明范例的可大抵分为两类：一类是 model，也就是接口要求相干的，包括入参和出参；另一类是 view，界面衬着相干的。因而，我在 自力声明 的基础上，能够范例依据model 和 view 的维度举行分组，互相自力。
那末题目来了，如果是自力的范例声明的话，怎样把 model 的数据运用到 view 呢？ 能够你须要一个 adapter 来做范例的的转换：DTOTypes -> adapter -> ViewTypes, 完成类似于将接口中的字符串映射成罗列范例这之类的转换。
– 根绝“硬凑”关联
不要硬凑两个接口或许范例的关联，比方一个接口的创建和更新，能够字段都是一样，区别是一个有 id 另一个没有，因而我们能够就想着写一个范例然后 id 可选就好了。如许是少写了一个范例，然则能够会带来别的一些贫苦，比方带 id 的数据传给了新建的接口，然则 ts 搜检不出来。所以，发起不要怕贫苦，直接拆分红 CreateInputDTO 和 UpdateInputDTO.
– 有限笼统
在根绝“硬凑”关联的基础上，我们能够笼统出通用的声明。
基于上述准绳，处理了我作为一个初学者在范例声明上的搅扰，若有不对的或许更好的发起，迎接斧正~
3. 全能药膏 any
不是一切的范例声明都能一望无际的，当碰到确切处理不了的范例报错的时刻，as any 能带给你不一样的快感，然则不发起运用啊…
二. 怎样援用外部库
接下来聊聊第三方库在 TS 环境下的运用。
在 JS 中，npm 上有雄厚的海量的库帮我们完成一样平常的编码，能够并非一切的库都能完整被运用到 TS 中，由于有些缺乏范例声明。
比方，在 TS 中运用 react , 你会获得如许的一个范例搜检毛病：
由于 react 的库中并没有范例声明。
如今比较通用的做法是，才能完成和范例完成自力成两个库，也就是你须要再装置范例声明的库: @types/react.
当碰到上述题目的时刻，尝试装置一下 @types/[package].
但是，并非一切的库都有范例声明的完成，也会有许多不支撑 TS 的存在，但是又必须得运用这个库的时刻该怎样办？
本身写声明！
以 progressbar.js为例，基础运用要领是：
import * as ProgressBar from 'progressbar.js';
new ProgressBar.Circle(this.$progress, {
strokeWidth: 8,
trailColor: '#e5e4e5',
trailWidth: 8,
easing: 'easeInOut'
});我们须要对库中暴露出的 api 去做声明，对上述例子做个剖析：暴露了 Circle 类，Circle 构造函数包括两个参数，一个 HTMLElement，一个 options. OK, come on~
// 起首声明一下模块：
declare module 'progressbar.js' {
// 模块中暴露了 Circle 类
export class Circle {
constructor(container: HTMLElement, options: Options);
}
// 构造函数的 Options 须要零丁声明
interface Options {
easing?: string;
strokeWidth?: number;
trailColor?: string;
trailWidth?: number;
}
}云云我们便完成了一个简朴的声明，固然现实运用中的 API 一定比上述情况复杂，依据运用情况，用了哪些 API 或许参数，就补充那些的声明即可。
三. 怎样构造一个 TS 项目
TS 项目的目次构造上，跟 JS 项目一样，补充好 types 的声明就可以够了。
须要注重的是，将你愿望对外暴露的才能相干的范例声明都暴露出去，不友好的声明会让接入你项目的人异常的痛楚，同时，在 package.json 中须要指定 type 的 path, 比方："types": "dist/types/index.d.ts"
别的，务必加上 tslint, 更范例的去用 TS 完成功用，关于入门而言尤为重要。
TS 带来的转变
打仗 TS 一个月的感觉上来讲，过了磨合期的痛楚，就可以逐步感觉到 TS 带来的方便。
比方，有一个范例你记得名字是 ABC，你在 VSCode 中输入 A，然后发明，居然能找到我的声明，按一下回车，卧槽，自动给你 import 进来了，不必在一个个字的输入 ../../../../，不必算目次层级是不是准确了，是不是是很爽。
别的，强范例并非没有优点啊，浪写惯了能够照样会留隐患的，有点束缚也好 …
虽然你天天要多敲许多 import * as xx from 'xx', 然则你的代码也更加可靠了不是。
与君共勉，提早感觉下一代 ES 规范，TS 用起来吧~
坐标南京阿里巴巴，求前端 P7 一枚，岗亭要乞降报酬同杭州，手艺栈限 React，有Typescript 履历者更佳。有意者联络：henry.lx@alibaba-inc.com
关于Fundebug
Fundebug专注于JavaScript、微信小顺序、微信小游戏、支付宝小顺序、React Native、Node.js和Java线上运用及时BUG监控。 自从2016年双十一正式上线，Fundebug累计处理了10亿+毛病事宜，付费客户有Google、360、金山软件、百姓网等浩瀚品牌企业。迎接人人免费试用！
