《TypeScript开发实战》总结

《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

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,874评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,102评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,676评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,911评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,937评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,935评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,860评论 3 416
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,660评论 0 271
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,113评论 1 308
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,363评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,506评论 1 346
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,238评论 5 341
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,861评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,486评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,674评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,513评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,426评论 2 352

推荐阅读更多精彩内容

  • 使用Visual Studio Code搭建TypeScript开发环境 1、TypeScript是干什么的 ? ...
    KingOfLion阅读 1,643评论 0 8
  • 本文系原创,转载请附带作者信息:yhlben项目地址:https://github.com/yhlben/cdfa...
    孟思行阅读 1,190评论 0 2
  • 山墙冻斜烟,轻雾染苍黄 丹桂云中挂,新添炉中香 琼香伴南风,未识落蕊意 椒兰生瑞霭,玉窗燕乱飞 皎月映云屏,巧遇河...
    桐月九阅读 256评论 2 5
  • 步入了初中的门槛,踏上了一个新的阶梯。我们都曾为学习而努力着,从小学补初中,从初一经过了一个暑假,步入了初...
    吴春潇妈妈阅读 106评论 0 1
  • 工作随着时间的推移慢慢的逐渐熟悉,昨晚因为少放几盘料,又找了一个凳子有料的时候休息一下感觉轻松了许多。慢慢学着做,...
    道破天机阅读 225评论 0 2