TypeScript 常用类型

69 阅读5分钟

TypeScript 常用类型

1. 类型注解
       1. 代码中的 : number 就是类型注解
       2. 为变量添加类型约束。比如,上述代码中,约定变量 xxx 的类型为 number 类型
       3. 约定了什么类型,就只能给变量赋值该类型的值,否则,就会报错
2. 原始类型
       1. JS 已有类型
             1. number/string/boolean/null/undefined/symbol (基本类型)
                   1. Symbol()函数 创建的值是唯一的
                   2. 可以作为对象属性的键,防止与对象中其他键冲突或覆盖
                   3. 访问取值 obj.[xxx]
             2. object(包括,数组、对象、函数等对象) (引用类型)
       2. TS 新增类型
             1. 联合类型、自定义类型(类型别名)、接口、元组、字面量类型、枚举、void、any 等
             2. 注意:
                   1. 始类型在 TS 和 JS 中写法一致
                   2. 对象类型在 TS 中更加细化,每个具体的对象(比如,数组、对象、函数)都有自己的类型语法
3. 数组类型
        1. 数组类型有以下两种写法,推荐使用 number[] 写法
               1. let numbers: number[] = [1, 3, 5] // 二维数组 :number[][]
               2. let strings: Array<string> = ['a', 'b', 'c']
4. 联合类型
        1. 能够通过联合类型将多个类型组合成一个类型
        2. let arr: (number | string)[] = [1, 'a', 3, 'b']
               1. 此处 () 的目的是为了将提升优先级,表示一个整体,表示:number 类型的数组或 string 类型的数组
               2. 这是 TS 中联合类型的语法,只有一根竖线,不要与 JS 中的或(|| 或)混淆了
        3. let arr: number | string[] 
               1. 该类型表示要么是 number 类型 或者是 String 类型(俩个单独的类型)
5. 类型别名
        1. 类型别名(自定义类型):为任意类型起别名
        2. 使用场景:
                1. 当同一类型(复杂)被多次使用时,可以通过类型别名,简化该类型的使用
                2. 使用 type 关键字来创建自定义类型
                3. 类型别名(比如,此处的 CustomArray)可以是任意合法的变量名称
                4. 推荐使用大写字母开头
                5. 创建类型别名后,直接使用该类型别名作为变量的类型注解即可
                           type NumOrStrArray = (number | string)[]
                           let arr1: NumOrStrArray = [1, 'a', 3, 'b']
                           let arr2: NumOrStrArray = ['x', 'y', 6, 7]
6. 函数类型
        1. 参数和返回值类型
                1. 单独指定参数、返回值的类型
                           //  参数:number  返回值 (参数):number
                           const add = (num1: number, num2: number): number => {
                                     return num1 + num2
                           }
                2. 同时指定参数、返回值的类型
                           //  这种形式只适用于函数表达式(函数形式的语法)
                           //  创建函数自定义类型
                           type AddFn = (num1: number, num2: number) => number
                           //  使用自定义类型作为函数 add 的类型
                           const add: AddFn = (num1, num2) => {
                                    return num1 + num2
                           }                      
        2. void 类型
                1. 如果函数没有返回值,那么,函数返回值类型为:void
                2. 这个函数不能有返回值(单独写个return可以的), 就不可以写  return xxx  
                3.undefined 是俩个不同的类型
                4. 指定 返回值类型为 undefined, 必须return undefined 才可以(否则报错)
        3. 可选参数
                1. 使用函数实现某个功能时,参数可以传也可以不传。这种情况下,在给函数参数指定类型时,就用到可选参数了
                2. 在可传可不传的参数名称后面添加 ?
                3. 可选参数位于该函数参数的最后
                4.函数参数如果有默认值,那么这个参数就是可选参数(不可以加 ? )
                       const mySlice = (start: number, end?: number): void  => {}
7. 对象类型
        1. 对象类型的基本使用
                1. TS 对象的类型就是在描述对象的结构(有什么类型的属性和方法)
                2. 如果对象有多个属性, 属性之间用 ;(分号) 隔开, 换独占一行可以省略 ;(分号)
                3. 使用类型别名为对象添加类型 type obj = { 类型 }  let xxx: obj = {}
        2. 带有参数的方法类型 
                 1. add: () => void   add: name => {}
                 2. add(): string    add() { retrun 'ts'}
        3. 对象的可选属性
                 1. 可选属性的语法与函数可选参数的语法一致,都使用 ? 来表示
        4. 接口
                 1. 使用 interface 关键字来声明接口 interface add {属性} 
                 2. 类似于声明类型别名的变量
                 3. interface(接口)和 type(类型别名)的对比
                        1. 接口,只能为对象指定类型,
                        2. 类型别名,不仅可以为对象指定类型,实际上可以为任意类型指定别名
                        3. 对象类型的写法,对象类型实际上就是在描述对象的接口
                        4. 推荐使用 type 来指定对象的类型
                 4. 接口继承
                        1. 公共的属性或方法抽离出来,通过继承来实现复用
                        2. 使用 extends(继承)关键字实现了接口 Point3D 继承 Point2D 所有的属性和方法
                        3. Point3D 继承 Point2D属性和方法 (interface Point3D extends Point2D)
8. 交叉类型
        1. 语法:&,交叉类型
        2. 作用:组合现有的对象类型
        3. 使用 交叉类型 来实现接口继承的功能:
             // Point3D 就是同时具有了 Point2D 和 自己对象的所有的属性
             type Point2D ={x:number, y: number}
             type Point3D = Point2D & { z: number }
        4. 类型省略注解
                1. 声明变量并带有初始值,类型可省略不写(如果声明变量没有初始值,此时,明确指定变量类型)
                2. 函数返回值: TS 会自动根据函数的返回值,计算出参数的类型 (注意: 函数参数一定要添加类型)
9. any 类型(原则不推荐使用)
        1. 失去 TS 类型保护的优势, 因为当值的类型为 any 时,可以对该值进行任意操作,并且不会有代码提示,变成 “AnyScript”
        2. 其他隐式具有 any 类型的情况
                1. 声明变量不提供类型也不提供默认值 ---> (要么加默认值 或者 指定类型)
                2. 函数参数不加类型 --->  (函数参数指定类型)
        3. 除非临时使用 any 来“避免”书写很长、很复杂的类型(特殊情况)
               例如:  JONS.xxx(...)