前端系列二十八：TS常用类型

类型注解：

let age :number = 18
    
    代码中的 : number 就是类型注释。

    作用：
    为变量'添加类型约束'，上面代码中，约定变量age的类型为number ( 数值类型 )
    
    解释：
        约定了什么类型,就只能给变量赋值该类型的值，否则,就会报错
 

常用基础类型概述：

JS已有类型：

原始类型：number/string/boolean/null/undefined/symbol

对象类型： object ( 包括，数组、对象、函数等对象 )

TS新增类型：

联合类型、自定义类型（类型别名）、接口、元组、字面量类型、枚举、void、any等。

数组类型：

对象类型：object ( 包括， 数组、对象、函数等对象 )

特点：
        对象类型，在TS中更加细化，每个具体的对象都有自己的类型语法

数组类型的两种写法： ( 推荐使用 number[ ] 写法 )

let numbers: number[ ] = [1,3,5 ]

let string: Array<string> = [ 'a', 'b', 'c ' ]

联合类型：

需求：  数组中既有 number类型,又有string类型，就可以使用联合类型

    写法：
        let arr : ( number | string )[ ] = [1, 'a' ,3, 'b']

    | (竖线) 在TS中叫做 '联合类型' (由两个或多个其他类型组成的类型，表示可以是这些类型中
的任意一种)

    注意：联合类型只有一根竖线, 不要与JS中的 或( || ) 混淆了

类型别名：

类型别名( 自定义类型 ) : 为任意类型起别名

    使用场景：当同一类型 （复杂）被多次使用时, 可以通过类型别名 , ‘简化改类型的使用’

    type CustomArray = ( number | string )[ ]
    let arr1: CustomArray = [ 1, 'a' ,3, 'b' ]

    解释：
    1.使用 'type' 关键字来创建类型别名
    2.类型别名 ( 比如, 此处的CustomArray ), 可以是任意合法的变量名称
    3.创建类型别名后， 直接 '使用该类型别名作为变量的类型注释'即可

函数类型：

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

函数指定类型的两种方式：

1.单独指定参数，返回值的类型

    写法：
        function add (num1:number, num2:number): number {
            return num1 + num2
        }
        
        const add = (num1:number, num2:number): number => {
              return num1+num2
        }

2.同时指定参数,返回值的类型
    
    写法：
        意思:就是在前面的时候就声明好了参数类型跟返回值类型后面就直接写箭头函数
        const add: ( num1:number, num2: number ) => number = ( num1,num2 ) =>{
            return num1 + num2
        }

    当使用函数作为表达式时，可以通过类似箭头函数形式的语法来为函数添加类型

如果函数没有返回值，那么函数返回值类型为：void

写法：
         function  greet(name: string): void {
        console.log('hello',name)
        }

函数可选参数：

写法：    

    function mySlice( start?: number, end?: number ): void {
    console.log('起始索引: ', start, '结束索引:', end)
    }

    可选参数： 在可传可不传的参数名称后面添加? （问号）
    注意： '可选参数只能出现在参数列表的最后'    ,也就是说可选参数后面不能再出现必选参数

对象类型：

TS中'对象的类型'就是在'描述对象的结构' ( 有什么类型的属性和方法 )

    对象类型的写法：

    let person: { name:string; age: number; sayHi( ): void } = {
    name:'jack',
    age:19,
    sayHi( ) { } 
    }    

    解释：
    直接使用{ } 来描述对象结构,属性采用'属性名:类型'的形式；方法采用'方法名( ): 返回值类型 '的
形式。
    如果方法有参数，就在方法名后面的小括号中指定参数类型 ( 比如: greet( name:string ):void )
    在一行代码中指定对象的多个属性类型时,使用 ；（分号）来分隔
    如果一行代码只指定一个属性类型( 通过换行来分隔多个属性类型 )，可以去掉；（分号）

对象可选属性：

比如我们在使用axios（{...}）时,如果发送GET请求, method 属性就可以省略

    写法：
    function  myaxios( config: { url: string; method?: string } ) {
    console.log(config)
    } 
    '可选属性'的语法与函数可选参数的语法一致，都使用 ? (问号) 来表示