## 说明

当一个类型Y可以被赋值给另一个类型X时，就可以说类型X兼容类型Y。广泛存在与接口、函数和类中
当原类型必须具备目标类型的必要属性时就可以赋值



### Eg
```ts
//类型兼容性 
interface user1 {
	name:string
}

interface user2 {
	name:string
	age:number
	sex:number
}

let a:user1 = {name:"xiao"}
let b:user2 = {name:"ming",age:18,sex:0}

a = b //当原类型必须具备目标类型的必要属性时就可以赋值

b= // error
```
 
## 函数的兼容性
### 两个函数是否兼容，函数做为参数的情况

#### 目标函数兼容原函数需要满足三个条件

##### 1. 参数个数
 > 原函数参数个数小于目标函数参数个数(成员少的兼容成员多的)
```ts
// 简单情况 两个函数参数都是固定参数 
type myFn=(a:number,b:number)=>void
function num(myFn:myFn){
	return myFn
}

// 原函数参数个数小于目标函数参数个数 
let myFn1=(a:number)=>{}
num(myFn1)
let myFn2=(a:number,b:number,c:number)=>{}
//num(myFn2)//error 类型“(a: number, b: number, c: number) => void”的参数不能赋给类型“myFn”的参数。

....... 

//复杂情况 
//1. 参数个数
//函数可选参数和剩余参数 
let a = (x:number,y:number)=>{} //含有固定参数
let b = (x?:number,y?:number)=>{} // 含有可选参数
let c = (x:number,...y:number[])=>{} //含有剩余参数
//固定参数可以兼容可选参数和剩余参数
a = b 
a = c
//可选参数不兼容固定参数和剩余参数 启用tsconfig.json中strictFunctionTypes:false，则不会报错可以兼容 
b = a
b = c
//剩余参数可以兼容固定参数和可选参数 
c = a
c = b

```



##### 2. 参数类型
> 若两个函数的参数类型都是对象，参数多的兼容参数少的
两个函数相互赋值的情况称之为双向协变

```ts
interface point3D {
 x: number;
 y: number;
 z: number;
}

interface point2D {
 x: number;
 y: number;
}

let p3d = (point: point3D) => {};
let p2d = (point: point2D) => {};

p3d = p2d;

// p2d = p3d;//error
```


##### 3. 返回值类型
> 目标函数的返回值类型与原函数的返回值类型相同或为其子类型,成员少的兼容成员多的

```ts
let a = () => ({ x: 1, y: 2 });
let b = () => ({ x: 1, y: 2, z: 3 });
a = b
b = a//error

......

function myfn(x: number, y: number): number;
function myfn(x: number, y: number): string;
// function myfn(x: any, y: any): any {}
// function myfn(x: any, y: any,z:any): any {} //error 重载列表的目标函数参数小于原函数的参数报错，应该大于原函数参数才兼容 
function myfn(x: any, y: any,){} //返回值类型必须与重载列表中目标函数的类型相同或为其子类型 

### 枚举类型兼容性

//枚举类型 
enum info1 {name}
enum info2 {age,sex}
enum info3 {active="move"}
let man:info1.name = 3 
let human:number = info2.age
let manActive:string = info3.active
// let people:info1.name = info2.age //error
```


## 类的兼容性

#### 两个类的属性相同且都是公共属性，相互兼容

```ts
class aBox {
	constructor() {
	}

	name: string = "123"
	age: number = 18
}

class bBox {
	constructor() {
	}

	name: string = "123"
	age: number = 18
}

let a = new aBox()
let b = new bBox()

a = b
b = a
```

#### 两个类的属性不同都是公共属性，属性少的兼容属性多的

```ts

class aBox {
	constructor() {
	}

	name: string = "123"
	age: number = 18
}

class bBox {
	constructor() {
	}

	name: string = "123"
}

let a = new aBox()
let b = new bBox()

a = b//error
b = a
```


#### 两个类属性不管是否相同，只要一个具有私有属性则无法相互兼容

```ts
class aBox {
	constructor() {
	}

	private name: string = "123"
}

class bBox {
	constructor() {
	}

	name: string = "123"
}

let a = new aBox()
let b = new bBox()

a = b
b = a

```

#### 父类和子类可以相互兼容

```ts
class aBox {
	constructor() {
	}

	private name: string = "123"
}

class bBox extends aBox{}

let a = new aBox()
let b = new bBox()

a = b
b = a
```



## 泛型的兼容性

### 两个泛型的兼容性

当泛型T被使用时无法兼容

```ts
interface name<T>{
	value:T
}

let obj1:name<number>={value:18}
let obj2:name<string>={value:"小明"}

obj1 = obj2//error
obj2 = obj1//error
```

### 两个泛型函数的兼容性

可以相互兼容

```ts
let getname=<T>(x:T):T =>{return x}
let getage=(x:U):U =>{return x}

getage = getname
```

## Tips

### 记忆规则

当一个类型Y可以赋值给类型X时，则称之为类型X可以兼容类型Y
结构之间兼容：成员少的可以兼容成员多的
函数之间兼容：参数多的可以兼容参数少的

TS-类型兼容

# 类型推论

## 说明

不需要指定变量(函数的返回值)类型，ts会自动推断出一个类型



## 分类

* 基础类型推断 从右向左的推断\
 比如一个变量定义的时候没有赋值，不管之后有没有赋值，都会被推断成 any 类型而完全不被类型检查

* 最佳通用类型推断 从右向左的推断\
 需要从几个表达式中推断类型时候，会使用这些表达式的类型来推断出一个最合适的通用类型\
 ![最佳类型推断和最佳通用类型推断](https://dev.dwxzbz.com/blogphoto/TypeScriptLearn/typeInference/%E7%B1%BB%E5%9E%8B%E6%8E%A8%E8%AE%BA-%E6%9C%80%E4%BD%B3%E7%B1%BB%E5%9E%8B%E5%92%8C%E6%9C%80%E4%BD%B3%E9%80%9A%E7%94%A8%E7%B1%BB%E5%9E%8B%E6%8E%A8%E6%96%AD.jpg)

* 上下文类型推断 从左向右的推断\
 通常发生在事件处理中

```ts

//根据左侧的时间属性推断右侧event的类型 
window.onkeydown = function(event) {
	console.log(event.clientX) //error
}
```
# 类型断言

### 说明
开发人员通过类型断言的方式告诉编译器元素类型

### 类型断言的两种形式
#### 1. 使用一对尖括号进行类型断言

```ts
// 类型断言
let str1:any="this is a string"
let str1num:number=(<string>str1).length
console.log(str1num)
```

尖括号写法会与JSX冲突，react中只有as语法断言是被允许的

#### 2. 使用as进行类型断言
```ts
//定义一个接口作为类型 其中包含name属性
interface userInfoInterface {
	name:string
}
//类型断言 
//let userInfo = {} as userInfoInterface
//userInfo.name = "xiao"

/* 
 不推荐上述写法，在上述写法中若userInfo.name未赋值，TS也不会报错 
*/

let userInfo:userInfoInterface = {
	name:"小明"
}
```
### 注意点

没有任何根据的类型断言会造成安全隐患 

# 非空断言

### 说明

在上下文中当类型检查器无法断定类型时，一个新的后缀表达式操作符!可以用于断言操作对象是非null和非undefined类型

![非空断言](https://dev.dwxzbz.com/blogphoto/TypeScriptLearn/TypeInferenceAndTypeAssertion/%E9%9D%9E%E7%A9%BA%E6%96%AD%E8%A8%80.jpg)

### 注意

编译后可能还会出现undefined类型

# 确定赋值断言

## 说明

在实例属性和变量声明后面放置一个 ! 号，从而告诉TS该属性会被明确地赋值

## Eg

![确定赋值断言](https://dev.dwxzbz.com/blogphoto/TypeScriptLearn/TypeInferenceAndTypeAssertion/%E7%A1%AE%E5%AE%9A%E8%B5%8B%E5%80%BC%E6%96%AD%E8%A8%80.jpg)

# 类型拓宽

## 说明

所有通过let或var定义的变量、函数的形参、对象的非只读属性，如果满足指定了初始值且未显式添加类型注解的条件，那么它们推断出来的类型就是指定的初始值字面量类型拓宽后的类型

## Eg
```ts

let str = 'this is string'; // 类型是 string
let strFun = (str = 'this is string') => str; // 类型是 (str?: string) => string;
const specifiedStr = 'this is string'; // 类型是 'this is string'
let str2 = specifiedStr; // 类型是 'string'
let strFun2 = (str = specifiedStr) => str; // 类型是 (str?: string) => string;
```

![类型拓宽](https://dev.dwxzbz.com/blogphoto/TypeScriptLearn/TypeInferenceAndTypeAssertion/%E7%B1%BB%E5%9E%8B%E6%8B%93%E5%AE%BD-1.jpg)

通过let、var 定义的变量如果满足未显式声明类型注解且被赋予了null或undefined值，则推断出这些变量的类型是any

# 类型缩小

## 说明

在TS中，可以通过某些操作将变量的类型由一个较为宽泛的集合缩小到相对较小、较明确的集合

TS-类型检查机制_类型推论

## 泛型基础相关
### 泛型的概念

泛型指在定义函数、接口或者类时，未指定其参数类型，只有在运行时传入才能确定;\
此时参数类型作为变量采用字母T表示，也可以采用其它字母表示



### 语法
在函数名、接口名或类名后添加`<T>`;

## 泛型函数

#### 说明

使用泛型后，参数类型和返回值类型都可以使用T表示
泛型函数的返回值类型是根据需求决定，可以指定返回值类型
多个参数泛型函数语法为通过逗号分隔 `<T, U, K>`

#### 单个参数泛型函数

```ts
function myTest<T>(x: T): T {
 return x
}
let a = myTest(14)
let b = myTest("str")
console.log(a, typeof a) // 14 number
console.log(b, typeof b) // str string

//也可根据需求指定返回值类型 
function myTest<T>(x: T): string {
 return String(x)
}
let a = myTest(14)
console.log(a, typeof a) // 14 string
```

#### 多个参数泛型函数

```ts
function myTest<T, U>(x: T, y: U): T & U {
 return x as T & U
}
let a = myTest("14", 2)
console.log(a, typeof a)
```

#### 泛型参数默认类型

泛型函数参数可以定义默认类型，通过`<T = defaultType>`

```ts
function myTest<T = string>(x: T): T {
 return x
}
let a = myTest(14)
let b = myTest("str")
console.log(a, typeof a)//14 number
console.log(b, typeof b)//str string
```

## 泛型接口

### 泛型函数的类型

#### 常规的写法

```ts
function test<T>(x: T): T {
 return x
}

let myTest: <T>(x: T) => T = test
```

#### 调用签名的对象字面量

通过带有调用签名的对象字面量的方式来定义泛型函数

```ts
function test<T>(x: T): T {
 return x
}

let myTest:{<T>(x:T):T}= test
```

#### 演化为接口方式

```ts
interface testInt {
 <T>(x: T): T

}

function test<T>(x: T): T {
 return x
}

let myTest: testInt = test
```

#### 在此基础上将泛型参数\<T>提前到接口上

```ts
interface testInt<T> {
 (x: T): T

}

function test<T>(x: T): T {
 return x
}

let myTest: testInt = test
```

#### 注意点

在使用泛型接口时，需要传入一个类型参数来指定泛型类型，锁定之后代码里使用的类型 

```ts
interface testInt<T> {
 (x: T): T

}

function test<T>(x: T): T {
 return x
}

let myTest: testInt<string> = test
```

## 泛型类

### 说明

泛型类使用`<>`括起泛型类型，跟在类名后面
静态属性不能使用泛型类

![泛型类](https://dev.dwxzbz.com/blogphoto/TypeScriptLearn/Class/%E6%B3%9B%E5%9E%8B%E7%B1%BB.jpg)

### Eg

```ts
class myTest<T> {
 add!: (x: T, y: T) => T
}

let a = new myTest<number>()

a.add = (x, y) => {return x + y}

let b = a.add(1, 2)
console.log(b) // 3
```

## 泛型约束

### 说明

定义一个接口描述约束条件，使用这个接口和extends关键字实现约束

### Eg

```ts
//泛型约束 
// 定义一个接口描述约束条件 
interface usersName {
 name: string
}


function myTest<T extends usersName>(names:T):T {
 console.log(names.name) // li
 return names
}

let a = myTest({name:"li"}) 
console.log(a,typeof a) // { name: 'li' } object
```

`<T extends usersName>`约束了T类型必须是userName的子类型

### 在泛型约束中使用类型参数

keyof T: 用于获取T对象的所有键名

```ts
// 在泛型约束中使用类型参数 
function myTest<T, K extends keyof T>(x: T, y: K) {
 return x[y]
}

let a = { a: 1, b: 2, c: "3" }

let result = myTest(a, "c")
console.log(result) 
```

## 泛型的优点

1. 函数和类可以轻松的支持多种类型，增强程序的扩展性
2. 不必写多条函数重载，冗长的联合类型声明，增强代码可读性
3. 灵活控制类型之间的约束

TS-泛型

## 接口和类的关系的示意图



![接口和类的关系示意图](https://dev.dwxzbz.com/blogphoto/TypeScriptLearn/Class/%E7%B1%BB%E4%B8%8E%E6%8E%A5%E5%8F%A3%E7%9A%84%E5%85%B3%E7%B3%BB%E7%A4%BA%E6%84%8F%E5%9B%BE.jpg)

## 共同点

* 接口可以互相继承
* 类可以互相继承

## 注意点

![类与接口的关系](https://dev.dwxzbz.com/blogphoto/TypeScriptLearn/Class/%E7%B1%BB%E4%B8%8E%E6%8E%A5%E5%8F%A3%E7%9A%84%E5%85%B3%E7%B3%BB.jpg)

TS-接口和类的关系

## 类的基本实现与继承
### 类的概念与语法
#### 类的概念

类描述了所创建的对象共同的属性和方法



#### 类的语法

通过class声明一个类，主要包含属性、构造函数、方法三个模块\
Eg

```ts
class Calculate {
 // 类的属性
 public x: number
 public y: number

 // 构造函数
 constructor(x: number, y: number) {
 this.x = x
 this.y = y
 }

 // 类的方法
 add () {
 return this.x + this.y
 }
}
```

constructor()方法是类的默认方法，通过new来生成对象实例时，自动调用该方法。换句话说，constructor()方法默认返回实例对象this

#### 注意点

* 类的内部所有定义的方法，都是不可枚举的
* constructor方法是类的默认方法，通过new命令生成对象实例时，自动调用该方法。一个类必须有constructor方法，如果没有显式定义，一个空的constructor方法会被默认添加
* constructor方法默认返回实例对象（即this），完全可以指定返回另外一个对象
* 类不存在变量提升（hoist）

#### 类的属性和方法

1. name属性

本质上，ES6的类只是ES5的构造函数的一层包装，所以函数的许多特性都被Class继承，包括name属性

 class Point{}
 Point.name // "Point"

name属性返回紧跟在class关键字后面的类名

## 类的属性修饰符(访问修饰符)

### 包含

* 类属性
 * static 静态属性
* 实例属性
 * public 公开属性
 * private 私有属性
 * protected 保护属性
 * readonly 只读属性

### static

#### 说明

表示这个方法是静态的，此属性存在于类本身上面而不是类的实例上，访问时需要通过类.属性名访问

#### Eg

 class Presson {
 static name:string = "一二三"
 }
 // 访问类的静态属性 
 console.log(Presson.name)

### public

#### 说明

表示这个方法是公开的，指定类的成员可以在声明它的类的外部访问和修改

#### 注意

在TypeScript里，成员都默认为public;

#### Eg
```ts
 class Calculate {
 // 类的属性
 public x: number
 public y: number

 // 构造函数
 public constructor(x: number, y: number) {
 this.x = x
 this.y = y
 }

 public add() {
 return this.x + this.y
 }
 }

 let a = new Calculate(1,2)

 console.log(a) // 1
```

### private

#### 说明

表示这个方法是私有的，使用private标记成员后，该成员就不能在类的外部访问，只能在类的内部访问，也不能在子类访问

#### Eg

![accessModifier-private](https://dev.dwxzbz.com/blogphoto/TypeScriptLearn/Class/accessModifier-private.jpg)

### protected

#### 说明

表示这个方法是受保护的，使用protected标记成员后，该成员只能在被类的内部和类的子类访问

#### Eg

```ts
//类的属性 public 
class Calculate {
 // 类的属性
 public x: number
 protected y: number

 // 构造函数
 public constructor(x: number, y: number) {
 this.x = x
 this.y = y
 }

 public add() {
 return this.x + this.y
 }
}

// operation继承Calculate
class operation extends Calculate {
 private z: number
 constructor(x: number, y: number, z: number) {
 super(x, y)
 this.z = z
 }
 sum(){
 return this.x+this.y+this.z
 }
}

let a = new Calculate(1, 2)
let b = new operation(1,2,3)

console.log(a.x)

console.log(a.y) // 属性“y”受保护，只能在类“Calculate”及其子类中访问。
```

### readonly

#### 说明

表示这个方法是只读，可以使用readonly修饰符将类的属性设置为只读，只读属性必须在声明时或构造函数里被初始化

#### Eg

```ts
class Calculate {
 // 类的属性
 public x: number
 readonly y: number

 // 构造函数
 public constructor(x: number, y: number) {
 this.x = x
 this.y = y
 }

 public add() {
 return this.x + this.y
 }
}

let a = new Calculate(1,2)
console.log(a.y)
a.y = 10
```

## 类的方法修饰符

### 说明

方法修饰符只有public、protected、private三种修饰符，readonly修饰符只能用在属性声明或索引签名中

### public

如果使用public来修饰方法或属性, 那么表示这个方法或属性是公开的\
可以在类的内部使用, 也可以在子类中使用, 也可以在外部使用

### protected

如果使用protected来修饰方法或属性, 那么表示这个方法或属性是受保护的\
可以在类的内部使用, 也可以在子类中使用

### private

如果使用private来修饰方法或属性, 那么表示这个方法或属性是私有的\
只能在类的内部使用

## 类的可选属性与参数属性

### 类的可选属性

#### 说明

类似于接口中的可选属性，可传可不传

#### Eg

```ts
//类的可选属性 
class Person {
 // 注意点: 在TS中如果定义了实例属性, 那么就必须在构造函数中使用, 否则就会报错
 name: string;
 age?: number; // 可选属性
 constructor(name: string, age?: number) {
 this.name = name;
 this.age = age;
 }
}
let p = new Person('lnj') 
console.log(p) 
```

### 类的参数属性

#### 说明

类的构造函数中的属性,用于实例属性的接收和定义

#### Eg
```ts
 //类的参数属性 
 class Person {
 constructor(public name: string, public age?: number) {
 this.name = name;
 this.age = age;
 }
 }
 let p = new Person('lnj') 
 console.log(p) 
```

## 类的继承

### 说明

#### implements

实现，一个新的类，从父类或者接口实现所有的属性和方法，同时可以重写属性和方法，包含一些新的功能

#### extends

继承，一个新的接口或者类，从父类或者接口继承所有的属性和方法，不可以重写属性，但可以重写方法

### Eg

 interface IPerson {
 age: number;
 name: string;
 }

 interface IPeoPle extends IPerson {
 sex: string;
 }

 class User implements IPerson {
 age: number;
 name: string;
 }

 interface IRoles extends User{

 }

 // 使类Roles从User继承
 class Roles extends User{
 
 }

### 注意点

1. 接口不能实现接口或者类，所以实现只能用于类身上,即类可以实现接口或类
2. 接口可以继承接口或类
3. 类不可以继承接口，类只能继承类
4. 可多继承或者多实现
5. 派生类(子类)中同样含有构造函数时需要手动调用super方法，在类的方法中super表示当前类的父类

```ts
 ( function () {
 //类的属性 public
 class Calculate {
 // 类的属性
 public x: number
 protected y: number

 // 构造函数
 constructor(x: number, y: number) {
 this.x = x
 this.y = y
 }

 add() {
 return this.x + this.y
 }
 }

 // operation继承Calculate
 class operation extends Calculate {
 z: number

 constructor(x: number, y: number, z: number) {
 super(10, 2)//子类的构造函数中必须手动调用super
 this.z = z
 }

 add() {
 return this.x + this.y + this.y
 }
 }

 let b = new operation(1, 2, 3)

 console.log(b)

 })()
```

## 抽象类与多态
### 抽象类
#### 说明

抽象类专门用于定义外界无法直接创建的类\
抽象类一般用于定义基类\
抽象类和接口一样用于约束子类

#### 注意点

抽象类中的抽象方法不包含具体实现并且必须在派生类中实现，也就是无法通过new创建抽象类的实例对象

#### 语法

使用abstract关键字定义抽象类和在抽象类内部定义抽象方法

#### Eg

![抽象类](https://dev.dwxzbz.com/blogphoto/TypeScriptLearn/Class/%E6%8A%BD%E8%B1%A1%E7%B1%BB.jpg)

### 多态

#### 说明

父类定义一个方法不去实现，让继承他的子类去实现，每一个子类有不同的表现（相当于重写父类方法）
多态属于继承

#### Eg

```ts
class Futher {
 public age: number;
 constructor(age: number) {
 this.age = age
 }
 counts(): void {
 console.log(this.age)
 }
}
class children1 extends Futher {
 constructor(age: number) {
 super(age)
 }
 counts(): void { /* 多态，重写方法不执行父类方法 */
 console.log(this.age - 1)
 }
}
class children2 extends Futher {
 constructor(age: number) {
 super(age)
 }
 counts(): void {
 console.log(this.age + 1)
 }
}
let young = new children1(18)
let old = new children2(70)
let ageList:Futher[] = [young,old]
ageList.forEach(i=>{
 i.counts() //此时会自动判断是哪种实例从而执行对应方法 
})
```

## 存储器

### 说明

通过get/set来截取对对象成员的访问，有效的控制对对象成员的访问，使得程序更健壮\
当属性容易被修改错误时，对计算要求较高时使用

### Eg
```ts
 let passcode = "secret passcode";

 class Employee {
 name: string;
 age: number;
 
 get name(alue:string) {
 return this.Name;
 }
 
 set name(alue:string) {
 this.name=value
 }
 
 get age(value:number) {
 return this.age;
 }
 
 set age(value:number) {
 this.age=value
 }
 
 }

 let employee = new Employee();
 employee.name = "Bob Smith";//调用set,设置
```

### 注意点
* 对于private私有属性修饰符可以通过在类的内部添加方法使得私有属性可以被外部访问

## Tips

### 说明

一些小点汇总

### Eg

#### 简化写法

在类的构造函数参数中添加属性修饰符，即可简化

 ( function () {
 //类的属性 public 
 /*
 class Calculate {
 // 类的属性
 public x: number
 protected y: number

 // 构造函数
 constructor(x: number, y: number) {
 this.x = x
 this.y = y
 }

 add() {
 return this.x + this.y
 }
 }
 */
 
 //简化写法
 class Calculate {
 constructor(public x: number, public y: number) {
 }
 }
 })()