（一）TypeScript支持
@
（一）TypeScript
【一】简介：
1.动态类型语言：
在运行期间做数据类型检查的语言，在创建变量时不需要指定数据类型。例如：JavaScript/python等，只有在运行时才能发现错误
2.静态类型语言：
数据类型检查发生在编译阶段，例如C,C++,java
3.Typescript：
可扩展的JavaScript， 静态类型风格的系统， 支持es6-es10，exnext语法， 兼容各种浏览器，服务器，系统等，完全开源
【二】Typescript优点：
1.程序更容易理解（之前函数或者方法参数类型，需要手动调试或者询问开发者，typescript可以解决上述问题）
2.效率更高（代码跳转，代码自动补全，丰富的接口提示）
3.更少的错误（编译期间发现错误，杜绝常见的错误）
4.更好的包容性（完全兼容JavaScript，第三方库可以单独编写类型文件，大多数项目都支持typescript）
【三】数据类型：
undefined和null是所有类型的子类型，类型被赋值为undefined或null不会报错
-1- -基础数据类型：
let isDonw:boolean = false
let age:number = 10
let firstName:string = 'lmz'
let message: string = `Hello,${firstName}` //模板字符串
let u:undefined = undefined
let n:null = nul
let num:number = undefined //不会报错
//任意类型 都可获取属性和方法
let notSure:any = 3
notSure = 'maybe a string'
notSure = true
notSure.myName
notSure.getName()
-2--数组 Array：
1.数组array 中括号前面加类型声明数组类型
数字类型的数组：number[ ] ，any[ ](没有具体类型）
let arrayOfNumber：number[ ]=[1,2,3] 不允许出现其他类型
类数组(IArguments)：有一定数组的属性，没有数组的一些方法，且不能赋值给别的数组
2.元祖tuple：一定程度上限制了数据类型的数组:在中括号里面加上类型和数量，类型不对，数量不对都会报错，但是使用数组的push方法可以改变，但是只能向里面添加已规定的数组的类型
let user: [ string,number]=['Tom',20]
user.push('silly') 只能赋值定义时规定的数据类型
-3--接口 Interface：
书写变量的时候尽量首字母加上大写的I
变量的形状按照接口的形式来约束，所有才会有为什么说这个类型是一个类似于对象推断的检查，可描述很多的相关
const 是用变量上面的 readonly是用在属性上面的
interface Person{
readonly id:number //只读属性 不可赋值
name: string,
age?: number
}
let user: Person{
name:'user',
age:8
}
-4--函数 Function：
约定输入 约定输出 包括函数本身都是有类型的
?参数可作为可选参数，并且可声明类型， 方法后面可声明函数的返回值 记住—— ：后面都是声明返回值
function add(x:number,y:number,?z:number):number {
if(type z === number){
return x + z + y
}else{
return x + y
}
}
add(1,2);
这是在声明一个函数add2 参数的类型 箭头不是函数体 而是规定返回值的参数
let add2 : (x:number,y:number,?z:number) => number
上面说了包括函数本身都是有类型的 所以在TS中 函数的类型一直才可以赋值函数
add2 = add
Interface描述函数:
Interface ISum {
(x:number,y:number,?z:number):number
}
-5--类型推论
简介：就是你没有声明类型的时候，直接赋值，变量就会得到一个相应的类型
-6--联合类型
注意相应的原型方法进行访问的时候，只能访问公共的方法，就是直接.不出来的，所以才有类型断言吗是吧~
let bianliang = number|string
-7--类型断言
as：
function getLength(input: number|string) :number{
conset atr = input as string
atr.length //就不会报错了
}
type guard：
类型的提前判断
function getLength(input: number|string) :number{
if( typeof input === 'string'){
return input.length // 在这里就不会出现问题了
}else{
return input.toString().length
}
}
-8--枚举（Enum）
enum Direction {
Up, 要是赋值成10 后续的枚举跟着继续晚上递增
Down,
Right,
Left
}
console.log(Direction.Up); //0
console.log(Direction[0]); //Up
双向赋值：
常量枚举：
使用常量枚举可以提升性能，在编译的时候会只尽心相应的索引的编译， 但是要保证里面的值都是常量，计算常量是不要声明的
const enum Direction {
Up,
Down,
Right,
Left
}
-9--泛型:
按照你所规定的
举例子：
声明的泛型T 就是一个单独的类型 使用<>的来进行书写，里面的名称可以自己写
使用在函数的传值和返回值的位置上进行约束
function echo<T> (arg:T):T {
return arg
}
const str:string = 'str'
const result = echo(str) 这样在返回的时候就会能看到参数一致 都是字符串
箭头函数的泛型：
// 添加一个空的 extends
const foo = <T extends {}>(x: T) => x;
// 还可以添加一个逗号，也等于是破坏了 eslint 将它作为一个标签检验
const foo = <T, >(x: T) => x;
约束泛型：
1.这个要是不在后面加上 [] 就会出现没有.length这个属性 所以可以通过类型的加持 进行类型的判断
2.但是这个就影响了初衷了 使用泛型的目的就是将在不规定类型的基础上约束相应的类型 但是现在就只能传入数组了所以采用Interface的形式来是使用
function echoWithArr<T> (arr:T) :T[] {
console.log(arr.length)
return arg
}
const arrs = echoWithArr([1,2,3])
使用Interface来约束泛型:
interface IWithLength {
length : number
}
function echoWithArr<T extends IWithLength>(arg: T) :T{
console.log(arr.length)
return arr
}
只要包括length属性就可以。
-10--泛型在类和接口中使用：
类中：
class Queue {
private data = [];
push(item:number){
return this.data.push(item)
};
pop(){
return this.data.shift()
};
}
const queue = new Queue()
queue.push(1);
queue.push(2);
console.log(queue.pop().toFixed())
问题就是 你这个地方要是传入的不是number 类型就没有toFixed方法，所以就只能约束传入的类型,但是这样就就没发使用别的类型了。修改如下
class Queue<T> {
private data = [];
push(item:T){
return this.data.push(item)
};
pop():T{
return this.data.shift()
};
}
const queue = new Queue<number>()
queue.push(1);
queue.push(2);
console.log(queue.pop().toFixed())
这个就是使用泛型的方式进行约束相应的类型，规定相应的值，其实意义就是在约束的时候产生一个新的约束的对象，来进行使用
接口中：
总结就是：接口可以来描述，所以呢就是 可以通过泛型的描述来进一步使用接口，但是其中他们两个关系就挺不好理解的，
可以书写一个接口来描述相应的内容，泛型也是可以进行相应的标识的，所以就是在接口描述的同时，再使用泛型的方法来进行的进一步的标识
这个到后期使用时候肯定会出现很多的内置泛型的
说到这就是 以后写东西的时候，比如你要接收一些数据，数据格式都会提前规定好，想想就可怕 我去 得多报多少错误
interface KeyPair<T , U>{
key:T,
value:U
}
let kp1 : keyPair<number , string> = {key:1,value:'string'}
let kp2 : keyPair<string , number> = {key:'str',value:2}
之前表示数组的用法
let arr:number[] = [1,2,3];
let arrTwo:Array<number> = [1,2,3] 这个是属于内置的泛型
-11--类型别名 字面量 交叉类型
类型别名：是原始的数据类型，就是定义了你就得使用是你定义的那个属性
声明箭头函数进行使用 这个是只用了类型 不能运行
let sum: (x:number ,y:number) => number
const result = sum(1,2)
声明类型别名的箭头函数
type PlusType = (x:number ,y:number) => number
let sum2:PlusType
const result2 = sum2(2,3)
声明类型别名的联合数据类型
type StringOrNumber = string|number
let reslut3:StringOrNumber = '123'
result3 = 123
其实还可以这样用 就是体现这是一个原始的数据类型 只能使用你定义了什么类型
const str:'name' = 'name'
const num:1 = 1
声明枚举的类型别名
type Directions = 'Up'|'Down'|'Left'|'Rigth'
let toWhere:Directions = 'Left'
交叉类型：类型的交叉类型
对象形式的组合和扩展 —— 类似于extends
interface :IName {
name:string
}
type IPerson = IName & {age :number}
let name:IPerson = {name:'123',age:18}
interface 是一种独特的类型 实现extends的时候 或者类的相关时候 用这个
type类型别名是一种类似于快捷方式的作用
所以就是： 类型别名和 联合类型（|） 交叉类型（&） Interface的使用
-12--声明文件 .d.ts
只有类型声明 没有相应的代码逻辑
后期这个会放在具体的文件里面
举例子：这是声明一个函数规定这个函数的传参返回值类型
declare function axios(url:string):string
interface IAxios {
get:(url:string) => string;
post:(url:string,data:any) => string
}
declare const axios:IAxios
第三方声明文件：
第三方声明文件：https://www.typescriptlang.org/?search=
直接搜索 有的库直接就有的 有的需要再次npm 下载@type等的文件
比如axios 直接 import就行
例子：声明函数的例子
写一个声明函数的类型，可传入两个参数 一个是‘方法的名称’，一个是数组（可加减的数）
type IOperator = 'plus'|'mins' 约束传入的参数是什么
使用Interface可以约束函数
interface ICalculator {
(operator:IOperator ,number:number[] ) : number 声明两个参数的类型
plus: (numbers:number[]) => number; 声明挂载函数的方法
minus:(numbers:number[]) => number; 声明挂载函数的方法
}
然后就是声明文件的方式
declare const calculator: ICalculator
export default calculator
可以使用export的方式进行暴露 --所有的定义文件基本上都是这样
在使用的文件里面可以以绝对路径进行引入
注意：在node项目里面 默认是会自动加载mode_modules文件的库文件的
-13-- 内置对象
gloab上存在的对象
Math有区别不是一个构造器 方法都是静态的
Ts还提供了 外置的 功能性 帮助性的类型 Utility Types
这些是对一些参数的操作 比如把参数变成可选 忽略
-14-- ts配置文件 tsconfig.json
