3. 10分钟学会ts类型之 ts新增类型

回顾下ts新增类型

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

3.1联合类型

当一个数组中既是string,也可以是number类型时怎么实现呢?

这时就要使用联合类型啦

语法 :

类型1 | 类型2 | 类型3....

eg:

// 定义一个变量，类型是number 或者 null
let timer: number | null = null
timer = setInterval(() => {}, 1000)// 定义一个数组，数组中可以有数字或者字符串
// 需要注意 | 的优先级
let arr: (number | string)[] = [1, 'abc', 2]

3.2自定义类型(类型别名)(重点)

格式:

定义 type 别名 = 类型

type s = string // 定义  const str1:s = 'abc'const str2:string = 'abc'

3.2-1自定义类型

type 新类型 = 类型1 | 类型2 | 类型3

给复杂类型起别名是一般首字母大写

一看就知道原先的写法只有一行代码,简洁,但建议不用, 因为给它起了别名利于复用

type MyArr = (number | string) []
const arr:MyArr = [1, '1'] //原先写法
const arr:(number | string) [] = [1,'1']

3.2-2自定义对象 -- 参数可选(对象) ?

type MyGir1 = {address?:string,  //对象可选name:string,age:number, //hello的类型,是一个函数,没有形参,返回一个stringhello?:() => string // hello: () => {}greet?():void ,  //greet: function() {}}let g1 : MyGir1 = {greet: function(){},hello:function(){return 'abc'},age:18,name:'小红',address :'无'}let g2: MyGir1 ={age:30,name:'小明',//address:'地球上'}const fn =(h:MyGir1) =>{h.address = '按地方'}

3.2-3函数参数可选

 //若设置,有个可选,有个不选 (a:number,b? :number)const f = (a?:number,b?:number) => {}f()f(1,2)f(1)//设置了默认值,是不是表示这个值  可传不可传 ===> 可选const fn =(x:number =1 ,y : number =2) => {return x + y}//让参数是可选的,只要添加一个特殊的符号 ? fn()  // ===> 3fn(10)  // ===> 12

3.3 void

void : 如果函数没有返回值,设置为void格式

1.不在乎返回值

2.return 空的

3.return undefined

 //普通函数function fn(a:number,b:string):void {//return //return 1  报错return undefined}const abc = fn()//箭头函数const f = ():void => {}//自定义函数type MyFn = () => voidconst f1:MyFn = () => {}

3.4元组类型

元组: 一种特殊的数组,它指定了元素的个数及对应的类型

//经纬度表示地址let position: number[] = [116.2317, 39.5427]//number[] :它只能表示一个数组,元素是number类型//需求: 一个数组,两个元素,第一个是数值,第二个也是数值//元组: 一种特殊的数组,它约定了元素的个数及对应的类型const c : [string,number] = ['小花',39.5427]

3.5字面量类型

它一般和联合类型一起使用,表示多个固定的值,只能取一个

type Gender = '男' | '女'

let m : Gender = '男'

 let str1 = '你好啊'const str2 = '特殊的,不一样的'//1.str是啥类型? string类型,它一定,必须保存字符串类型//2.str2是   '特殊的,不一样' 就是字面量类型 ,//它一般是和联合类型一起使用,表示多个固定的值中取一个type Gender = '男' | '女'let man : Gender = '男'let women:Gender = "女"

3.6枚举类型 enum

它的功能类似于字面量类型 + 联合类型组合的功能

  //需求:定义一个变量,它的值只能是'up','down','left','right'中一个//定义枚举// enum Direction {'up'=100,'down','left','right'}// console.log(Direction.right); // ===> 103// enum Direction {'up'='up,'down'='down','left'='a','right'='b'}// console.log(Direction.right); // ===> benum Direction {'up','down','left','right'}//使用枚举//枚举的名字.xxxlet d2:Direction = Direction.upfunction f(d:Direction) {if(d === Direction.left){}}//1.ts中的类型声明语句转为js之后会丢弃//但是枚举不会//使用枚举之后,会导致代码的体积变大//2.这个类型有值// console.log() 可以正常输出枚举//场景:后端给我们的性别是 0(男),1(女)\//    写代码能看到有语义的字符串,而代码运行的结果有具体的值enum Gender {'man'=0,'woman'=1}let g1: Gender = Gender.manconsole.log(g1); // ===> 0

3.7类型断言 as

as作用就是将大类型(document.createElement),变为小类型(HTMLAnchorElement)

const aLink = document.createElement('a') as HTMLAnchorElement

鼠标放在aLink上,就会显示 HTMLAnchorElement

3.8接口 interface

当一个对象类型被多次使用时,一般会使用接口(interface)来描述对象的类型,达到复用的目的

都可以定义对象

 interface Iperson{name:stringage:numbersayHello() :void}const person:Iperson = {name:'小花',age:18,sayHello() {},}

type 跟接口 interface 区别

type不限于对象,它也可以自定义其他类型

interface只能定义对象

type不能继承

interface能继承

接口继承格式(extends)

接口1 会包含所有接口2的属性

interface 接口1 extends 接口2 {

接口1的自己的类型

}

interface Ipoint2D{x:number,y:number}const p1 :Ipoint2D = {x :123,y:1241}//接口继承interface Ipoint3D extends Ipoint2D {z:number} const p2 : Ipoint3D ={x : 13,y:14,z:520}

3.9any类型

any 类型,没有限制

有些时候可以临时写一下

1. 前端没有明确拿到后端的数据的时候,不知道使用什么类型来保存

2.可以先用下any ,让代码通过运行

有些时候,就应该是any

console.log() 它的参数就是any

默认为any

let b

function f(b){ }