TypeScript 入门 | 青训营笔记

52 阅读2分钟

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

一、为什么要用TypeScript

什么是TypeScript?

静态类型

  • 可读性增强: 基于语法解析TSDoc、ide增强
  • 可维护性增强: 在编译阶段暴露大部分错误
  • 多人合作的大型项目中,获得更好的稳定性何开发效率

JS的超集

  • 包含于兼容所有JS特性,支持共存
  • 支持渐进式引入与升级

TypeScript可以让我们在开发中避免一些类型或者一些不是我们预期希望的代码结果错误。 对于 xxx is not defined,我们都知道JavaScript错误是在运行中才会抛出,但TypeScript错误是在编译器就会有报错,这极大提升了开发效率,也不用花大量时间去单测,大大节省了时间。

二、JavaScript与TypeScript

JavaScript : 动态类型、弱类型语言

TypeScript : 静态类型、 弱类型语言

两者之间的区别 image.png

三、JavaScript与TypeScript的代码运行流程

JavaScript运行流程如下,依赖NodeJs环境和浏览器环境

  • JavaScript代码转换为JavaScript-AST
  • AST代码转换为字节码
  • 运算时计算字节码

TypeScript运行流程,以下操作均为TSC操作,三步执行完继续同上操作,让浏览器解析

  • TypeScript代码编译为 TypeScript-AST
  • 检查AST代码上类型检查
  • 类型检查后,编译为JavaScript代码
  • JavaScript代码转换为JavaScript-AST
  • AST代码转换为字节码
  • 运算时计算字节码

三、TypeScript基本语法

基本数据类型

image.png

对象类型

image.png

函数类型

image.png

数组类型

image.png

TypeScript补充类型

image.png

范型 不预先指定具体的类型,而在使用的时候再指定类型的一种特性

image.png

image.png

第一次接触这个TypeScript,感觉TypeScript在数据类型上更严谨些,TypeScript错误在编译器就会有报错,这极大提升了开发效率,也不用花大量时间去单测,大大节省了时间。TS很值得学习!!!