TypeScript学习

简介: 是什么优势搭建开发环境就是加一个TypeScript的编译器。在线编译器http://www.typescriptlang.

是什么

img_2c8bf120460623aa3ddd7d1a9345e091.png
img_df39a1175ca09bbf0ca594f6c8654c7c.png

优势

img_7ac76ad7e64a2ecef4756bd344b3effd.png

搭建开发环境

就是加一个TypeScript的编译器。
在线编译器http://www.typescriptlang.org/play/index.html

img_fea616a2da9d7fce48d28d8747d48505.png

离线编译器

npm install -g typescript

实际功能就是编译代码

  • tsc xxx.ts
    把.ts 编译成.js
    类似java,把.java编译成.class

新特性

几乎就是ES6的完成版,全部来自es6
https://babeljs.io/learn-es2015/

字符串新特性

  • 多行字符串
    双撇号``声明字符串


    img_a386655a0a63367731d078a66339abff.png
img_14a0036e844038fe2b0d445a42804d3d.png
  • 字符串模板
img_64ac03979e74f8cf0435457ec905e3d0.png
img_702a898d6328963f8c5a15eb202b97c6.png

-自动拆分字符串

img_785450083602cee271876dd7a956ec29.png
img_c5463a3d58a751ad169907464f538244.png

参数类型新特性

类型声明


img_61910227588be761493ce5b1272beea4.png

参数默认值


img_807ab7b5695db6ab8df2636c79de6fad.png

可选参数
img_b02a835899b2169ec2d95db95ea247b9.png

函数新特性

可变参数

img_7f4cbdf28158987ffcba843e3dd626c0.png

generator方法

img_79d657ec1bfacd58301a4bb9b45701de.png

析构表达式

img_b3317f098060a96c4e76b27bd1663d82.png
img_bee146673724d5adf2a6eaebbf18ebb4.png
img_493a22ee20c017c34446f6c190e050ed.png
img_62ccc4c25c0f8a0afac7e83a0a1d4dd5.png

lamadba表达式

img_204c47d0fb6180ca3b94fefd204430ee.png

foreach ,for in ,for of

forEach 不能break

img_f16a7a584978ed778436cfe8bcdef95d.png

for in 展示的是名字,如果取值要去obj[n]

img_4527e099c222809cb44be42fc5c2abd8.png
img_66c0ffbdefd600f723ac843fbd2456d5.png
img_3f0b152b1109adb69c42380290e49ed9.png
img_5d8bcfdd72547f59455eb7e3a570fcd3.png

for of 可以被打断,直接取得值

img_d3e9af40d8c1497774361e481d3b5f8c.png

面向对象特性


泛型
接口
模块(类似java的包,这里简化了,import和export)

img_b05562be4a2367265bbbb214bb29aeca.png
img_a49aa36a310cf677ef9544a0313eba3b.png

注解

img_6515e5604df73cab00732af6a69443e2.png

类型定义文件,使用其他js包,如jquary
引入jquary


img_7ce1f49d9422d22e9c674335de0a179d.png
相关文章
|
7月前
|
JavaScript 前端开发 编译器
TypeScript【泛型1、泛型2、声明合并、命名空间 、模块1、模块2、声明文件简介】(五)-全面详解(学习总结---从入门到深化)
TypeScript【泛型1、泛型2、声明合并、命名空间 、模块1、模块2、声明文件简介】(五)-全面详解(学习总结---从入门到深化)
132 0
|
7月前
|
编解码 JavaScript 前端开发
TypeScript【第三方声明文件、自定义声明文件、tsconfig.json文件简介、tsconfig.json 文件结构与配置】(六)-全面详解(学习总结---从入门到深化)
TypeScript【第三方声明文件、自定义声明文件、tsconfig.json文件简介、tsconfig.json 文件结构与配置】(六)-全面详解(学习总结---从入门到深化)
355 0
|
7月前
|
JavaScript
TypeScript【类的继承、访问修饰符、readonly 修饰符、存取器、实例方法与静态方法、实例属性与静态属性、静态属性、抽象类】(三)-全面详解(学习总结---从入门到深化)
TypeScript【类的继承、访问修饰符、readonly 修饰符、存取器、实例方法与静态方法、实例属性与静态属性、静态属性、抽象类】(三)-全面详解(学习总结---从入门到深化)
68 0
|
3月前
|
JavaScript
typeScript基础(1)_原始数据类型学习
本文介绍了TypeScript中的原始数据类型,包括布尔型、数值型、字符串型、`void`、`null`和`undefined`,并展示了如何在TypeScript中声明和使用这些类型。同时,还介绍了如何通过`tsc`命令编译TypeScript文件。
55 4
|
2月前
|
JavaScript 索引
TypeScript(TS)安装指南与基础教程学习全攻略(二)
TypeScript(TS)安装指南与基础教程学习全攻略(二)
56 0
|
2月前
|
JavaScript 前端开发 安全
TypeScript(TS)安装指南与基础教程学习全攻略(一)
TypeScript(TS)安装指南与基础教程学习全攻略(一)
31 0
|
5月前
|
JavaScript 前端开发 安全
如何学习typescript?
【7月更文挑战第9天】1. 了解其为JavaScript超集,增加类型系统和ES6特性,提升代码安全性和效率。 2. 安装 TypeScript 全局 (`npm install -g typescript`),用`tsc -v`验证,或尝试在线的TypeScript Playground。 3. 学习类型注解、基础类型(如number、string、boolean等)、any与unknown,接口和类。 4. 探索高级特性,如泛型、模块&命名空间、装饰器。 5. 实践中巩固知识,如做小项目(如用React或Vue),阅读官方文档,参与社区讨论。持续编码和实践是关键。
40 0
|
7月前
|
JavaScript 前端开发 编译器
TypeScript【泛型1、泛型2、声明合并、命名空间 、模块1、模块2、声明文件简介】(五)-全面详解(学习总结---从入门到深化)(下)
TypeScript【泛型1、泛型2、声明合并、命名空间 、模块1、模块2、声明文件简介】(五)-全面详解(学习总结---从入门到深化)
59 0
TypeScript【泛型1、泛型2、声明合并、命名空间 、模块1、模块2、声明文件简介】(五)-全面详解(学习总结---从入门到深化)(下)
|
7月前
|
JavaScript
TypeScript【泛型1、泛型2、声明合并、命名空间 、模块1、模块2、声明文件简介】(五)-全面详解(学习总结---从入门到深化)(上)
TypeScript【泛型1、泛型2、声明合并、命名空间 、模块1、模块2、声明文件简介】(五)-全面详解(学习总结---从入门到深化)
76 0
|
7月前
|
JavaScript 前端开发 编译器
TypeScript【可选属性、只读属性、额外的属性检查、函数类型、类类型、继承接口】(四)-全面详解(学习总结---从入门到深化)
TypeScript【可选属性、只读属性、额外的属性检查、函数类型、类类型、继承接口】(四)-全面详解(学习总结---从入门到深化)
75 0