是什么
![img_2c8bf120460623aa3ddd7d1a9345e091.png](https://yqfile.alicdn.com/img_2c8bf120460623aa3ddd7d1a9345e091.png?x-oss-process=image/resize,w_1400/format,webp)
![img_df39a1175ca09bbf0ca594f6c8654c7c.png](https://yqfile.alicdn.com/img_df39a1175ca09bbf0ca594f6c8654c7c.png?x-oss-process=image/resize,w_1400/format,webp)
优势
![img_7ac76ad7e64a2ecef4756bd344b3effd.png](https://yqfile.alicdn.com/img_7ac76ad7e64a2ecef4756bd344b3effd.png?x-oss-process=image/resize,w_1400/format,webp)
搭建开发环境
就是加一个TypeScript的编译器。
在线编译器http://www.typescriptlang.org/play/index.html
![img_fea616a2da9d7fce48d28d8747d48505.png](https://yqfile.alicdn.com/img_fea616a2da9d7fce48d28d8747d48505.png?x-oss-process=image/resize,w_1400/format,webp)
离线编译器
npm install -g typescript
实际功能就是编译代码
- tsc xxx.ts
把.ts 编译成.js
类似java,把.java编译成.class
新特性
几乎就是ES6的完成版,全部来自es6
https://babeljs.io/learn-es2015/
字符串新特性
-
多行字符串
双撇号``声明字符串
![img_14a0036e844038fe2b0d445a42804d3d.png](https://yqfile.alicdn.com/img_14a0036e844038fe2b0d445a42804d3d.png?x-oss-process=image/resize,w_1400/format,webp)
- 字符串模板
![img_64ac03979e74f8cf0435457ec905e3d0.png](https://yqfile.alicdn.com/img_64ac03979e74f8cf0435457ec905e3d0.png?x-oss-process=image/resize,w_1400/format,webp)
![img_702a898d6328963f8c5a15eb202b97c6.png](https://yqfile.alicdn.com/img_702a898d6328963f8c5a15eb202b97c6.png?x-oss-process=image/resize,w_1400/format,webp)
-自动拆分字符串
![img_785450083602cee271876dd7a956ec29.png](https://yqfile.alicdn.com/img_785450083602cee271876dd7a956ec29.png?x-oss-process=image/resize,w_1400/format,webp)
![img_c5463a3d58a751ad169907464f538244.png](https://yqfile.alicdn.com/img_c5463a3d58a751ad169907464f538244.png?x-oss-process=image/resize,w_1400/format,webp)
参数类型新特性
类型声明
![img_61910227588be761493ce5b1272beea4.png](https://yqfile.alicdn.com/img_61910227588be761493ce5b1272beea4.png?x-oss-process=image/resize,w_1400/format,webp)
参数默认值
![img_807ab7b5695db6ab8df2636c79de6fad.png](https://yqfile.alicdn.com/img_807ab7b5695db6ab8df2636c79de6fad.png?x-oss-process=image/resize,w_1400/format,webp)
可选参数
![img_b02a835899b2169ec2d95db95ea247b9.png](https://yqfile.alicdn.com/img_b02a835899b2169ec2d95db95ea247b9.png?x-oss-process=image/resize,w_1400/format,webp)
函数新特性
可变参数
![img_7f4cbdf28158987ffcba843e3dd626c0.png](https://yqfile.alicdn.com/img_7f4cbdf28158987ffcba843e3dd626c0.png?x-oss-process=image/resize,w_1400/format,webp)
generator方法
![img_79d657ec1bfacd58301a4bb9b45701de.png](https://yqfile.alicdn.com/img_79d657ec1bfacd58301a4bb9b45701de.png?x-oss-process=image/resize,w_1400/format,webp)
析构表达式
![img_b3317f098060a96c4e76b27bd1663d82.png](https://yqfile.alicdn.com/img_b3317f098060a96c4e76b27bd1663d82.png?x-oss-process=image/resize,w_1400/format,webp)
![img_bee146673724d5adf2a6eaebbf18ebb4.png](https://yqfile.alicdn.com/img_bee146673724d5adf2a6eaebbf18ebb4.png?x-oss-process=image/resize,w_1400/format,webp)
![img_493a22ee20c017c34446f6c190e050ed.png](https://yqfile.alicdn.com/img_493a22ee20c017c34446f6c190e050ed.png?x-oss-process=image/resize,w_1400/format,webp)
![img_62ccc4c25c0f8a0afac7e83a0a1d4dd5.png](https://yqfile.alicdn.com/img_62ccc4c25c0f8a0afac7e83a0a1d4dd5.png?x-oss-process=image/resize,w_1400/format,webp)
lamadba表达式
![img_204c47d0fb6180ca3b94fefd204430ee.png](https://yqfile.alicdn.com/img_204c47d0fb6180ca3b94fefd204430ee.png?x-oss-process=image/resize,w_1400/format,webp)
foreach ,for in ,for of
forEach 不能break
![img_f16a7a584978ed778436cfe8bcdef95d.png](https://yqfile.alicdn.com/img_f16a7a584978ed778436cfe8bcdef95d.png?x-oss-process=image/resize,w_1400/format,webp)
for in 展示的是名字,如果取值要去obj[n]
![img_4527e099c222809cb44be42fc5c2abd8.png](https://yqfile.alicdn.com/img_4527e099c222809cb44be42fc5c2abd8.png?x-oss-process=image/resize,w_1400/format,webp)
![img_66c0ffbdefd600f723ac843fbd2456d5.png](https://yqfile.alicdn.com/img_66c0ffbdefd600f723ac843fbd2456d5.png?x-oss-process=image/resize,w_1400/format,webp)
![img_3f0b152b1109adb69c42380290e49ed9.png](https://yqfile.alicdn.com/img_3f0b152b1109adb69c42380290e49ed9.png?x-oss-process=image/resize,w_1400/format,webp)
![img_5d8bcfdd72547f59455eb7e3a570fcd3.png](https://yqfile.alicdn.com/img_5d8bcfdd72547f59455eb7e3a570fcd3.png?x-oss-process=image/resize,w_1400/format,webp)
for of 可以被打断,直接取得值
![img_d3e9af40d8c1497774361e481d3b5f8c.png](https://yqfile.alicdn.com/img_d3e9af40d8c1497774361e481d3b5f8c.png?x-oss-process=image/resize,w_1400/format,webp)
面向对象特性
类
泛型
接口
模块(类似java的包,这里简化了,import和export)
![img_b05562be4a2367265bbbb214bb29aeca.png](https://yqfile.alicdn.com/img_b05562be4a2367265bbbb214bb29aeca.png?x-oss-process=image/resize,w_1400/format,webp)
![img_a49aa36a310cf677ef9544a0313eba3b.png](https://yqfile.alicdn.com/img_a49aa36a310cf677ef9544a0313eba3b.png?x-oss-process=image/resize,w_1400/format,webp)
注解
![img_6515e5604df73cab00732af6a69443e2.png](https://yqfile.alicdn.com/img_6515e5604df73cab00732af6a69443e2.png?x-oss-process=image/resize,w_1400/format,webp)
类型定义文件,使用其他js包,如jquary
引入jquary
![img_7ce1f49d9422d22e9c674335de0a179d.png](https://yqfile.alicdn.com/img_7ce1f49d9422d22e9c674335de0a179d.png?x-oss-process=image/resize,w_1400/format,webp)