[ TypeScript 的发展与基本语法 | 青训营笔记]

72 阅读2分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 17 天

一、本堂课重点内容:

  • TypeScript 历史及定义解析
  • TypeScript 基本语法
  • TypeScript 练习工具

二、详细知识点介绍:

1. TypeScript 历史及定义解析
  • TypeScript发展历史

2012-10:微软发布TypeScript第一个版本

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

TypeScript源于JavaScript,JavaScript是动态类型语言,而TypeScript是静态类型语言,两者都是弱类型语言。

动态类型即代码执行时判断变量类型,而静态类型是提前标明变量类型,会先编译再用编译的结果来执行,两者的区别在于编译时间是在执行时还是执行前。

弱类型语言即执行时可以进行类型转换,而强类型语言不可以。

  • TypeScript 优势解读

1.静态类型可以基于语法解析TSDoc,ide增强使得可读性变强,因为在编译阶段就可以暴露大部分错误,所以可维护性也得到增强,因此在多人合作得项目中可以获得更好的稳定性和开发效率。

2.TypeScript是JS的超集,包含并兼容所有JS特性,支持共存,支持渐进式引入与升级。

2. TypeScript 基本语法
  • 基础数据类型

JavaScript => TypeScript

字符串:const q = 'string'; => const q: string = 'string'; 
数字:const w = 1; => const w: number = 1;
布尔值:const e = true; => const e: boolean = true; 
nullconst r = null; => const r: null = null;
undefinedconst t = undefined; => const t: undefined = undefined;
  • 对象类型

image.png

image.png

  • 函数类型

image.png

  • 函数重载

image.png

  • 数组类型

image.png

  • Typescript补充类型

image.png

  • Typescript泛型

image.png

image.png

  • 类型别名 & 类型断言

image.png

  • 字符串/数字 字面量类型

image.png

3. TypeScript 练习工具

建议使用VS Code,或可以在官网的在线编译器快速体验typescript编写。

三、课后个人总结:

通过本节课程,我了解到了Typescript的发展历史以及它的优势所在,并且初步认识了Typescript的数据类型和使用方法。