这是我参与「第五届青训营」伴学笔记创作活动的第 4 天。又有新内容咧。

一、本堂课重点内容：

TypeScript介绍
TypeScript语法

二、详细知识点介绍：

TypeScripy介绍

TypeScript自诞生以来不断在更新，一直保持着高速发展

TypeScript	JavaScript
静态类型	动态类型
弱类型语言	弱类型语言

静态类型：先声明变量类型，编译时即显示错误
动态类型：不用先声明，有些错误运行才会出现
弱类型语言：类型可自动转变

TypeScript:

可读性增强、可维护性增强
是JavaScript的超集：兼容JavaScript特性，可共存

基本语法：

 const 变量名 : 数据类型 = 值

对象类型：

只读属性：不可在初始化外赋值
必选属性：即必要参数，没有则报错
可选属性：语法：属性名？：数据类型 该属性可不存在
任意属性
```
 [key: string]: any
```
```
 对象名.任意属性名 = 值
```
在声明了任意属性后，可自定义添加对象属性

函数类型：

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

也可用interface

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

函数重载：

根据不同的传入参数有不同实现

数组实现：

类型+方括号表示：

 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,5,6];
 const arr2: IArr2 = [1,2,'3','4',{a: 1}];
 const arr3: IArr3 = [1,2,'3','4'];
 const arr4: IArr4 = ['string',() => null,{},[]];

补充类型：

 type IEmptyFunction = () => void ;
 type IAnyType = any;
 enum EnumExample {
   add = '+',
   mult = '*',
 }
 type INumArr = Array<number>;

空类型，表示无赋值
任意类型，是所有类型的子类型
枚举类型：可看作是一个双向映射集，如EnumExample['add'] === '+',EnumExample['+'] === 'add'。
最后一种是泛型：不预先指定类型，在使用时再指定类型，类似于一个函数/对象模板的特性。

 type IGetRepeatStringArr = <T extends string>(target: T) => T[];
 
 type IGetRepeatArr<T = number> = (target: T) = T[];

第一种是泛型约束，约束参数类型
第二种是指定参数默认类型。
类型别名：

将一些复杂类型的类型集合重新命名，相当于是创建一个新对象类型

类型断言：

用关键字 as 将一个类型"断言"成另一种类型，以此"欺骗"编译器，合理使用可提高代码可维护性。

字面量：

允许指定字符串or数字的固定值，就是该值必须为指定值其中之一。

interface Human{
  sex:'man'|'woman'|'other';
}

高级类型：

联合/交叉类型：

以书籍列表类型为例：

 interface IHistoryBook {
   author: string;
   type: string;
   range: string;
 }
 interface IStoryBook {
   author: string;
   type: string;
   theme: string;
 }
 type IBookList = Array<IHistoryBook | IStoryBook>;

可见其类型声明比较繁琐，而且因为都是书籍，其属性值有很多重复类似的地方。

改进版：

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

联合类型：A | B，表示几种类型之一

交叉类型：A & B ,多类型叠加到一起成为一种类型

类型保护：

TypeScript中，在访问联合类型时会有保护机制，仅能访问联合类型中的交集

类型守卫：

定义一个函数，返回值是类型谓词，生效范围是子作用域。用于解决类型保护所产生的一些编译问题。但要注意严谨性，否则运行时还是会出错。

联合类型+类型保护=自动类型推断:

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

还有函数类型、函数返回值类型，这些我还要慢慢消化.

工程应用简介

简单介绍了一下typescript后续开发应用

node.js

使用TSC编译

安装node和npm

配置tsconfig.js

使用npm安装tsc

使用tsc编译得到js文件

浏览器web

配置webapack loader

配置tsconfig.js文件

运行webpack启动/打包

loader处理ts文件时，会进行编译与类型检查

三、实践练习例子：

本节课主要是讲语法，所以挑一个课堂实例来逐步分析

类型保护与类型守卫：

 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)l
   }
 }

这段由于类型保护的原因会报错：arg.a 因为联合类型没有交集a，IB不存在属性a，直接取值是无法访问的。

改进版：

 interface IA { a:1,a1:2}
 interface IB { b:1,b1:2}
 function getIsIA(arg: IA | IB): arg is IA{
   return !!(arg as IA).a;
 }
 function log(arg: IA | IB){
   if (getIsIA(arg)){
     console.log(arg.a1);
   } else {
     console.log(arg.b1);
   }
 }

getIsIA函数中对arg做了一些处理：

将arg断言为IA类，然后取其a属性，然后用!!将其值转化为布尔值，能取到a值则为true，即arg为IA类，反之无a值为false，arg为IB类。从而解决了之前的类型保护问题。

四、课后个人总结：

今天的内容中，高级类型部分比较复杂，需要慢慢理解，而且其中有许多语法及知识点都是互相联系的，所以我们需要将基础打好，才能更好地理解这块内容。在今天的课程中我了解了TypeScript发展，也了解了一些它的基本语法，还通过逐步分析老师课上的部分实例，进一步理解了typescript，希望后续我能将知识运用到实践中。

如有错误请指出，感谢。

[TypeScript入门 | 青训营笔记]