TypeScript大厂面试真题详解与练习

本文深入探讨了TypeScript的基础概念和高级特性，并提供了详细的代码示例。文章还涵盖了TypeScript在大厂面试中常见的真题类型和解题技巧，帮助读者了解如何应对面试中的各种挑战。文中详细解析了类型推断、泛型应用等常见面试题，并提供了具体的代码示例，为读者准备TypeScript大厂面试真题提供了全面的指导。

变量声明与类型推断

在TypeScript中，变量声明和类型推断是基础中的基础。TypeScript提供了两种声明变量的方式：let 和 const。let 用于声明可变变量，而 const 用于声明不可变变量。

变量声明

let age: number = 25;
const name: string = "John Doe";

类型推断

TypeScript具有强大的类型推断能力，编译器能够根据变量的初始值自动推断其类型。

let age = 25; // 编译器推断类型为 number
const name = "John Doe"; // 编译器推断类型为 string

函数定义与调用

函数定义在TypeScript中可以指定参数类型和返回值类型，这有助于开发人员更好地理解函数的行为和使用方法。

函数定义

function greet(name: string): string {
  return "Hello, " + name;
}

函数调用

let message: string = greet("John Doe");
console.log(message); // 输出: Hello, John Doe

接口与类的使用

接口定义了一组属性和方法的契约，而类用于实现这些接口，提供具体的实现细节。

接口定义

interface Person {
  name: string;
  age: number;
  greet(): void;
}

类实现接口

class Student implements Person {
  name: string;
  age: number;

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

  greet(): void {
    console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
  }
}

let student = new Student("John Doe", 25);
student.greet(); // 输出: Hello, my name is John Doe and I'm 25 years old

泛型的定义与应用

泛型允许创建可重用的组件，这些组件可以处理多种数据类型。

泛型定义

function identity<T>(arg: T): T {
  return arg;
}

泛型应用

let output = identity<string>("John Doe");
console.log(output); // 输出: John Doe

装饰器的使用

装饰器是一种特殊类型的声明，可以被附加到类声明、方法、访问符、属性或参数，用来修改或装饰它们的功能。

装饰器定义

function readonly<T>(target: any, key: string) {
  let value: T;
  Object.defineProperty(target, key, {
    get: () => value,
    set: (val: T) => {
      if (value !== undefined) {
        throw new Error(`Cannot reassign read-only property '${key}'`);
      }
      value = val;
    }
  });
}

装饰器应用

class Greeter {
  @readonly
  name: string;

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

const greeter = new Greeter("John Doe");
console.log(greeter.name); // 输出: John Doe
greeter.name = "Jane Doe"; // 抛出错误: Cannot reassign read-only property 'name'

常见面试题类型与解析

1. 类型推断与类型兼容性

   • 问题：解释TypeScript中的类型推断和兼容性。
   • 解析：TypeScript在定义变量时可以根据初始值自动推断类型。兼容性方面，一个类型可以赋值给另一个类型，前提是它们之间的类型关系符合TypeScript的类型转换规则。例如，一个具体的类型可以赋值给其泛型类型，但反过来则不行。
   • 示例代码：

     let num = 10; // 编译器推断类型为 number
     let anyVar: any = "Hello"; // any 类型可以赋值给任何类型，包括 number
     num = anyVar; // 会导致类型错误，因为 number 类型不能赋值给字符串

2. 泛型的应用
   • 问题：在TypeScript中，如何使用泛型创建一个函数，该函数可以接受任何类型的参数并返回相同类型的参数？
   • 解析：使用<T>(arg: T): T的方式定义一个泛型，这样函数可以处理任意类型的数据。
   • 示例代码：

     function identity<T>(arg: T): T {
     return arg;
     }
     let output = identity<string>("John Doe");
     console.log(output); // 输出: John Doe

面试题技巧与策略

• 理解基础概念：掌握TypeScript的基本概念，如变量声明、类型推断、接口和类等。
• 深入理解高级特性：熟悉泛型和装饰器等高级特性，这些知识在面试中常常被提及。
• 代码示例演示：准备一些代码示例，展示如何解决实际问题。例如，展示如何使用泛型处理不同类型的数据，或如何使用装饰器实现特定的功能。

模拟面试题库

1. 类型推断

   • 问题：解释类型推断的过程。
   • 示例代码：

     let num = 10; // 编译器推断类型为 number

2. 函数与泛型
   • 问题：如何使用泛型定义一个函数，该函数返回传入参数的类型？
   • 示例代码：

     function identity<T>(arg: T): T {
     return arg;
     }
     let output = identity<string>("John Doe");
     console.log(output); // 输出: John Doe

解题思路与代码示例

1. 解释类型推断的过程

   • 类型推断是TypeScript编译器根据变量的初始值自动推断其类型的过程。
   • 示例代码：

     let num = 10; // 编译器推断类型为 number

2. 使用泛型定义一个函数
   • 使用泛型可以创建一个函数，该函数可以处理多种类型的数据。
   • 示例代码：

     function identity<T>(arg: T): T {
     return arg;
     }
     let output = identity<string>("John Doe");
     console.log(output); // 输出: John Doe

小项目实战演练

实现一个简单的TypeScript项目，该项目包含一个用户登录功能。

用户登录功能

interface User {
  username: string;
  password: string;
}

class UserManager {
  private users: User[] = [];

  constructor() {
    this.users.push({ username: "JohnDoe", password: "123456" });
  }

  login(username: string, password: string): boolean {
    const user = this.users.find(u => u.username === username && u.password === password);
    return user !== undefined;
  }
}

const userManager = new UserManager();
console.log(userManager.login("JohnDoe", "123456")); // 输出: true

项目中常见问题与解决方案

1. 类型错误

   • 问题：在开发过程中，可能会遇到类型不匹配的错误。
   • 解决方案：仔细检查代码，确保所有变量和参数的类型都符合预期。
   • 示例代码：

     let num: number = 10;
     num = "Hello"; // 会导致类型错误，因为 number 类型不能赋值为字符串

2. 性能问题
   • 问题：在大型项目中，频繁的类型检查可能会导致性能下降。
   • 解决方案：合理使用类型注解，避免不必要的类型检查。可以使用any类型来忽略某些类型的检查，但需谨慎使用。
   • 示例代码：

     let anyVar: any = "Hello";
     anyVar = 10; // 使用 any 类型可以赋值为任意类型，但需谨慎

技术准备

• 复习基础知识：确保对TypeScript的基础概念有清晰的理解。
• 准备代码示例：准备一些典型的代码示例，展示你的编程能力。
• 模拟面试：通过模拟面试来练习，提升面试中的表现。
• 示例代码：

  function identity<T>(arg: T): T {
  return arg;
  }
  let output = identity<string>("John Doe");
  console.log(output); // 输出: John Doe

心理准备

• 保持自信：自信地回答问题，不要害怕犯错。
• 积极沟通：与面试官保持积极的沟通，展示你的团队协作能力。
• 保持冷静：保持冷静，不要被紧张或压力影响你的表现。

通过以上内容的学习和练习，你将能够更好地准备TypeScript相关的面试，并在实际工作中应用TypeScript编写高质量的代码。