回顾下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的类型,是一个函数,没有形参,返回一个string
hello?:() => 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() // ===> 3
fn(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 = () => void
const 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); // ===> b
enum Direction {'up','down','left','right'}
//使用枚举
//枚举的名字.xxx
let d2:Direction = Direction.up
function 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.man
console.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:string
age:number
sayHello() :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){ }