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