了解TypeScript | 青训营笔记

84 阅读2分钟

这是我参与「第四届青训营 」笔记创作活动的第3天

TypeScript是一种由微软开发的自由和开源的编程语言,是JavaScript的一个超集,添加了可选的静态类型和面向对象编程,TypeScript扩展了js的语法。

TypeScript发展历史

  • 2012-10:软微发布了TypeScript第一个版本(0.8)
  • 2014-10:Angular发布了基于TypeScript的2.0版本
  • 2015-04:软微发布了Visual Studio Code
  • 2016-05:@types/react发布,TypeScript可开发React
  • 2020-09:Vue发布了3.0版本,官方支持TypeScript
  • 2021-11:v4.5版本发布

为什么使用TypeScript

image.png

image.png

  • 动态类型:在执行js的时候才会进行匹配
  • 静态类型:会提前做相应的事情,例如Java 静态类型特点:
  • 可读性增强:基于语法解析TSDoc,ide增强
  • 可维护性增强:在编译阶段暴露大部分错误——多人合作的大型项目中,获得更好的稳定性和开发效率
编辑器推荐

1.visual studio code;2.TypeScript官网的编辑器

基本语法

基础数据类型

image.png

对象类型

image.png 除了常规的对象类型,ts还提供了只读数组、元组、属性修饰符、索引签名等。

函数类型

image.png 在TypeScript中定义了一个函数,如果不按要求传参,或者返回值类型和定义的类型不同时,都会出现编译报错,这就是TypeScript中函数的重要区别。

函数重载

image.png

数组类型

image.png 一般会使用第一第二种

TypeScript补充类型

image.png

类型别名/类型断言

image.png 类型别名——就是给一个类起新名字,但是他们都代表同一种类型

类型断言——可以告诉编辑器‘我知道这是什么类型’,让他不要发出错误

字符串/数字/字面量

image.png

高级类型

联合/交叉类型

image.png 联合类型:IA|IB,联合类型表示一个值可以使几种类型之一 交叉类型:IA&IB,多种类型叠加到一起成为一种类型,它包含了所需的所有类型的特征

image.png

类型保护/类型守卫

类型保护是可执行运行时检查的一种表达式,用于确保该类型在一定的范围内。其主要思想是尝试检测属性、方法或原型,以确定如何处理值。 四种方式实现类型保护:

  • in关键字、typeof关键字、isntanceof关键字、自定义类型保护的类型谓词

TypeScript优势

  • 支持es6/7,存在优秀的自编译能力
  • 强大的IDE支持
  • 有更好的API文档,与源代码同步
  • 已有的类库可以很方便的使用 angular2.0开始,就是以TypeScript开发, vue3能够很好的配合TypeScript开发