TS学习笔记（完结）

前几天记录了学习笔记一、二、三，今天写完最后一篇：

接口 interface

接口的声明

在前面我们通过type可以用来声明一个对象类型：

对象的另外一种声明方式就是通过接口来声明：

可选属性 ?:

接口中我们也可以定义可选属性：

只读属性

接口中也可以定义只读属性：
这样就意味着我们再初始化之后，这个值是不可以被修改的；

索引类型 [index:number]

前面我们使用interface来定义对象类型，这个时候其中的属性名、类型、方法都是确定的，但是有时候我们会遇
到类似下面的对象：

函数类型

前面我们都是通过interface来定义对象中普通的属性和方法的，实际上它也可以用来定义函数类型：

除非特别的情况，还是推荐使用类型别名来定义函数

接口继承 支持多继承

接口和类一样是可以进行继承的，也是使用extends关键字：
注：类可以实现多个接口：implements，在类里面实现接口对应的方法才不报错

class Fish extends Animal implements ISwim,IEat{
	swimning(){
	console.log("Fish Swmming")
	}
	eating(){
	console.log("Fish Eating")
	}
}

并且接口是支持多继承的（类不支持多继承）

interface和type的区别

interface和type都可以用来定义对象类型，那么在开发中定义对象类型时，到底选择哪一个呢？
如果是定义非对象类型，通常推荐使用type，比如Direction、Alignment、一些Function；

如果是定义对象类型，那么他们是有区别的：
interface 可以重复的对某个接口来定义属性和方法；
而type定义的是别名，别名是不能重复的

交叉类型 &

前面我们学习了联合类型：
联合类型表示多个类型中一个即可

还有另外一种类型合并，就是交叉类型（Intersection Types）：
交叉类型表示同时需要满足多个类型的条件；
交叉类型使用 & 符号；

交叉类型：
表达的含义是number和string要同时满足；
但是有同时满足是一个number又是一个string的值吗？其实是没有的，所以MyType其实是一个never类型；

应用：
在开发中，我们通常是对对象类型进行交叉的：

字面量赋值

TypeScript在字面量直接赋值的过程中，为了进行类型推导会进行严格的类型限制。
但是之后如果我们是将一个 变量标识符 赋值给其他的变量时，会进行freshness擦除操作（可多不可少）

枚举类型enum

枚举类型是为数不多的TypeScript特性有的特性之一：将一组可能出现的值，一个个列举出来，定义在一个类型中，这个类型就是枚举类型；
枚举允许开发者定义一组命名常量，常量可以是数字、字符串类型；
名称常量：


枚举类型默认是有值的，比如上面的枚举，默认值是0 1 2…
我们也可以给枚举其他值，这个时候会从100进行递增：

泛型 < T > 类型参数化

我们可以通过函数来封装一些API，通过传入不同的函数参数，让函数帮助我们完成不同的操作；
对于参数的类型是否也可以参数化呢？
虽然any是可以的， 但是定义为any的时候，我们其实已经丢失了类型信息：
比如我们传入的是一个number，那么我们希望返回的可不是any类型，而是number类型；
所以，我们需要在函数中可以捕获到参数的类型是number，并且同时使用它来作为返回值的类型；

我们需要在这里使用一种特性的变量 - 类型变量（type variable），它作用于类型，而不是值

这里我们可以使用两种方式来调用它：
方式一：通过 <类型> 的方式将类型传递给函数；
方式二：通过类型推到，自动推到出我们传入变量的类型：
在这里会推导出它们是 字面量类型 的，因为字面量类型对于我们的函数也是适用的

泛型的基本补充

我们也可以传入多个类型：

平时在开发中我们可能会看到一些常用的名称：
T：Type的缩写，类型
K、V：key和value的缩写，键值对
E：Element的缩写，元素
O：Object的缩写，对象

泛型接口

定义接口的时候我们也可以使用泛型：
泛型接口没有推导类型

泛型类

泛型约束 extends

有时我们希望传入的类型有某些共性，但是这些共性可能不是在同一种类型中：
比如string和array都是有length的，或者某些对象也是会有length属性的；
那么只要是拥有length的属性都可以作为我们的参数类型，那么应该如何操作呢？

TS模块化

模块化开发 export

TypeScript支持两种方式来控制我们的作用域：
模块化：每个文件可以是一个独立的模块，支持ES Module，也支持CommonJS；
命名空间：通过namespace来声明一个命名空间
**ES Module **

导入

import {add,sub} from './utils/math';
console.log(add(20,30))
console.log(sub (20,30))

命名空间namespace

将一个模块内部再进行作用域的划分，防止一些命名冲突的问题

导入

import {time,price} from './utils/format';
console.log(time.format("11111111"))
console.log(price.format(123))

类型的声明 declare

之前我们所有的typescript中的类型，几乎都是我们自己编写的，同时也有类似

这样的HTMLImageElement类型
甚至会思考document为什么可以有getElementById的方法呢？这里就涉及到typescript对类型的管理和查找规则了

类型的查找

先介绍另外的一种typescript文件：.d.ts文件
我们之前编写的typescript文件都是 .ts 文件，这些文件最终会输出 .js 文件，也是我们通常编写代码的地方；
还有另外一种文件 .d.ts 文件，它是用来做类型的声明(declare)。 它仅仅用来做类型检测，告知typescript我们有哪些类，不用写实现；

ts会查找如下类型声明：
内置类型声明；
外部定义类型声明；
自己定义类型声明；

内置类型声明

内置类型声明是typescript自带的、帮助我们内置了JavaScript运行时的一些标准化API的声明文件；
包括比如Math、Date等内置类型，也包括DOM API，比如Window、Document等；
内置类型声明通常在我们安装typescript的环境中会带有的

外部定义类型声明和自定义声明

外部类型声明通常是我们使用一些库（比如第三方库）时，需要的一些类型声明。
这些库通常有两种类型声明方式：
方式一：在自己库中进行类型声明（编写.d.ts文件），比如axios（node_modules里有.d.ts文件）
方式二：通过社区的一个公有库DefinitelyTyped存放类型声明文件
该库的GitHub地址：https://github.com/DefinitelyTyped/DefinitelyTyped/
该库查找声明安装方式的地址：https://www.typescriptlang.org/dt/search?search=
比如我们安装react的类型声明： npm i @types/react --save-dev

什么情况下需要自定义声明文件呢？
情况一：我们使用的第三方库是一个纯的JavaScript库，没有对应的声明文件，比如lodash，自己编写.d.ts

declare module 'lodash'{

}

情况二：我们给自己的代码中声明一些类型，方便在其他地方直接进行使用；

声明变量、函数、类

.html里的script标签内

let wName ="wname"
let wAge = 18
let wHeight = 1.88
function wFoo(){
	console.log("wFoo")
}
function wBar(){
	console.log("wBar")
}
function Person(name,age){
	this.name = name
	this.age = age
}

main.ts内(最后其实是转化成js插入到html的script标签下)

console.log(whyName)
console.log(whyAge)
console.log(whyHeight)
whyFoo()
const p = new Person("why",18)
console.log(p)

.d.ts文件内

声明模块

我们也可以声明模块，比如lodash模块默认不能使用的情况，可以自己来声明这个模块

声明文件

在某些情况下，我们也可以声明文件：
比如在开发vue的过程中，默认是不识别我们的.vue文件的，那么我们就需要对其进行文件的声明；
比如在开发中我们使用了 jpg 这类图片文件，默认typescript也是不支持的，也需要对其进行声明；

声明命名空间

比如我们在index.html中直接引入了jQuery，但是不能直接在ts文件里用$.ajax…使用jq
我们可以把整个 $ 声明成一个命名空间，再导出function

在main.ts中就可以使用

tsconfig.json文件

tsconfig.json是用于配置TypeScript编译时的配置选项 链接

完结撒花！