Typescript入门| 青训营笔记

100 阅读2分钟

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

01. 什么是TypeScript

TypeScript 是 JavaScript 的一个超集,支持 ECMAScript 6 标准(ES6 教程)。 TypeScript 由微软开发的自由和开源的编程语言。

TypeScript 设计目标是开发大型应用,它可以编译成纯 JavaScript,编译出来的 JavaScript 可以运行在任何浏览器上。

TypeScript 发展史

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

JS 和 TS 的特点

JS:动态类型、弱类型语言 TS:静态类型、弱类型语言(TS源于JS)

动态类型:在执行的时候确定类型的匹配。
JS写完可以直接俄放在控制台,在执行的时候做类型的匹配。
静态类型:要走一次编译流程,通过编译的产物进行。
弱类型语言:类型转换。比如字符串的1和字符1直接相加(强类型语言就不可以)。

静态类型

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

JS超集:

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

编辑器推荐

Visual Studio Code 或者 TS的官网 ts在线编辑器

02. 基本语法

基础数据类型

image.png

对象类型

image.png

函数类型

image.png

函数重载

image.png

数组类型

image.png

TypeScript补充类型

image.png

TypeScript 泛型

image.png

image.png

类型别名&类型断言

image.png

字符串/数字 字面量

image.png

03. 高级类型

联合/交叉类型

image.png

  • 联合类型:IA|IB;联合类型标识一个值可以是几种类型之一
  • 交叉类型:IA&IB;多种类型叠加到一起成为一种类型,它包含了所需的所有类型的特征

image.png

类型包含于类型守卫

image.png

image.png

高级类型

image.png

image.png

image.png

函数返回值类型

image.png

image.png

04.工程应用

Typescript工程应用-Web

image.png

awesome-typescript-loader - npm (npmjs.com)
babel-loader - npm (npmjs.com)

Typescript工程应用-Node

image.png

05.Q&A