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

最新推荐文章于 2024-05-02 19:15:13 发布

HQ8806

最新推荐文章于 2024-05-02 19:15:13 发布

阅读量3.1k

点赞数 1

文章标签：大数据前端 typescript

本文链接：https://blog.csdn.net/LJM51200/article/details/125686204

版权

回顾下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
  }