TypeScript|青训营笔记

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

一、课程知识要点：

1. JS与TS的区别
2. 基本语法
3. 高级类型
4. 工程应用

二、详细知识点介绍：

JS与TS的区别

• JS：动态类型，弱类型语言
• TS：静态类型，弱类型语言

静态类型

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

JS的超集

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

基本语法

• 基础数据类型

/* 字符串 */ 
const q = 'string'; 
/* 数字 */ 
const w = 1; 
/* 布尔值 */
const e = true; 
/* null */ 
const r=null;
/* undefined */ 
const t = undefined; 

• 对象类型
• 函数类型
• 函数重载
• 数组类型
• TypeScript补充类型（空类型，任意类型，枚举类型，泛型） 泛型

/* 泛型约束: 限制泛型必须符合字符串 */  
type IGetRepeatStringArr = <T extends string>(target: T) => T[];  
const getStrArr: IGetRepeatStringArr = target => new Array(100).fill(target);
/* 报错: 类型“number”的参数不能赋给类型“string"的参数 */
getStrArr(123);  

/* 泛型参数默认类型 */  
type IGetRepeatArr<T = number> = (target: T) => T[];  
const getRepeatArr: IGetRepeatArr = target => new Array(100).fill(target);
/* 报错: 类型“string”的参数不能赋给类型“number”的参数 *
/ getRepeatArr('123');

• 类型别名&类型断言
• 字符串/数字 字面量

高级类型

• 联合/交叉类型

1. 联合类型：IA|IB;联合类型表示一个值可以是几种类型之一。
2. 交叉类型：IA&IB;多种类型叠加到一起成为一种类型，它包含了所需的所有类型的特性。

• 类型保护与类型守卫 类型守卫: 定义一个函数，它的返回值是一个类型谓词，生效范围为子作用域 

// 实现函数reverse  
// 实现函数logBook类型  
1. // 函数接受书本类型，并logger出相关特征
function logBook(book: IBookltem){
// 联合类型 + 类型保护 = 自动类型推断
 if (book.type === 'history') {
  console.log(book.range)
 } else {  
  console.log(book.theme);
 }
}

• 函数返回值类型

工程应用

- web

1. 配置webapack loader相关配置
2. 运行webpack启动/打包
3. 配置tsconfig.js文件
4. loader处理ts文件时，会进行编译与类型检查

- node

1. 安装Node与npm
2. 配置tsconfig.js文件
3. 使用npm安装tso
4. 使用tsc运行编译得到js文件

三、课后总结

TypeScript与JavaScript的相同点是都是弱类型语言，TS由很多基本的语法需要我们在编程时注意。一些高级类型对我们的编程很有帮助。