接口

定义接口 interface

interface DataType {name:stringage:number// ? 代表可选参数sex?:string
}
// 定义变量使用接口
let data: DataType = {name:'2',age:12,sex:'性别'
}

interface setArgs {// 属性name:string,// 函数fn:()=>string
}
// 函数入参使用接口
function getData(a:setArgs):string{if(a.name){return a.name}else{return a.fn()}
}

前端项目中使用接口校验数据，示例

// 请求axios数据进行数据类型校验 示例:
interface dataObj {userName:string,passWord:string,token:string
}
// 模拟请求数据接口
function getDataList(){return {userName:'2',passWord:'666',token:'sdadasd'}
}
// 接收返回过来的数据，如果数据类型不符合，接收检验会报错
const dataList:dataObj = getDataList()

对于后端返回的唯一标识id，前端不能直接进行修改，我们在使用接口定义的时候，可以使用readonly对属性仅可读操作

interface data1{// 只读属性readonly id:string,name:string
}
// 只有在第一次可以对其进行赋值
let data2:data1 = {id:'2',name:'3'
}
// 再次对其进行修改就会出现错误
// data2.id = '22'

联合类型

变量声明多种类型

let myName: string | number | boolean
myName = 'str'
myName = 2
myName = false
// 访问联合类型的属性和方法，属性和方法必须是共有的，否则会出现错误
// toString() 是共有的方法，所以可以正常使用
myName.toString()
// 类型 number 和 boolean 都不存在length属性 所以会报错
// myName.length

类型别名

给一个类型起个新名字 type

type obj = string
type obj1 = () => string
type obj2 = obj | obj1

数组

在js为[],里面的值可以为任意类型，可以理解为 ts中的 any[]

在ts中增加了类型校验，对于定义有两种： number[] / Array

// 数组里的每一项只能为数字number，出现其他类型会报错，比如['1',2]
let arr : number[]= [1,2,3]
// 如果想让数组每一项有不同的类型，就需要结合联合类型和类型别名一起使用
// 声明一个类型别名
type name = string | number
// 进行类型使用
let arr2: name[] = ['1','2', 1]
// 如果不想声明 可以这样使用
let arr1: Array = ['1','2',1 ]
// 同样用接口依然可以声明，但是没有上面两种简单，接口一般对类数组进行描述，但ts的内置对象已经进行了声明，这里不做描述

函数

函数常见的两种声明 函数声明/函数表达式

// 函数声明
function fn(x,y){return x+y
}
// 箭头函数
const fn1 = (x,y) => x+y
// 函数表达式
const fn2 = function(x,y){return x+y
}

在ts中，对于函数入参和返回值都需要考虑类型校验

// 对于函数声明的校验
function fn3(x: number, y: number): number{return x + y
}
// 对于入参个数也会有校验
// 正常入参
fn3(1,2) 
// 错误入参
fn3(1)
fn3(1,2,3)

// 对于表达式的校验
let num = function(x: number,y: number): number{return x + y
}
const fn4 = (x:number,y:number):number => x+y

对于右侧的函数进行校验，但是对于左边是通过右侧得出的类型，类型推断出来的

如果需要我们可以手动给num进行添加类型

// 手动添加类型的话
let num1:(x:number,y:number) => number = function(x:number,y:number):number{return x+y
}
let num2:(x:number,y:number)=>number = (x:number,y:number):number=>x+y

通过接口可以对左侧添加类型

interface sum{(x:number,y:number):number
}
let sum1:sum
sum1 = (x:number,y:number):number=>x+y
// 错误类型入参
sum1('1',1)
// 入参个数错误
sum1(1,1,2)

输入多余的参数是不被允许的，可以定义可选参数 使用

function fn5(x:number,y?:number):number{return y ? y : x
}
fn5(1)
fn5(1,2)

注意: 可选参数必须在必需参数后面进行，在前面会报错

function fn6(x?:number,y:number):number{return y ? y : x
}

默认值

es6允许了给参数入参增加默认值，ts对于给与默认值的参数识别为可选参数，此时就不受 可选参数必须接在必需参数后面

function fn7(x:number,y:number = 12):number{return x+y
}
function fn8(x:number= 12,y:number ):number{return x+y
}	
fn5(1)
fn5(1,12)