TS的常用类型

TypeScript类型系统的主要优势:可以标记处代码中的意外行为,从而降低了发生错误的可能性.

类型注解

let num:number = 18
//:number 就是类型注解
//作用: 为变量天假类型约束. 比如 上述代码中 约定变量num的类型是number
//解释:约定了什么类型,就只能给变量赋值改类型的值,否则就会报错

常用基础类型 分为两种 :

js已有的类型: 原始数据类型,
对象类型 在ts中更加细化 每个具体的对象都有自己的类型语法
//数组类型的两种写法:
纯数字类型的数组:const numberArr:number[]=[ 1 , 2 , 3 , 4 ] //推荐使用这种写法
纯字符串类型的数组:const strArr:Array<string>=['a','b','c']

函数类型

函数的类型实际上指的是 函数参数和返回值的类型

为函数执行类型的两种方式:

//1指定参数 返回值的类型
function add(num1:number,num2:number):number{
return num1+num
}
const add=(num1:number,num2:number):number=>{
return num1+num
}
 //2同时指定参数 和返回值的类型
 const add:(arg1:number,arg2:number)=>number=(arg1,arg2)=>{arg1+arg2}
解释:当函数作为表达式时,可以通过类似煎肉函数形式的语法来作为函数添加类型
注意:这种形式 只适用于函数表达式
如果函数没有返回值,那么函数的返回值类型为 : void
function(name:string):void{
	//do something....
}
可选参数:
是有函数实现某个功能时,参数可以传也可以不传.这种情况下,在给参数定义参数类型时就能用到
可选参数
ps:自己实现一个数组的slice方法 可以slice( 1 )也可slice( 1 , 3 )
可选参数:在可传可不传的参数名称后加?(问号)
注意:可选参数只能出现在参数列表的最后,也就是说也选参数后边不能再出现必选参数

对象类型

js中的对象是由属性和方法构成的,而ts中对象的类型就是在描述对象的结构(有什么类型的属性和方法)
对象类型的写法:
const person:{name:string;age:number;sayHi():void}={
name:'XXX',
age: 18 ,
sayHi(){
//do something...
}
}
解释:
直接使用{}来描述对象结构 属性采用属性名:类型的形式 方法彩虹 方法名():返回值的形式
如果方法中有参数,就在方法名后面的小括号中指定参数类型 fn(name:string):void
再一行代码中指定对象的多个属性类型时,使用;分号来分隔
如果一行代码只指定一个属性类型(通过分割多个属性类型) 可以去掉;分号
方法的类型也可以使用箭头函数形式 ps {sayHi:()=>void}

TS新增类型:

联合类型 自定义类型(类型别名) 接口 元组 字面量类型 枚举 void any等

联合类型

//如果 数组中既有number类型 又有string类型:
类型别名(自定义类型):为任意类型起别名.
使用场景 当同一类类型(复杂)被多次使用时 可以通过类型别名,简化该类型的别名
const arr:(number|string)[]=[ 1 ,'a', 2 ,'b']
| 在ts中叫 联合类型 (由两个或者多个其他类型组成的类型表示可以是这些类型中的 任意一种)
//如果不添加括号 表示 既可以是数值类型也可以是字符串数组

interface(接口)和t ype(类型别名)的对比:

相同点:都可以给对象指定类型
不同点:
    接口:只能为对象指定类型
    类型别名:不仅可以为对象指定类型,实际上可以为唯衣类型指定别名
    接口: interface Person{name:string,age:number,sayHey():void}
    类型别名: type Person={name:string,age:number,sayHey():void)}

自定义类型(类型别名)

type customArray=(number|string)[]
const arr1:customArray=[ 1 , 2 ,'a', 3 ]
const arr2:customArray=[ 4 , 5 ,'a','c']
解释:
    使用type关键字来创建类型别名
    类型别名(比如:customArray) 可以是任意合法的变量名称
    创建类型别名后 直接使用该类型别名作为变量的类型逐渐即可

接口(interface)

接口 当一个对象类型被多次使用时 一般会使用接口(interface)来描述对象的类型 达到复用的目的
解释:
    使用 interface关键字来声明接口
    接口名称 自己起 可以是任意合法的变量名称
    声明接口后 直接使用名称作为变量的类型
    因为每一行只有一个属性类型 因此属性类型后没有; 分号
    接口继承 如果两个接口之间有相同的属性或方法,可以将公共的属性或方法抽离出来,通过继承来实现复用
    ps: interface Point2D {x:number,y:number}
        interface Point3D {x:number,y:number}	
更好的方式:
    interface Point2D {x:number,y:number}
    interface Point3D extends Poin2D {z:number}
解释:
使用 extends(继承) 关键值实现了接口Point3D 继承 Point2D
 继承后,Point3D就有了Point2D的多有属性和方法(这时,Point3D同时有x y z 三个属性)

元组

使用场景:在地图中 使用经纬度坐标来标记位置信息
可以使用数组来记录坐标 那么 该数组中只有两个元素 并且这两个元素都是数值类型
let position:number[]=[39.5427,116.2317]
使用number[]的缺点:不严谨 因为改类型的数组中可以输入任意多个元素
更好的方式: 元组(Tuple)
元组类型是另一种类型的数组.他确切的知道包含多少个元素,以及特定索引对应的类型
let position:[number,number]=[39.5427,116.2317]
解释:
元组类型可以确切的标记出有多少个元素,以及每个元素的类型
示例中 数组中有两个元素 每个元素的类型都是number

字面量类型

let str1='Hello TS'
const str2='Hello TS'
通过ts类型推论机制 可以得到: 变量str1的类型为 string 变量str2的类型为 "Hello TS"
解释:
  str1试一个变量(let) 它的值可以是任意字符串 所以类型为 string
  str2是一个常量(const) 它的值不能变化只能是'Hello TS' 所以 他的类型为 'Hello TS'
  注意!!!! 此处的 'Hello TS' 就是一个字面量类型 也就是说某个特定的字符串也可以作为TS中的类型
  除了字符串外 任意的JS字面量(ps: 对象/数字等) 都可以作为类型使用


 使用模式:字面量类型配合联合类型一起使用
 使用场景:用来表示一组明确的可选值列表
 比如 在贪吃蛇游戏中 游戏的方向可选值 只能是 上 下 左 右 中的任意一个

function changeDirection(dircetion:'up'|'down'|'left'|'right'){
//do something........
 }

解释: 参数direction 的值 只能是 up/down/left/right中的任何一个
优势:相比于string类型 使用字面量类型更加精确,严谨

枚举

枚举是TS为数不多的非JavaScript类型及扩展(不仅仅是类型)的特征之一
其他类型仅仅被当做类型 而枚举不仅用作类型 还提供值(枚举成员都是有值的)
也就是说其他的类型会在编译为js代码是自动移除 但是 枚举类型会被编译成js代码
ts代码:enum Direction{Up='UP',Down='DOWN',Left='LEFT',Right='RIGHT'}
转换为js代码:var Direction; //类型+联合类型组合 不会被编译成js 枚举会被编译成js代码
(function(Direction){
    Direction['Up']='UP'
    Direction['Down']='DOWN'
    Direction['Left']='LEFT'
    Direction['Right']='RIGHT'
}(Direction || (Direction={})))
说明: 枚举与字面量类型+联合类型组合的功能类似 都是用来表示一组明确的可选值列表
一般情况下,推荐使用字面量类型+联合类型组合的方式 因为相比枚举 这种方式更加直观 简洁 高效
枚举的功能类似于字面量类型+联合类型组合的功能,也可以表示一组明确的可选值
枚举:定义一组命名变量.他描述一个值,该值可以是这些命名常量中的一个
enum Direction{Up.Down.Left,Right}
function changeDirection(direction:Direction){
		//do something.....
}
调用: changeDirection(Direction.Up)
解释:
  使用enum 关键字定义枚举
  约定枚举名称 枚举中的值以大写字母开头
  枚举中的多个值时间通过,(逗号)分隔
  定义好的枚举后,直接使用枚举名称作为类型注解
注意: 形参direction的类型为枚举Direction 那么 实参的值应该就是枚举Direction 成员的任意一个.
changeDirection(Direction.Up)
解释: 类似于JS中的对象 直接通过 点(.)语法访问枚举的成员

数字枚举

注意: 枚举橙元默认是有值的 默认为:从 0 自增的数值

我们把枚举橙元的值为数字的枚举 称为为:数字枚举

当然也可以给枚举中的成员初始化值
  enum Direction {up= 10 ,Down,Left,Right} //Down->11 Left->12 Right->
  enum Direction {up= 10 ,Down= 99 ,Left= 14 ,Right= 22 }

字符串枚举

字符串枚举:枚举成员的值是字符串
enum Direction {Up='UP',Down='DOWN',left='LEFT',Right='RIGHT'}
注意:字符串枚举没有自增⻓行为,因此 字符串枚举的每个成员(必须)有初始值.
function change(direction: Direction) {
		//do something...
}
change(Direction.Up)

any类型

原则上:不推荐使用any 这会让TypeScript 变为 'anyScript' (失去TS保护的优势)
因为当值的类型为any时.可以对该值 进行任意操作 并且不会有代码提示
  let obj:any={x: 0 }
  obj.bar= 100
  obj()
  const n:number=obj
解释:
    以上操作都不会有任何错误类型提示 即使可能存在错误!尽可能的避免使用any类型,除非临时
    使用any 来避免 书写很⻓ 很复杂的类型 其他隐式具有any类型的情况:1.变量声明不提供类型也不
    提供默认值 2.函数参数不加类型
注意: 因为不推荐使用any 所以 这两种情况下都应该提供类型