《TypeScript开发实战》是极客时间上的课程，是由搜狗营销事业部高级架构师的梁宵老师出品，总共47章，涵盖了TypeScript所有用法，以及我们如何在实战中应用TS。本课程还覆盖了一些额外的前端基础内容，比如webpack配置，react编程范式，非常适合初学者。
下面是老师整理的TypeScript实战内容：
这是项目相关代码的github链接，https://github.com/geektime-geekbang/typescript-in-action
因为我对TS有一点了解，所以全程我都是1.5倍数看完。下面我会整理课程的全部内容，
基础篇
一般编程语言按类型基础，分为强类型和弱类型，动态类型和静态类型，而JS是弱类型动态语言，在类型转换的时候，隐式的帮你做了很多操作，减少了开发难度，同时也带来一些隐患，在你不想要类型转换的地方做了类型转换，或者一些动态的类型转换导致了代码跑异常，只有在运行时才知道。而TS是一门强类型静态的语言，强大的类型系统，不仅能开发阶段推导类型，带来开发的便利，同时为每一个变量函数声明类型，有助于代码的维护和重构。正如讲师所说，TS的ROI（投入回报率）是勾型的。小型且不长久的项目慎入，越是需要多人合作和生命周期越长的项目，回报率越高。
如何搭建TS环境，请自行百度。或者通过网站运行TS，https://www.tslang.cn/play/index.html
- 编写第一个TS程序
let hello: string = 'Hello TypeScript';
document.querySelectorAll('.app')[0].innerHTML = hello;
- 基本类型
ES6中基本类型，Boolean，Number，String，Array，Function，Object，Symbol，undefined，null。
TS数据类型，包含了ES6中所有类型，同时新增了一些类型，void，any，never，元组，枚举，高级类型。
- 枚举类型
通过关键字enum实现
enum Role {
teacher: 1,
children: 2,
other: 3
}
const childrenType: Role = Role[children];
- 接口
interface List {
id: number,
name: string
}
interface Result {
data: List[]
}
let result: Result = {
data: [
{ id: 1, name: 'A' },
{ id: 2, name: 'B' }
]
};
当然接口也可以约束函数
interface Add {
(x: number, y: number): number
}
let add: Add = (x, y) => x + y;
当然也可以用类型约束，用关键字type
type Add = (x: number, y: number) => number
let add: Add = (x, y) => x + y;
- 类
ts中添加了类型注解
class Dog {
constructor(name: string) {
this.name = name
}
static food: string = 'bones';
public run() {}
protected ;
private say = 'wangwang';
readonly dog = 'dog';
}
class Husky extends Dog {
constructor(name: string, color: string) {
super(props);
this.color = color
}
color: string
}
抽象类，用关键字abstract，只能被继承，不能被实例化。抽象类可以实现多态。
abstract class Animal {
eat() {
console.log('eat');
}
// 抽象方法可以不在父类中实现
abstract sleep(): void
}
const animal = new Animal(); // error
class Dog extends Animal{
constructor(name: string) {
super();
this.name = name;
}
run() {}
sleep() {
console.log('dog sleep');
}
}
const dog: Dog = new Dog('small dog');
dog.eat() // eat;
dog.sleep(); // dog sleep
类型与接口的关系，借用课程的一张图，侵删。
接口之间可以相互继承，类之间也可以相互继承，实现复用。接口可以通过类来实现，但是接口只能约束类的共有成员。
- 泛型
简单点说，类型也是动态传入，实现类型的灵活。也可以理解为，不预先确定的数据类型，具体类型只有在使用的时候才能确定。
function add<T>(x: T, y: T): T {
return x + y;
}
add<number>(1, 2);
- 高级类型
为了语言的灵活性，引入了高级类型
交叉类型
交叉类型需要实现所有的接口方法
interface DogInterface {
run() {}
}
interface CatInterface {
jump() {}
}
class Dog implements DogInterface & CatInterface {
run() {}
jump() {}
}
联合类型
使代码具有不确定性，增强代码的灵活性。
let a: number | string = 'a';
a = 1;
let b: 'a' | 'b' | 'c';
let c: 1 | 2 | 3;
索引类型、映射类型、条件类型，用到的场景比较少，可以用到时再去查询。
工程篇与实战篇
- 配置tsconfig.json
新建一个ts项目
yarn install -g tsc
tsc 'project'
这样就能新建一个TS项目，同时生成一个tsconfig.json文件。
如果一个目录下存在一个tsconfig.json文件，那么它意味着这个目录是TypeScript项目的根目录。tsconfig.json文件中指定了用来编译这个项目的根文件和编译选项。（来自于html中文网）
https://www.html.cn/doc/typescript/doc/handbook/tsconfig.json.html，这里面有项目所需配置项说明。
- 编译工具
一般我们都是基于前端框架，很难像VsCode一样，不借助任何前端框架，所以我们选择编译工具的时候，最好不要用ts-loader，因为它缺少插件支持，并且TS官方团队也选择和Babel合作，兼容现有前端的生态，所以推荐使用Babel。
- 投入生产
如果我们需要在现有项目中使用TS，需要遵循几个原则，共存原则，宽松原则和严格原则，根据字面意思，可以选择配置tsconfig.json配置项，设置不同对严格等级。而我推荐对部分开启严格模式，先项目一小部分，其他部分采用宽松原则，这样项目能正常开发和稳步迁移。
总结
这个课程很全面讲解了TS，支不支持梁老师，看大家的意愿，而我是通过极客时间送我的7天试用面卡看的视频。我还看完了《React进阶实战篇》，随后送达。将注意力focus到能产生改变的领域，与大家共勉。
写作时间：20190915
网友评论