这是我参与「第五届青训营 」伴学笔记创作活动的第4天
课堂重点🗒️🖋️
- 什么是 TypeScript
- 联合交叉类型
- 类型保护与类型守卫
- Merge 函数类型实现
- 函数返回值类型
- TypeScript 工程应用
1. TypeScript 发展历史
- 2012-10：微软发布了 TypeScript 第一个版本 (o.8)
- 2014-10: Angular 发布了基于 TypeScript 的 2.0 版本
- 2015-04: 微软发布了 Visual Studio Code
- 2016-o5: @types/react 发布，TypeScript 可开发 React
- 2020-o9: Vue 发布了 3.0 版本，官方支持 TypeScript
- 2021-11: V4.5 版本发布
1.1 什么是 TypeScript 编辑器推荐 Visual Studio Code
静态类型
- 可读性增强: 基于语法解析 TSDoc ， ide 增强
- 可维护性增强: 在编译阶段暴露大部分错误
👉适合多人合作的大型项目中，获得更好的稳定性和开发效率
JS 的超集
- 包含于兼容所有 JS 特性，支持共存
- 支持渐进式引入与升级
1.2 类型
基础数据类型
对象类型
函数类型
函数重载
数组类型
TypeScript 补充类型 ⭐
TypeScript 泛型 ⭐
类型别名 & 类型断言 ⭐
字符串/数字 字面量 ⭐
联合/交叉类型 ⭐ ⭐
- 联合类型: IA | IB;联合类型表示一个值可以是几种类型之一。
- 交叉类型: IA & IB;多种类型叠加到一起成为一种类型，它包含了所需的所有类型的特性。
类型保护与类型守卫
高级类型 ⭐ ⭐
函数返回值
2. 工程应用
2.1 Webpack
从图中我们可以看出，Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。安装时需要注意以下几点：
- 配置Webpack loader相关配置
- 配置 tsconfigjs 文件
- 运行 Webpack 启动 / 打包
- loader 处理 ts 文件时，会进行编译与类型检查
2.2 Node
安装时需要注意以下几点：
- 安装Node与npm
- 配置 tsconfig.js 文件
- 使用 npm 安装 tsc
- 使用 tsc 运行编译得到 js 文件
结尾：
今天主要学习了解 TypeScript 以及类型语法等入门内容。
综上，今天又是好好学习的一天！😊
