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

TypeScript发展历史

• 2012-10：微软发布了 TypeScript 第一个版本 (0.8)

• 2014-10：Angular 发布了基于 TypeScript 的 2.0版本

• 2015-04：微软发布了 Visual Studio Code

• 2016-05：@types/react 发布，TypeScript 可开发 React

• 2020-09：Vue 发布了3.0 版本，官方支持 TypeScript

• 2021-11：v4.5版本发布

什么是TypeScript？

静态类型

可读性增强：基于语法解析TSDoC,ide增强

可维护性增强：在编译阶段暴露大部分错误

多人合作的大型项目中，荻得更好的稳定性和开发效率

JS 的超集

包含于兼容所有Js特性，支持共存

支持渐进式引入与升级

基本语法

基础数据类型

字符串： const q: string ="string';

数字： const w: number = 1;

布尔值： const e: boolean = true;

null： const r: null = null;

undefined： const t: undefined = undefined;

函数类型

function add(x, y){
return x + y;
const mult = (x, y)=> × * y;

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

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

数组类型

「类型 ＋方括号」表示：type IArr1 = numberl];

泛型表示：type IArr2= Array<string | number | Record<string, number>>;

元祖表示：type IArr3 = [number, number, string, string];

Typescript补充类型

空类型，表示无赋值：type IEmptFunction = () => void;

任意类型：是所有类型的子类型：type = any;

高级类型

联合/交叉类型

联合类型：IA | IB；联合类型表示一个值可以是几种类型之一

交叉类型：IA & IB；多种类型叠加到一起成为一种类型，它包含了所需的所有类型的特性

类型保护与类型守卫

实现函数logBook类型

函数接受书本类型，并logger出相关特征

联合类型＋ 类型保护=自动类型推断

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

高级类型

关键字 【in】，其相当于取值 字符串字面量 中的一种可能，配合泛型P，即表示每个key

关键字【?】，通过设定对象可选选项，即可自动推导出子集类型

interface IMerge {
<T extends Record<string, any>> (source0bj: Partial<T>, targetObj: T): T;
}
type Partial<T extends Record<string, any>> = {
[P in keyof T]?: T[P];
}

关键字【keyof】，其相当于取值对象中的所有key组成的宇符串字面量，如

tpe IKeys = keyof i a: string; b: number }; // => type IKeys="a" | "b"  

函数返回值类型

实现函数delavCal的类型声明

delayCall接受一个函数作为入参，其实现延迟1s运行函数其返回promise，结果为入参函数的返回结果

function delayCall(func){
 return new Promise(resolve => {
  setTimeout)=>{
   const result = func() ;
    resolve(result);
   }，1000);
  });
}

关键字 【extends】跟随泛型出现时，表示类型推断，其表达可类比三元表达式 如T===判断类型？类型A：类型B

关键字【infer】 出现在类型推荐中，表示定义类型变量，可以用于指代类型 如该场景下，将西数的返回值类型作为变量，使用新泛型R表示，使用在类型推荐命中的结果中

type IDelayCall = <T extends ()=> any> (func: T)=> ReturnType<T>;

type IReturnType<T extends (...args: any)=> any> = T extends (...args: any)=> infer R ? R: any

使用TSC编译

1.安装Node与npm

2.配置tsconfig.js文件

3.使用npm安装tsc

4.使用tsc运行编译得到js文件