【前端】【Ts】TypeScript的关键知识点

• 一、知识点总结

  • （一）void 与 never 的区别

    • (1) void：声明函数无返回值，但可以走到 return 行。
    • (2) never：表示函数不会走到 return 行，常用于抛异常或无限循环。

  • （二）字面量类型与联合类型的使用

    • (1) 利用字面量类型和联合类型（使用 “|” 连接多个可能值）实现类似枚举的效果。
    • (2) 限制变量只能取特定范围内的值。

  • （三）interface 接口的使用

    • (1) 用于分离类型声明，提高代码的重用性和可读性。
    • (2) 对函数的控制写法：可以通过接口来约束函数的参数和返回值类型。

      • // 对函数的控制写法
        interface SumFunction {(a: number, b: number): number;
        }
        const sum: SumFunction = function (a: number, b: number): number {return a + b;
        }
        

    • (3) 对数组的接口控制：通过接口限制数组的索引和对应值的类型。

      • interface MyArray {[index: number]: string;  // 限制索引对应的值为 string 类型
        }
        // 使用示例
        let myArr: MyArray = ["a", "34"];
        myArr[3] = "asdf";
        // myArr["3"] = "cs"  // 错误：索引必须为数字类型
        

    • (4) 单继承和多继承：接口可以通过 extends 关键字实现单继承或多继承。

      • interface A extends B, C {// 接口内容
        }
        

  • （四）keyof 的使用

    • (1) 用于获取某个类型的所有键，返回一个联合类型。
    • (2) 用法示例：
      • 安全获取对象属性：

        interface MyObject {number: string;name: string;age: number;
        }
        const myObj: MyObject = {number: '28324',name: 'xiaoming',age: 23
        }
        function getProp(object: MyObject, props: keyof MyObject) {return object[props];
        }
        // 等价于限定 props 只能为 'number' | 'name' | 'age'
        

    • (3) 也可以用于实现类型映射，将一个类型中的所有属性转化为另一种形式。

  • （五）元组与数组

    • (1) 元组：长度固定，每个元素类型可以单独设置。

      • const arr: [number, string] = [23, 'nihao'];
        

    • (2) 数组：长度不固定，但所有元素类型必须一致。

      • const arr: number[] = [3, 34, 66];
        

  • （六）any 与 unknown 的区别

    • (1) any：具有赋值污染效应，赋值给其他类型时不会报错，但缺乏类型安全提示。
    • (2) unknown：不会发生赋值污染，需要先进行类型断言或检查后才能赋值，保障类型安全。

  • （七）避免 unknown 赋值报错

    • (1) 可使用 as 进行类型断言，将 unknown 类型转换为具体类型。
    • (2) 也可使用其他类型转换方法确保赋值的安全性。

  • （八）枚举类型

    • (1) 用于定义一组固定的常量，限制变量的取值范围。
    • (2) 枚举成员既可以通过名称，也可以通过对应的数字访问。

      • enum Direction {North,East,South,West
        }
        const myDirection: Direction = Direction.North;
        // 或者直接赋值数字
        const myDirection2: Direction = 0;
        

• 二、详细解析与总结

  • （一）关于 void 与 never

    • (1) void 类型：主要用于标注函数无返回值，但函数内部仍可能存在 return 语句，只是不返回任何值。
    • (2) never 类型：表明函数执行过程中不会正常结束，比如抛出错误或者进入无限循环，因而不会到达 return 语句。

  • （二）字面量类型与联合类型的灵活应用

    • (1) 可以通过限定变量的取值范围，避免传入不合法的值，提升代码的健壮性。
    • (2) 当多个固定值组合使用时，联合类型为代码提供了更高的灵活性和可读性。

  • （三）interface 的多重应用

    • (1) 对象类型定义：通过 interface 分离类型声明，使代码结构更清晰。
    • (2) 函数与数组控制：利用接口可以精确控制函数的参数、返回值以及数组中索引和值的类型。
    • (3) 继承机制：支持单继承和多继承，有效复用已有类型定义，减少代码重复。

  • （四）keyof 的深入使用

    • (1) 通过 keyof 可以动态获取对象的所有键，极大地增强了类型安全性和灵活性。
    • (2) 在类型映射和安全获取对象属性时，keyof 都发挥着重要作用。

  • （五）元组与数组的特点比较

    • (1) 元组：适用于固定长度和固定类型顺序的数据集合。
    • (2) 数组：适用于长度不定但类型一致的数据集合。

  • （六）any 与 unknown 的取舍

    • (1) any：使用时较为宽松，但可能会引发潜在的类型安全问题。
    • (2) unknown：需要进行明确的类型判断或断言，更适合在追求严格类型安全的场景下使用。

  • （七）如何避免 unknown 类型带来的赋值问题

    • (1) 使用类型断言（as）明确告知编译器变量实际类型，从而避免报错。
    • (2) 通过合理的类型检查，确保变量转换过程中的安全性。

  • （八）枚举类型的实际应用

    • (1) 枚举可以将一组相关的常量组织在一起，提高代码可读性和维护性。
    • (2) 枚举成员既能通过名称引用，也能通过对应的数值访问，提供了灵活的使用方式。

• 三、总结

  • 以上笔记涵盖了 TypeScript 中几种重要的类型和概念，从函数返回值的 void 与 never 区别，到字面量类型、联合类型以及接口的应用，再到 keyof、元组、数组、any 与 unknown 的区别，以及枚举类型的使用。
  • 理解并熟练运用这些知识点，有助于在编写 TypeScript 代码时实现更严格的类型检查，提高代码的健壮性和可维护性。