这是我参与「第四届青训营」笔记创作活动的的第5天

一、课堂重点内容

TypeScript
基本语法
高级类型

二、详细知识点介绍

js与ts的区别

动态类型：执行阶段才去编译

静态类型：提前编译

弱类型语言：类型转换。字符形式的1可以和数字形式的1进行相加操作。

js为动态类型，是弱类型语言

ts为静态类型，是弱类型语言

为什么是ts

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

ts的一些语法要求

声明变量时需要声明变量类型
any：ts中的特有类型
- 允许赋值为任意类型
- 可以访问任意属性和方法
- 变量如果在声明的时候，未指定其类型，那么它会被识别为任意值类型

泛型

不预先指定具体的类型，在使用的时候在指定类型的一种特性

type IgetRepeatArrR=<T>(target:T)=>T[];

定义了一个T的变量，但不知道具体是什么。在函数的执行过程中确定。返回了一个T的数组

联合/交叉类型

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

类型保护与类型守卫

在js中可以执行的一些代码在ts中可能因为类型问题报错类型保护是通过构造函数来细化类型的一种方式

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

（如果包含a，则一定是IA）

三、实践联系例子

js与ts的基础数据类型区别

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

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

声明变量时，ts中需要使用冒号声明类型。

在使用函数时，也可以遵循该规则，比如：

function add(x:number,y:number):number{
return x+y;
}

联合/交叉类型实例

一个书籍列表

const bookList=[{
author:'xiaoming',
type:'history',
range:'2001-2021',
},{
author:'xiaoli',
type:'story',
theme:'love',
}]

通过联合/交叉类型进行类型定义

type IBookList=Array<{author:string;}&
({"type:'history';range:string;}|{type:'story';theme:string;})>

四、课后个人总结

关于类型保护和类型守卫

这一部分是我感觉最难的，因为没有用过ts，就只能凭理论来体会一下这个问题

知道了问题基本是由于为了安全性，在使用联合类型时，只会访问交叉部分，而如果联合类型中的成员之间没有任何交集，就需要使用类型守卫来确定类型，从而防止报错。

五、引用参考

TS 类型中的 any、void 和 never - 掘金 (juejin.cn) 高级类型 · TypeScript中文网 · TypeScript——JavaScript的超集 (tslang.cn)

TypeScript入门|青训营笔记