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

一、本堂课重点内容：

• 使用TypeScript的原因
• TypeScript的基本语法
• TypeScript的高级类型——case、solution、evolution
• 工程应用

二、详细知识点介绍：

为什么什么是TypeScript

TypeScript的发展历史

• 2012-20：微软发布了TypeScript第一个版本（0.8）
• 2014-10：Angular发布了基于TypeScript的2.0版本
• 2015-04：微软发布了VSCode
• 2016-05：@types/react发布，TypeScript可开发React
• 2020-09：Vue发布了3.0版本，官方支持TypeScript
• 2021-11：v4.5版本发布

JS与TS

JavaScript和TypeScript都是弱类型语言，JavaScript为动态类型，TypeScript为静态类型。静态类型基于语法解析TSDoc，ide增强，可读性增强。且在编译阶段中就可以暴露大部分错误，增强了可维护性。在大型项目中可以提高稳定性和开发效率。 TS是JS的超集，包含于兼容所有JS特性，支持共存。支持渐进式引入与升级。

基础数据类型

基础数据类型

在JS中定义数据类型不需要指定数据的类型是什么。例如在JS中定义字符串的方式如下：const q = 'string';在TS中为const q:string = 'string';

对象类型

只读属性：约束属性不可在对象初始化外赋值 可选属性：定义该属性可以不存在 任意属性：约束所有对象属性都必须是该属性的子类型

数组类型

数组类型有几种表示方式：

• 类型+方括号表示：type IArr1 = number[];
• 泛型表示：type IArr2 = Array<string | number | Record<string,number>>;
• 元祖表示：type IArr3 = [number, number, string, string];
• 接口表示：interface IArr4 { [key: number]: any; }
  const arr1: IArr1 = [1, 2, 3, 4, 5, 6]; const arr2: IArr2 = [1, 2, '3', '4', {a:1}]; const arr3: IArr3 = [1, 2, '3', '4']; const arr4: IArr4 = ['string',() => null, {}, []];

高级类型

• 联合/交叉类型
• 类型保护与类型守卫
• 高级类型
• 函数返回值类型

工程应用

• webpack的应用
• Node

四、课后个人总结：

本节课入门了TypeScript。首先了解了TypeScript的发展历史，TypeScript是由微软发布的，并且可以在各个框架上使用，是JavaScript的超集，可以定义数据的类型，兼容js的特性，支持共存，并且能够大大地增强代码地可维护性和可读性。由于TypeScript的包容性，我们可以直接将JavaScript的代码文件改为TypeScript的文件。比起JavaScript，TS有更大的优势，可以提高代码的之江，方便开发。