TypeScript入门 ｜ 青训营笔记

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

一、本堂课重点内容：

TypeScript 的发展与基本语法

• TypeScript 历史及定义解析
• TypeScript 优势解读
• TypeScript 练习工具

TypeScript 高级数据类型

• 联合交叉类型
• 类型保护与类型守卫
• Merge 函数类型实现
• 函数返回值类型
• TypeScript 工程应用

二、详细知识点介绍：

1.TypeScript 的发展与基本语法

（1）TypeScript的发展历史

（2）TypeScript与JavaScript的异同

• JavaScript与TypeScript都是弱类型语言
• 不过JS是动态类型，而TS是静态类型

[静态类型]

• 可读性增强：基于语法解析TSDoc，ide增强
• 可维护性增强：在编译阶段暴露大部分错误=>多人合作的大型项目中，获得更好的稳定性和开发效率 [JS的超集]
• 包含于兼容所有JS特性，支持共存
• 支持渐入式引入与升级

（3）基础数据类型

（4）对象类型

（5）函数类型

（6）函数重载

（7）数组类型

（8）TypeScript补充类型

（9）TypeScript泛型

（10）类型别名&类型断言

（11）字符串/数字 字面量

2.TypeScript 高级数据类型

（1）联合/交叉类型

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

（2）类型保护与类型守卫

（3）高级类型

（4）函数返回值类型

（5）TypeScript工程应用

（1）[Web]

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

[相关loader]

• 1.awesome-typescript-loader
• 2.bable-loader

（2）[Node]

三、实践练习例子：

联合类型：

interface IA {a : 1,a1 : 2}

interface IB {b :1,b1 : 2}

function log(arg: IA | IB) {
  if(arg.a){
    console.log(arg.a1)
  }
  else{
    console.log(arg.b1);
  }
}

自动类型判断：

function logBook(book: IBookItem){
  if(book.type === 'history'){
    console.log(book.range)
  }
  else {
    console.log(book.theme);
  }
}

四、课后个人总结：

在本章课程学习中，TypeScript的数据类型方面比较难理解，其中类型保护与类型守卫容易混淆，在整章学习后，我了解了TypeScript的基础语法和相应的类型。