当前位置：首页 > article >正文

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

article 2025/2/7 4:30:48

                    
                        
                    
                     一、知识点总结 
   （一）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 代码时实现更严格的类型检查，提高代码的健壮性和可维护性。
 

                