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

TypeScript介绍

TypeScript发展历史

2012-10：微软发布第一个版本0.8
2014-10：Angular发布基于TypeScript的2.0版本
2015-04：微软发布Visual Studio Code
2016-05:@type/react发布，TypeScript可开发react
2020-09:vue发布3.0版本，官方支持TypeScript
2021-11:v4.5版本发布

（感觉了解一个技术的发展历史，可以看到前端行业技术是在不断的更新发展，之前一直学习的vue3没想到2020才发布）

什么是TypeScript？

TypeScript与JavaScript的区别

JS是动态类型，弱类型语言，脚本语言
TS是静态类型，弱类型语言

动态类型：在执行阶段确定类型的匹配
静态类型：提前确定类型匹配（编译发生在执行前？）弱类型：特征是类型转换

推荐使用编译器Visual Studio Code

TypeScript基本语法

基础数据类型

字符串const q='string' ;
数字 const w= 1;
布尔值const e= true;
nullconst r= null;
undefineconst w=undefine ;

对象类型

//定义对象，该对象类型是IBytedancer,一般使用I开头表示某种类型
const bytedancer：IBytedancer={
 jobId:22222,
 name:'CHen',
 sex: 'man',
 age:21,
 hobby:'Swimming',
 }
 
 //定义类型
 interface IBytedancer{
 /*只读属性*/
 readonly jobId:number;
 sex:'man'|'woman'|'other';
 age:number;
 /*可选属性：定义该属性可存在/可不存在*/
 hobby?:String;
 /*任意属性：约束所有对象属性必须包括该属性的子类型*/
 [key:String]:any;
 }
 
 /*报错：无法分配到‘jobId’，因为该属性为只读属性*/
 bytedancer.jobId=111;
 
 /*成功：任意属性标注下可添加任意属性*/
 bytedancer.plate='data';

注：
只读属性：表示只可获取，不可赋值；
若对象创建中缺少类型中除可选属性外属性会报错；

函数类型

function add(x,y){
  return x+y;
}
cons mult=(x,y)=>x*y;

function add(x:number,y:number):number{
  return x+y;
}
//为什么返回x+y，后面是x*y
const mult:(x:number,y:number)=>number=(x,y)=>x*y;

interface Imult{
 (x:number,y:number):number;
 }
 const mult:Imult=(x,y)=>x*y;

函数重载

对getData函数进行重载时，timestamp为可缺省参数

数组类型

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];
const aar2:IArr2=[1,2,'3',{a:1}];
const aar3:IArr3=[1,2,'3','4'];
const aar4:IArr4=['string',()=>null,{},[]];

注：
泛型表示数组中包含是类型，可在数组赋值时出现；
元组表示数组中包含的类型个数与顺序很重要，在对其进行赋值时不可改变；
接口表示数组中，上述为对数组进行类型确定，则表示其可进行任意类型赋值；

高级类型

通过各种基础类型进行高级类型的定义，衍生出非常多的类型

联合/交叉类型

示例：
书籍列表中书籍类型包括历史，故事等，若按类型进行声明会出现作者等重复数据
为解决上述问题提出联合类型和交叉类型:

联合类型：A|B,表示一个值可以是几种类型之一
交叉类型：A&B，表示多种类型叠加在一起成为一种类型，它包含了所需的所有类型 两者就是一个与和或关系

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

类型保护和类型守卫

类型保护：在对声明中获取到的数据类型先进行判断，原因是在访问联合型时，仅能访问到联合型中交叉的部分
类型守卫：定义一个函数，返回值为一个类型谓词，生效范围为子作用域

Merge 函数类型实现

注：sourceObj必须是targeObj的子集

函数返回值类型

关键字extens跟随泛型出现，表示类型推断。其表达式可类比三元表达式

TypeScript入门|青训营笔记