2024前端面试准备之TypeScript篇（二）

温暖全栈
273 阅读5分钟

1. TypeScript中的装饰器是什么以及如何使用

装饰器是一种特殊的函数，用于修改或增强其他函数的功能。在TypeScript中，装饰器可以用于类、方法、属性和参数上。

装饰器使用特殊的语法符号@，后跟一个装饰器函数。装饰器函数可以接收不同的参数，具体取决于装饰器的类型。

以下是一些常见的装饰器用法：

  1. 类装饰器：用于修改或增强类的行为。可以在类定义之前使用@符号，后跟一个装饰器函数。装饰器函数接收一个参数，即被装饰的类的构造函数。可以在装饰器函数中修改类的原型、静态属性或方法等。
function classDecorator(constructor: Function) {
  // 修改类的行为
}

@classDecorator
class MyClass {
  // 类定义
}
  1. 方法装饰器：用于修改或增强类的方法。可以在方法定义之前使用@符号，后跟一个装饰器函数。装饰器函数接收三个参数：被装饰的类的原型、方法的名称和方法的属性描述符。可以在装饰器函数中修改方法的行为、添加额外的逻辑等。
function methodDecorator(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  // 修改方法的行为
}

class MyClass {
  @methodDecorator
  myMethod() {
    // 方法定义
  }
}
  1. 属性装饰器：用于修改或增强类的属性。可以在属性定义之前使用@符号，后跟一个装饰器函数。装饰器函数接收两个参数：被装饰的类的原型和属性的名称。可以在装饰器函数中修改属性的行为、添加额外的逻辑等。
function propertyDecorator(target: any, propertyKey: string) {
  // 修改属性的行为
}

class MyClass {
  @propertyDecorator
  myProperty: string;
}
  1. 参数装饰器：用于修改或增强函数或方法的参数。可以在参数定义之前使用@符号，后跟一个装饰器函数。装饰器函数接收三个参数：被装饰的函数或方法的原型、方法的名称和参数的索引。可以在装饰器函数中修改参数的行为、添加额外的逻辑等。
function parameterDecorator(target: any, propertyKey: string, parameterIndex: number) {
  // 修改参数的行为
}

class MyClass {
  myMethod(@parameterDecorator param: string) {
    // 方法定义
  }
}

2. ts中如何定义和使用自定义类型

在 TypeScript 中，可以使用 type 关键字来定义自定义类型。自定义类型可以是基本类型、联合类型、交叉类型、元组、枚举、接口等。

以下是一些定义和使用自定义类型的示例：

  1. 基本类型的自定义类型：
type MyString = string;
type MyNumber = number;
type MyBoolean = boolean;

let str: MyString = 'Hello';
let num: MyNumber = 10;
let flag: MyBoolean = true;
  1. 联合类型的自定义类型：
type MyUnion = string | number;

let value: MyUnion = 'Hello';
value = 10;
  1. 交叉类型的自定义类型：
type MyIntersection = { name: string } & { age: number };

let person: MyIntersection = { name: 'John', age: 20 };
  1. 元组的自定义类型：
type MyTuple = [string, number];

let tuple: MyTuple = ['Hello', 10];
  1. 枚举的自定义类型：
enum MyEnum {
  A = 'A',
  B = 'B',
  C = 'C',
}

let value: MyEnum = MyEnum.A;
  1. 接口的自定义类型：
interface MyInterface {
  name: string;
  age: number;
}

let person: MyInterface = { name: 'John', age: 20 };

3. 使用TypeScript中的常见问题和解决方案有哪些

  1. 类型错误：TS是静态类型语言，因此类型错误是常见的问题。解决方案是通过正确定义变量、函数和参数的类型，以及使用类型断言和类型保护来避免类型错误。

  2. 编译错误：在编译过程中，可能会遇到语法错误、找不到模块或无法解析的引用等问题。解决方案是检查代码中的语法错误，并确保所有的依赖项都已正确安装和配置。

  3. 异步操作：在处理异步操作时，可能会遇到回调地狱、异步错误处理等问题。解决方案是使用Promise、async/await或RxJS等技术来处理异步操作，使代码更加清晰和可读。

  4. 类型推断问题：有时，TS的类型推断可能不符合预期，导致错误或不完整的类型推断。解决方案是显式地指定类型，使用类型注解或使用更明确的类型声明来解决类型推断问题。

  5. 第三方库的类型定义：在使用第三方库时，可能会缺少类型定义文件（.d.ts），导致无法正确推断和使用库中的函数和类型。解决方案是查找或创建相应的类型定义文件，并将其与项目一起使用。

  6. 性能问题：在处理大型项目或复杂算法时，可能会遇到性能问题，如运行速度慢或内存占用过高。解决方案是使用性能优化技术，如缓存、节流和异步加载等，以提高代码的性能。

  7. 跨平台问题：如果需要在不同的平台上运行TS代码，可能会遇到平台差异和兼容性问题。解决方案是使用条件编译、平台特定的代码和适配器模式等技术来处理跨平台问题。

  8. 代码重构：在开发过程中，可能需要对代码进行重构以改善可读性、可维护性和性能。解决方案是使用TS提供的重构工具和技术，如重命名、提取函数和提取类型等，来优化代码结构。

avatar
文章
阅读
粉丝