《TypeScript开发实战》总结

《TypeScript开发实战》是极客时间上的课程，是由搜狗营销事业部高级架构师的梁宵老师出品，总共47章，涵盖了TypeScript全部用法，以及咱们如何在实战中应用TS。本课程还覆盖了一些额外的前端基础内容，好比webpack配置，react编程范式，很是适合初学者。

下面是老师整理的TypeScript实战内容：

这是项目相关代码的github连接，github.com/geektime-ge…

由于我对TS有一点了解，因此全程我都是1.5倍数看完。下面我会整理课程的所有内容，

基础篇

通常编程语言按类型基础，分为强类型和弱类型，动态类型和静态类型，而JS是弱类型动态语言，在类型转换的时候，隐式的帮你作了不少操做，减小了开发难度，同时也带来一些隐患，在你不想要类型转换的地方作了类型转换，或者一些动态的类型转换致使了代码跑异常，只有在运行时才知道。而TS是一门强类型静态的语言，强大的类型系统，不只能开发阶段推导类型，带来开发的便利，同时为每个变量函数声明类型，有助于代码的维护和重构。正如讲师所说，TS的ROI（投入回报率）是勾型的。小型且不长久的项目慎入，越是须要多人合做和生命周期越长的项目，回报率越高。

如何搭建TS环境，请自行百度。或者经过网站运行TS，www.tslang.cn/play/index.…

• 编写第一个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中文网）

www.html.cn/doc/typescr…，这里面有项目所需配置项说明。

• 编译工具

通常咱们都是基于前端框架，很难像VsCode同样，不借助任何前端框架，因此咱们选择编译工具的时候，最好不要用ts-loader，由于它缺乏插件支持，而且TS官方团队也选择和Babel合做，兼容现有前端的生态，因此推荐使用Babel。

• 投入生产

若是咱们须要在现有项目中使用TS，须要遵循几个原则，共存原则，宽松原则和严格原则，根据字面意思，能够选择配置tsconfig.json配置项，设置不一样对严格等级。而我推荐对部分开启严格模式，先项目一小部分，其余部分采用宽松原则，这样项目能正常开发和稳步迁移。

总结

这个课程很全面讲解了TS，支不支持梁老师，看你们的意愿，而我是经过极客时间送个人7天试用面卡看的视频。我还看完了《React进阶实战篇》，随后送达。将注意力focus到能产生改变的领域，与你们共勉。

---

写做时间：20190915