前端面试题（TypeScript篇）

前端面试题（TypeScript篇）

1、TypeScript 中的原始类型有哪些 ？

在TypeScript中，原始类型指的是最基本的数据类型，包括以下几种：

1. number：表示数字，可以是整数或浮点数。
2. string：表示文本数据，使用单引号（'）或双引号（"）来表示字符串。
3. boolean：表示逻辑值，只能取两个值之一：true或false。
4. null：表示一个空值或不存在的值。
5. undefined：表示一个未定义的值。
6. symbol：表示唯一的、不可变的值，通常用于对象属性的键。
7. bigint：表示任意精度的整数，通常用于处理大整数。

2、说说数组在 TypeScript 中是如何工作的 ？

在TypeScript中，数组是一种特殊的数据结构，用于存储一组相同类型的数据。以下是关于数组在TypeScript中的工作方式的一些重要概念：

1. 类型注解：可以使用类型注解声明数组的类型。例如，number[]表示一个包含数字的数组，string[]表示一个包含字符串的数组。

   let numbers: number[] = [1, 2, 3, 4, 5];
   let strings: string[] = ["apple", "banana", "orange"];
   

2. 泛型数组：TypeScript还支持泛型，因此可以使用Array<T>语法声明数组，其中T是数组中元素的类型。

   let numbers: Array<number> = [1, 2, 3, 4, 5];
   let strings: Array<string> = ["apple", "banana", "orange"];
   

3. 数组元素访问：可以使用索引来访问数组的元素。数组的索引从0开始，例如，arr[0]表示数组的第一个元素。

   let numbers: number[] = [1, 2, 3, 4, 5];
   console.log(numbers[0]); // 输出: 1
   

4. 数组方法：TypeScript支持使用JavaScript中的数组方法，如push、pop、splice等。这些方法可以用于在数组中添加、删除或修改元素。

   let numbers: number[] = [1, 2, 3];
   numbers.push(4); // 添加元素
   numbers.pop(); // 删除最后一个元素
   

5. 数组迭代：可以使用for循环、forEach方法或for...of循环来迭代数组中的元素。

   let numbers: number[] = [1, 2, 3, 4, 5];
   
   // 使用for循环
   for (let i = 0; i < numbers.length; i++) {
       console.log(numbers[i]);
   }
   
   // 使用forEach方法
   numbers.forEach(num => console.log(num));
   
   // 使用for...of循环
   for (let num of numbers) {
       console.log(num);
   }
   

3、什么是 any 类型，何时使用 ？

在TypeScript中，any类型表示任意类型。当一个变量被标记为any类型时，它可以存储任何类型的值，且不进行类型检查。换句话说，使用any类型可以绕过TypeScript的类型检查机制，允许变量在编译时具有任何类型。

any类型通常在以下情况下使用：

1. 逐步迁移：当在一个已有的JavaScript项目中引入TypeScript时，可以将类型逐步迁移。在迁移过程中，可以将原有的JavaScript代码标记为any类型，以便快速进行编译，并且逐步为这些变量添加更具体的类型注解。

   let myVariable: any = someJavaScriptFunction(); // 逐步迁移中的代码
   

2. 动态类型：当无法确定变量的类型时，可以将其声明为any类型。例如，当从动态数据源（如用户输入或第三方API）获取数据时，数据类型可能是多样的，此时可以使用any类型。

   let dynamicData: any = fetchDataFromAPI();
   

3. 与动态语言交互：在与动态语言（如JavaScript）交互的过程中，使用any类型可以更灵活地处理数据，因为动态语言的特性使得数据类型不确定。

   // 与JavaScript库交互
   declare var externalLibrary: any;
   let result: any = externalLibrary.someFunction();
   

尽管any类型提供了灵活性，但过度使用它可能会削弱TypeScript的类型安全性，因为它会绕过类型检查，使得在编译时无法捕获潜在的类型错误。因此，建议在必要时使用any类型，但尽量避免过度依赖它，而是尽可能地为变量添加更具体的类型注解，以提高代码的可维护性和可读性。

4、如何书写带有类型注释的函数 ？

在TypeScript中，可以使用类型注释来为函数的参数、返回值和函数本身添加类型信息。下面是书写带有类型注释的函数的示例：

// 使用类型注释为参数和返回值添加类型信息
function add(x: number, y: number): number {
    return x + y;
}

// 使用类型注释为函数本身添加类型信息
let subtract: (x: number, y: number) => number;
subtract = function(x: number, y: number): number {
    return x - y;
};

在这个示例中，我们定义了两个函数：

1. add函数接受两个参数x和y，它们的类型都是number，并且add函数返回值的类型也被标注为number。
2. subtract函数是一个变量，它的类型被声明为一个接受两个number类型参数并返回number类型值的函数。

5、如何在 TypeScript 中创建对象 ？

在TypeScript中创建对象可以使用以下几种方式：

1. 对象字面量：使用对象字面量语法直接创建对象。

let person = {
    name: "John",
    age: 30,
    isAdmin: false
};

2.使用构造函数：使用构造函数创建对象，可以通过new关键字实例化对象。

class Person {
    name: string;
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }
}

let person = new Person("John", 30);

3.使用类型注释创建对象：在创建对象时使用类型注释指定对象的类型。

type Person = {
    name: string;
    age: number;
};

let person: Person = {
    name: "John",
    age: 30
};

4.使用类型断言：在创建对象时使用类型断言指定对象的类型。

let person = {
    name: "John",
    age: 30
} as Person;

6、如何在 TypeScript 中指定可选属性 ？

在TypeScript中指定可选属性有两种常见的方法：

1. 使用问号：在属性名称后面添加问号?来表示该属性是可选的。

typescriptCopy codetype Person = {
    name: string;
    age?: number; // 可选属性
};

let person1: Person = {
    name: "John",
    age: 30
};

let person2: Person = {
    name: "Alice"
};

在上面的示例中，age属性被标记为可选的，因此在创建person2对象时可以选择不指定age属性。

1. 使用类型注释：在定义对象时，使用类型注释为可选属性添加undefined类型。

typescriptCopy codetype Person = {
    name: string;
    age: number | undefined; // 可选属性
};

let person1: Person = {
    name: "John",
    age: 30
};

let person2: Person = {
    name: "Alice",
    age: undefined // 或者不指定age属性
};

在这种方法中，age属性的类型被声明为number | undefined，表示它可以是一个数字或者undefined。因此，在创建person2对象时可以将age属性设置为undefined，或者根本不指定它。

7、说说枚举在 TypeScript 中是如何工作的 ？

在TypeScript中，枚举（Enumeration）是一种用于表示一组命名常量集合的数据类型。枚举允许我们使用易于理解和记忆的符号来代替数字或字符串。

枚举在TypeScript中的工作方式如下：

1. 定义枚举：可以使用enum关键字来定义枚举。枚举成员可以是数字、字符串或计算值。

enum Direction {
    Up,
    Down,
    Left,
    Right
}

2.访问枚举成员：枚举成员可以通过枚举名称加上成员名称来访问。

let up = Direction.Up;
console.log(up); // 输出: 0

3.指定枚举成员的值：可以为枚举成员指定具体的值。如果未指定值，则默认从0开始自增。

enum Direction {
    Up = 1,
    Down = 2,
    Left = 3,
    Right = 4
}

​ 4.反向映射：TypeScript会为数字枚举生成反向映射，允许根据枚举值获取枚举名称。

enum Direction {
    Up,
    Down,
    Left,
    Right
}

let up = Direction.Up;
let upString = Direction[up];
console.log(upString); // 输出: "Up"

​ 5.字符串枚举：枚举成员可以是字符串。字符串枚举不能具有自增的行为，每个成员必须具有显式的初始值。

enum Color {
    Red = "RED",
    Green = "GREEN",
    Blue = "BLUE"
}

​ 6.异构枚举：枚举可以混合字符串和数字成员。但是，这种使用方式不太常见，应谨慎使用。

enum Mixed {
    A = 1,
    B = "B",
    C = 2
}

枚举在TypeScript中提供了一种方便的方式来定义一组相关的命名常量，使代码更具有可读性和可维护性。

8、什么是参数解构 ？

参数解构是一种在函数参数中使用解构赋值的技术。通过参数解构，可以将一个对象或数组解构为单独的变量，然后将这些变量作为函数的参数传递。这种方式可以使代码更简洁、更易读。

在JavaScript和TypeScript中，参数解构可以用于函数定义或箭头函数的参数列表中。

以下是一个简单的例子，演示了如何在函数参数中使用参数解构：

// 使用对象解构作为函数参数
function printUserInfo({ name, age }: { name: string, age: number }) {
    console.log(`Name: ${name}, Age: ${age}`);
}

let user = { name: "John", age: 30 };
printUserInfo(user); // 输出: Name: John, Age: 30

// 使用数组解构作为函数参数
function printNumbers([x, y, z]: number[]) {
    console.log(`x: ${x}, y: ${y}, z: ${z}`);
}

let numbers = [1, 2, 3];
printNumbers(numbers); // 输出: x: 1, y: 2, z: 3

9、TypeScript 支持静态类吗 ？为什么 ？

在TypeScript中，类可以包含静态成员，但TypeScript本身并不直接支持静态类（即所有成员都是静态的类）。静态成员是指可以直接通过类名访问的成员，而不需要实例化类。这种静态成员可以是静态属性或静态方法。

例如，在TypeScript中，可以通过static关键字将成员声明为静态成员，如下所示：

class MyClass {
    static myStaticProperty: number = 10;
    static myStaticMethod() {
        console.log("This is a static method.");
    }
}

// 访问静态属性
console.log(MyClass.myStaticProperty); // 输出: 10

// 调用静态方法
MyClass.myStaticMethod(); // 输出: This is a static method.

虽然TypeScript中支持静态成员，但并不支持完全的静态类。这是因为静态类的概念并不常见，通常静态成员是类的一部分，而不是类本身。静态成员允许在不创建类的实例的情况下使用类的功能，这在某些情况下非常有用，比如实现单例模式、工具类等。

总的来说，TypeScript支持静态成员，但不支持完全的静态类。静态成员是一种常见的模式，有助于组织和管理代码，提高代码的可读性和可维护性。