Typescript精选面试题

Aniugel
115 阅读5分钟

TypeScript（简称 TS）是由微软开发的一种静态类型的编程语言，它是 JavaScript（JS）的超集，意味着所有合法的 JavaScript 代码都可以在 TypeScript 中运行，同时 TypeScript 增加了静态类型系统和其他增强特性，最终会被编译为 JavaScript 执行。无论是在浏览器环境下，还是在Node环境下，TypeScript程序都是不能直接运行的。

核心特性

  1. 静态类型系统

    • 类型标注：可以为变量、函数参数、返回值等显式声明类型，例如：

      let age: number = 25;
function add(a: number, b: number): number {
  return a + b;
}

    • 类型推断：若未显式声明类型，TS 会自动推断类型，减少冗余代码：

      let name = "Alice"; // 自动推断为 string 类型

    • 类型检查：在编译阶段（而非运行时）检测类型错误，提前规避潜在问题（如字符串与数字相加）。

  2. 增强的面向对象特性

    • 类（Class）与接口（Interface） ：支持类的继承、封装、多态，接口用于定义对象的结构规范：

      interface Person {
  name: string;
  age: number;
}
class Student implements Person {
  name: string;
  age: number;
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
}

    • 泛型（Generics） ：实现代码复用，支持多种类型的通用逻辑：

      function identity<T>(arg: T): T {
  return arg; // 适用于任意类型，且保证输入输出类型一致
}

  3. 高级类型特性

    • 联合类型（Union Types） ：允许变量为多种类型之一：let value: string | number;

    • 交叉类型（Intersection Types） ：合并多个类型的特性：type A = { x: number } & { y: string };

    • 类型守卫（Type Guards） ：在运行时判断类型，细化类型范围：

      function isString(value: unknown): value is string {
  return typeof value === "string";
}

  4. 与 JavaScript 的兼容性

    • 可以直接引入 JavaScript 库，通过类型声明文件（.d.ts）  为无类型的 JS 库提供类型支持（如使用@types/react为 React 添加类型）。
    • 编译产物是纯 JavaScript，可运行在任何支持 JS 的环境（浏览器、Node.js 等）。

工作流程

  1. 编写 TypeScript 代码（.ts 或.tsx 文件）。
  2. 通过 TypeScript 编译器（tsc）将代码编译为 JavaScript（.js 文件），编译时会进行类型检查。
  3. 运行编译后的 JavaScript 代码。

优势

  • 更早发现错误：静态类型检查减少运行时错误，尤其适合大型项目。
  • 提升代码可维护性：类型标注使代码自文档化，便于团队协作和重构。
  • 增强 IDE 支持：VS Code 等工具可基于类型提供智能提示、自动补全和重构建议。
  • 渐进式 adoption：可逐步将 JavaScript 项目迁移到 TypeScript，无需一次性重写。

应用场景

  • 大型前端项目（如 React、Vue、Angular 框架开发）。
  • Node.js 后端开发，提升服务端代码的可靠性。
  • 需要强类型约束的团队协作项目。

总结

TypeScript 通过静态类型系统解决了 JavaScript 的动态类型带来的维护性和可靠性问题，同时保留了 JavaScript 的灵活性。它已成为现代前端开发的主流选择，尤其在中大型项目中能显著提升开发效率和代码质量。

基础概念

  1. TypeScript 是什么？与 JavaScript 的主要区别？

    • 答案：TypeScript 是 JavaScript 的超集，添加了静态类型、接口、泛型等特性，需编译为 JS 运行。区别在于 TS 支持编译时类型检查，JS 仅在运行时发现类型错误；TS 支持面向对象特性（类、接口、继承），JS 需通过原型链实现；TS 提供更好的开发工具支持，如自动补全、重构等。

  2. 类型声明与类型推断的区别？

    • 答案：类型声明是显式指定变量类型，如let x: number = 10;；类型推断是 TS 根据赋值自动推断类型，如let y = 20;，TS 会自动推断y为number类型。

类型系统

  1. any和unknown类型的区别？

    • 答案：any类型可以绕过类型检查，适用于兼容旧代码，但会失去 TS 的类型安全优势，如let a: any = "hello"; a.toFixed();不会报错，但运行时可能出错。unknown类型需要通过类型断言或类型守卫缩小类型范围后才能使用其具体方法，如let b: unknown = "world"; (b as string).toUpperCase();。

  2. 接口与类型别名的区别？

    • 答案：接口主要用于描述对象结构，支持声明合并，多次定义会自动扩展；类型别名可为任意类型命名，包括联合、交叉、元组等类型，不支持合并。例如，interface Person { name: string; }，type ID = string | number;。

  3. 联合类型与交叉类型的区别？

    • 答案：联合类型如string | number，表示变量可以是多种类型中的一种；交叉类型如A & B，表示变量需要同时满足两种类型的结构。

高级特性

  1. 泛型的作用及示例？

    • 答案：泛型用于创建可复用的组件，保持类型安全。例如，function identity<T>(arg: T): T { return arg; }，可以通过let output = identity<string>("hello");显式指定类型，也可以通过let inferred = identity(42);自动推断类型。

  2. 枚举与常量枚举的区别？

    • 答案：普通枚举编译后会生成对象，允许计算值；常量枚举在编译时会被删除，仅允许常量成员，能提升性能。如enum Color { Red, Green }是普通枚举，const enum Direction { Up, Down }是常量枚举。

  3. 类型守卫的作用及实现方式？

    • 答案：类型守卫的作用是缩小条件块中的变量类型范围。常用的实现方式有使用typeof、instanceof，以及自定义类型谓词函数（is语法）。例如，function isString(val: unknown): val is string { return typeof val === "string"; }。

工程化与配置

  1. 如何处理可空类型？

    • 答案：使用联合类型T | null | undefined，结合可选链操作符（?.）和非空断言（!）。例如，let name: string | null = null; console.log(name?.toUpperCase());。

  2. tsconfig.json中的关键配置项有哪些？

    • 答案：strict用于启用所有严格类型检查，如strictNullChecks；target指定编译目标，如ES6；module指定模块系统，如CommonJS、ESNext等。

其他

  1. 装饰器的应用场景？

    • 答案：用于扩展类、方法、属性等，常见于框架中。例如，类装饰器可以修改类构造函数，方法装饰器可以拦截方法调用，如@sealed class Greeter { /*... */ }。

  2. 模块与命名空间的区别？

    • 答案：模块基于文件，使用import/export进行导入和导出，适用于现代工程；命名空间用于逻辑分组代码，避免全局污染，逐渐被模块替代。
avatar
文章
阅读
粉丝