这是我参与「第五届青训营 」伴学笔记创作活动的第 5 天，接下来是一些学习笔记以及我个人的思考和总结。
一、本堂课重点内容：
- TypeScript 历史及定义解析
- TypeScript 优势解读
- TypeScript 练习工具
- 联合交叉类型
- 类型保护与类型守卫
- 函数返回值类型
- TypeScript 工程应用
二、详细知识点介绍：
- TypeScript是微软开发的一个开源的编程语言，通过在JavaScript的基础上添加静态类型定义构建而成。TypeScript通过TypeScript编译器或Babel转译为JavaScript代码，可运行在任何浏览器，任何操作系统。
TypeScript 是一种给 JavaScript 添加特性的语言扩展。增加的功能包括：
- 类型批注和编译时类型检查
- 类型推断
- 类型擦除
- 接口
- 枚举
- Mixin
- 泛型编程
- 名字空间
- 元组
- Await
以下功能是从 ECMA 2015 反向移植而来：
- 类
- 模块
- lambda 函数的箭头语法
- 可选参数以及默认参数
-
TypeScript: 静态类型的弱类型语言
静态类型：
-
可读性增强: 基于语法解析TSDoc，ide增强
-
可维护性增强: 在编译阶段暴露大部分错误
=》
多人合作的大型项目中，获得更好的稳定性和开发效率
-
-
TypeScript的优点：
- 包含于兼容所有的JS特性，支持共存
- 支持渐进式引入与升级
-
语法
const q = 'string'; => const q: string = 'string';
con r = null; => const r: null = null;
冒号后面接数据类型名称
函数重载
数组类型
/*「类型 +方括号」 表示*/
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, {}, []];
TypeScript泛型
定义了泛型之后也就和正常类型一样去使用
泛型的一些高级语法：1.泛型约束；2.泛型参数的默认类型
联合/交叉类型
联合类型: IA | IB;联合类型表示一个值可以是几种类型之一
交叉类型: IA & IB;多种类型叠加到一起成为一种类型，它包含了所需的所有类型的特性
函数返回值类型
TypeScript工程应用-Web
- 配置webapack loader相关配置
- 配置tsconfig.js文件
- 运行webpack启动/打包
- loader处理ts文件时，会进行编译与类型检查
ypeScript工程应用-Node
- 安装Node与npm
- 配置tsconfig.js文件
- 使用npm安装tsc
- 使用tsc运行编译得到js文件
三、实践练习例子：
/*空类型，表示无赋值*/
type IEmptyFunction = () => void;
/*任意类型，是所有类型的子类型*/
type IAnyType = any;
/*枚举类型:支持枚举值到枚举名的正、反向映射*/
enum EnumExample {
add = '+',
mult = '*',
}
EnumExample['add'] === '+'
EnumExample['+'] === 'add';
enum ECorlor { Mon, Tue, Wed, Thu, Fri, Sat, Sun };
ECorlor['Mon'] === 0;
ECorlor[0] === 'Mon';
/*泛型*/
type INumArr = Array<number>;
类型别名&类型断言
/*通过type关键字定义了IObjArr的别名类型*/
type IObjArr = Array<{
key: string;
[objKey: string]:any;
}>
function keyBy<T extends I0bjArr>(objArr: Array<T>) {
/* 未指定类型时， result类型为{} */
const result = objArr.reduce((res, val, key) => {
res[key] = val;
return res;
},{});
/*通过as关键字，断言result类型为正确类型*/
return result as Record<string, T>;
}
字符串 / 数字 字面量
/* 允许指定字符串/数字必须的固定值 *
/* IDomTag必须为html、body、div、span中的其一 */
type IDomTag = 'html' | 'body' | 'div' | 'span';
/* IOddNumber必须为1、3、5、7、9中的其一 */
type IOddNumber = 1|3|5|7|9;
类型保护与类型守卫
interface IA { a: 1, a1: 2 }
interface IB { b: 1, b1: 2 }
function log(arg: IA | IB) {
/*报错:类型“IA |IB"上不存在属性"a"。类型"IB" 上不存在属性"a"*/
/*结论:访问联合类型时,处于程序安全,仅能访问联合类型中的交集部分*/
if (arg.a) {
console.log(arg.a1)
} else {
console.log(arg.b1);
}
}
//实现函数logBook类型
//函数接受书本类型，并logger出相关特征
function logBook(book: IBookItem) {
//联合类型+类型保护=自动类型推断
if (book.type === 'history') {
console.log(book.range)
} else {
console.log(book.theme);
}
通过一个联合类型和类型保护的方式，它就自动做了一个类型推断
四、课后个人总结：
重点是如何把JavaScript的代码给TypeScript类型化。
TypeScript的可读性和可维护性很重要。
TypeScript在工程中的应用非常广泛，需要深入学习，特别是在往后的开发中。
