github：https://github.com/Jessie-jzn
网站：https://www.jessieontheroad.com/

1. 为什么使用 TypeScript？

1。静态类型检查

TypeScript 的核心优势是其静态类型检查，这有助于在编译阶段而不是运行时捕获常见错误。这增强了代码的可靠性和稳定性。

2.增强的代码编辑体验

TypeScript 的类型系统可以在编辑器中实现更准确的代码补全、重构、导航和文档功能，从而显着提高开发效率。

3.提高代码可维护性

类型声明使理解代码意图和结构变得更容易，这在团队开发环境中特别有益。

4。高级语言功能

TypeScript 支持 JavaScript 中不存在的高级功能，例如接口、枚举和泛型，有助于开发更加结构化和可扩展的代码。

5。更好的工具支持

TypeScript 提供了各种编译器选项来优化生成的 JavaScript 代码，并通过将 TypeScript 编译为兼容的 JavaScript 来支持不同的 JS 环境。

2. TypeScript 与 JavaScript

3. TypeScript 中的基本数据类型

• 布尔值：代表真或假值。
• 数字：表示整数和浮点数。
• String：表示文本数据，使用单引号或双引号。
• Array：表示指定类型的值的集合，使用type[]或Array.
• 元组：表示一个包含固定数量指定类型元素的数组。
• Enum：表示一组命名常量。
• Any：表示任意类型的值。不提供类型检查。
• Void：表示没有值，常用作不返回值的函数的返回类型。
• Null 和 Undefined：分别表示没有值和未初始化状态。
• Never：表示永远不会出现的值，例如抛出错误或无限期运行的函数。
• Object：表示非原始类型。

4. TypeScript 中的泛型是什么？它们是如何使用的？

泛型允许函数、类和接口与任何类型一起使用，同时仍然强制执行类型安全。

例子：

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

const numberIdentity = identity(42);
const stringIdentity = identity("Hello");

在此示例中，恒等函数使用通用 ，允许它接受和返回任何类型的值。

5. TypeScript中unknown和any的区别

• any Type：表示任意类型的值并绕过所有类型检查。它可以被赋予任何值，无需类型检查。
• unknown Type：表示未知类型。未知类型的值在使用之前必须进行检查，这提供了一种更安全的方法来处理类型不确定的值。

let anyVar: any;
let unknownVar: unknown;

anyVar = 5;
anyVar.toUpperCase(); // No compile-time error, but might cause runtime error

unknownVar = "Hello";
if (typeof unknownVar === "string") {
  unknownVar.toUpperCase(); // Type check ensures safety
}

6. readonly修饰符与const关键字的区别

• readonly 修饰符：用于对象属性，使其在初始化后不可变。
• const 关键字：用于声明具有不可变引用的变量。对象的属性仍然可以修改。

const obj = { name: "John" };
obj.name = "Doe"; // Allowed

interface User {
  readonly id: number;
  name: string;
}

const user: User = { id: 1, name: "John" };
user.name = "Doe"; // Allowed
user.id = 2; // Error, `id` is readonly

7. TypeScript 中的装饰器

装饰器是一种特殊的 TypeScript 功能，允许添加元数据或修改类、方法、属性或参数。

类型：

• 类装饰器：应用于类构造函数以修改类行为或添加元数据。
• 方法装饰器：应用于方法以更改其行为或添加元数据。
• 访问器装饰器：用于获取或设置访问器以修改其行为。
• 属性装饰器：应用于类属性以添加元数据或修改其行为。
• 参数装饰器：应用于方法参数以添加元数据。

示例：

• 类装饰器：

function sealed(constructor: Function) {
  Object.seal(constructor);
  Object.seal(constructor.prototype);
}

@sealed
class Greeter {
  greeting: string;
  constructor(message: string) {
    this.greeting = message;
  }

  greet() {
    return `Hello, ${this.greeting}`;
  }
}

• 方法装饰器：

function logMethod(target: any, propertyName: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;
  descriptor.value = function (...args: any[]) {
    console.log(`Method ${propertyName} called with args: ${JSON.stringify(args)}`);
    return originalMethod.apply(this, args);
  };
}

class Calculator {
  @logMethod
  add(a: number, b: number): number {
    return a   b;
  }
}

用法：

装饰器通过在 tsconfig.json 中将experimentalDecorators设置为 true 来启用。

8. 接口和类型的区别

interface和type都是用来定义对象类型的，但是它们有一些区别：

这些问题和答案应该涵盖基本概念和实际用法，有助于为 TypeScript 面试做好准备。