ts学习D1---超基础语法导入

在跟练小兔鲜的时候发现常用ts语法来定义接口返回的数据类型，所以来补习一下ts语法

1.js是一种弱脚本文件，数据类型定义和使用不严格，所以便于后期维护，就诞生了ts

2.编写

2.1 ts会以给出的变量类型初始值进行变量类型定义（ts的类型约束功能+类型推断）

2.2 ts的类型注解

ts 复制代码

// 1.使用类型注解，在变量后加'：'的符号，指定变量的类型
let str:string='abc'

// 2.或者先预声明一个变量,之后需要使用的时候再进行赋值
let num:number
num=123

2.3 ts的类型断言

ts 复制代码

let numArr=[1,2,3]
const result=numArr.find(item=>item>2)
// 结合unArr中的元素，这里的'item=>item>2'有可能不成立，
// 会被判定为undefined类型，所以result会标红
result*5

如果你想筛选掉undefined的情况，就需要使用类型断言'as number',断言为一个数值类型

ts 复制代码

let numArr=[1,2,3]
const result=numArr.find(item=>item>2) as number
// 结合unArr中的元素，这里的'item=>item>2'有可能不成立，
// 会被判定为undefined类型，所以result会标红
result*5

2.4 ts的基础类型和联合类型

ts 复制代码

// 1.ts的基础类型
let v1:string='abc'
let v2:number=123
let v3:boolean=true
let nu:null=null
let ud:undefined=undefined

// 2.ts的联合类型
// 2.1通过竖线的方式来定义联合类型(如v4：可以赋值string或者number)
let v4:string|number=123

// 2.2 希望这个数值只能被限定为以下几个数值之一
let v5:1|2|3=1  // 赋值成功
let v6:1|2|3=4  // error 4不是v6的成员

// 3.ts的数组
// 通过类型来约束数组中的类型
let v7:number[]=[1,2,3]
let v8:Array<string>=['a','b','c']

// 4.ts的元组
// 4.1元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同
let v9:[string,number]=['a',1]
// 4.2 取出元祖值
v9[0] //输出a

// 4.3 让一些元祖中的元素为可选的
let v10:[string,number,boolean?]=['a',1]   // ？表示可选


// 5.ts的枚举
//在js中就是将其编译为键、值的形式
enum MyEnum{   // 枚举类型
    a,
    b,
    c
}
// 5.1 访问枚举类型的两种方式
console.log(MyEnum.a)
console.log(MyEnum[0])  //等于MyEnum.a

2.5 ts的函数

2.5.1 void

ts 复制代码

// 6. void类型(当函数没有返回值的时候，返回值就是undefined，所以函数返回值类型为void)
function fn():void{  // void类型表示没有任何返回值
    console.log('void')
}

2.5.2 给函数的参数分配类型

ts 复制代码

function MyFn(a:number,b:string){
return a+b;
}

2.5.3 给函数的返回值分配类型（用于严格规范函数返回值类型）

2.5.3.1

ts 复制代码

function MyFn(a:number,b:string):number{   //报错，因为这里返回值类型不是number
return a+b; 
}
## ```
#### 2.5.3.2
```ts
function MyFn(a:number,b:string):number{
return 100;
}

2.5.3.3 将参数设置为可选（和ES6有点像）

注意；可选参数写在必选参数左侧（后面）

ts 复制代码

function MyFn(a:number,b?:string):number{
return 100;
}

2.5.3.4 剩余参数

ts 复制代码

function MyFn(a:number,b?:string, ...rest:number[]):number{
return 100;
}

const f=MyFn(20,'abc',1,2,3,4,5,6,7) //1,2,3,4,5,6,7就是剩余函数' ...rest:number[]'的实参

2.6 ts的接口

ts 复制代码

// 定义一个接口
interface Obj{
    name:string,
    age:number
}

// 使用接口的时候必须要有name和age
const obj:Obj = {
    name:'张三',
    age:18
}

2.7 ts的type（类型别名）---很常用

ts 复制代码

type MyuserName=string|number
let username:MyuserName="123"

2.8 ts的泛型---很常用

定义一个结构体，但是想适配多中数据类型，可以使用泛型

ts 复制代码

function myFn<T>(a:T,b:T):T[]{
    return [a,b];
}
// 使用数值类型进行处理
myFn<number>(1,2)
// 使用字符串类型进行处理
myFn<string>('1','2')
// 或者不手动定义类型，因为在ts中函数myFn()会自动进行类型推导
myFn(1,2)  //自动将类型判定为number