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

回顾下ts新增类型

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

3.1联合类型

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

这时就要使用联合类型啦

语法 :

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

eg:

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

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

格式: 

定义   type  别名 = 类型

1.  
   type s = string // 定义
2.  
    
3.  
   const str1:s = 'abc'
4.  
    
5.  
   const str2:string = 'abc'

3.2-1自定义类型

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

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

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

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

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

1.  
   type MyGir1 = {
2.  
   address?:string, //对象可选
3.  
   name:string,
4.  
   age:number,
5.  
   //hello的类型,是一个函数,没有形参,返回一个string
6.  
   hello?:() => string // hello: () => {}
7.  
   greet?():void , //greet: function() {}
8.  
   }
9.  
   let g1 : MyGir1 = {
10.  
    greet: function(){
11.  
     
12.  
    },
13.  
    hello:function(){
14.  
    return 'abc'
15.  
    },
16.  
    age:18,
17.  
    name:'小红',
18.  
    address :'无'
19.  
    }
20.  
    let g2: MyGir1 ={
21.  
    age:30,
22.  
    name:'小明',
23.  
    //address:'地球上'
24.  
    }
25.  
    const fn =(h:MyGir1) =>{
26.  
    h.address = '按地方'
27.  
    }

3.2-3函数参数可选

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

3.3 void

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

1.不在乎返回值

2.return 空的

3.return undefined

1.  
   //普通函数
2.  
   function fn(a:number,b:string):void {
3.  
   //return
4.  
   //return 1 报错
5.  
   return undefined
6.  
   }
7.  
   const abc = fn()
8.  
    
9.  
   //箭头函数
10.  
    const f = ():void => {}
11.  
    //自定义函数
12.  
    type MyFn = () => void
13.  
    const f1:MyFn = () => {}

3.4元组类型

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

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

3.5字面量类型

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

type Gender = '男' | '女'

let m : Gender = '男'

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

3.6枚举类型 enum

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

1.  
   //需求:定义一个变量,它的值只能是'up','down','left','right'中一个
2.  
   //定义枚举
3.  
   // enum Direction {'up'=100,'down','left','right'}
4.  
   // console.log(Direction.right); // ===> 103
5.  
   // enum Direction {'up'='up,'down'='down','left'='a','right'='b'}
6.  
   // console.log(Direction.right); // ===> b
7.  
    
8.  
    
9.  
   enum Direction {'up','down','left','right'}
10.  
    //使用枚举
11.  
    //枚举的名字.xxx
12.  
    let d2:Direction = Direction.up
13.  
     
14.  
    function f(d:Direction) {
15.  
    if(d === Direction.left){
16.  
     
17.  
    }
18.  
    }
19.  
     
20.  
    //1.ts中的类型声明语句转为js之后会丢弃
21.  
    //但是枚举不会
22.  
    //使用枚举之后,会导致代码的体积变大
23.  
    //2.这个类型有值
24.  
    // console.log() 可以正常输出枚举
25.  
     
26.  
    //场景:后端给我们的性别是 0(男),1(女)\
27.  
    // 写代码能看到有语义的字符串,而代码运行的结果有具体的值
28.  
    enum Gender {'man'=0,'woman'=1}
29.  
    let g1: Gender = Gender.man
30.  
    console.log(g1); // ===> 0

3.7类型断言    as 

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

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

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

3.8接口   interface

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

都可以定义对象

1.  
   interface Iperson{
2.  
   name:string
3.  
   age:number
4.  
   sayHello() :void
5.  
   }
6.  
   const person:Iperson = {
7.  
   name:'小花',
8.  
   age:18,
9.  
   sayHello() {
10.  
     
11.  
    },
12.  
    }

type 跟 接口 interface  区别

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

interface只能定义对象

type不能继承

interface能继承

接口 继承格式(extends)

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

interface 接口1 extends 接口2 {

接口1的自己的类型

}

1.  
   interface Ipoint2D{
2.  
   x:number,
3.  
   y:number
4.  
   }
5.  
   const p1 :Ipoint2D = {
6.  
   x :123,
7.  
   y:1241
8.  
   }
9.  
   //接口继承
10.  
     
11.  
    interface Ipoint3D extends Ipoint2D {
12.  
    z:number
13.  
    }
14.  
    const p2 : Ipoint3D ={
15.  
    x : 13,
16.  
    y:14,
17.  
    z:520
18.  
    }

3.9any类型

any 类型,没有限制 

有些时候可以临时写一下 

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

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

有些时候,就应该是any

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

默认为any 

         let   b

          function f(b){ }

这篇好文章是转载于：学新通技术网