TS面试题详解：新手入门必看指南

概述

本文全面介绍了TypeScript的基础概念、类型系统、高级特性和常见面试题，帮助开发者深入理解TS的特性和应用场景。文章详细解析了TS的类型推断、接口与类型别名的区别以及泛型和装饰器的应用，并提供了丰富的代码示例和面试题解析，助力开发者在面试中取得优异表现。此外，文章还分享了TS的最佳实践和推荐资源，帮助开发者更好地在项目中应用TS。文中涵盖了TS面试题的相关内容，帮助读者全面准备TS相关的技术面试。

TS基础概念介绍 什么是TypeScript

TypeScript 是 JavaScript 的一个超集，由微软开发。它在 JavaScript 的基础上增加了静态类型检查的特性，使得开发者可以在开发过程中捕获到潜在的错误，从而提升代码的质量和可维护性。TypeScript 的语法和标准 JavaScript（ES6 及以上版本）兼容，这意味着任何合法的 JavaScript 代码也是合法的 TypeScript 代码。

TypeScript 的主要特性包括但不限于：

• 静态类型检查：允许开发者为变量、函数参数和返回值指定类型。
• 面向对象编程：支持类、接口、继承、封装、多态等面向对象的特性。
• 泛型：支持泛型类型和函数，使得代码更加灵活和可重用。
• 模块化：支持 ES6 模块的导入导出，使得代码可以更好地组织和管理。
• 装饰器：支持装饰器模式，可以对类和成员进行增强和扩展。

TypeSystem基础

变量与类型

TypeScript 通过类型系统来确保代码的正确性。以下是一些常用的基本类型：

• 基本类型：
  • number：数字类型，包括整数和浮点数。
  • string：字符串类型。
  • boolean：布尔类型，值为true或false。
  • undefined：未定义类型。
  • null：空值类型。
    .
• 任何类型：any：任意类型，可以是任何值。
• 无返回值类型：void：函数没有返回值时的类型。

• 永不返回类型：never：函数抛出错误或者无限循环时的类型。

• 复杂类型：
  • array：数组类型，例如number[]表示一个数字数组。
  • object：对象类型，例如{}表示一个空对象。
  • tuple：元组类型，例如[string, number]表示一个包含字符串和数字的数组。
  • enum：枚举类型，用于定义一组命名的常量。

示例：

let age: number = 25;
let name: string = "Alice";
let isApproved: boolean = true;
let undefinedValue: undefined = undefined;
let nullValue: null = null;
let anyValue: any = "Hello";
let voidValue: void = undefined; // 也可以是 null
let neverValue: never = (() => { throw new Error("Error"); })(); // 抛出错误

let numbers: number[] = [1, 2, 3];
let ages: Array<number> = [10, 20, 30]; // 使用泛型数组

let tuple: [string, number] = ["TypeScript", 2015];
let genericTuple: [string, number, boolean] = ["TypeScript", 2015, true];

enum Status { Pending, Approved, Rejected }
let status: Status = Status.Approved;

接口与类型

接口和类型在 TypeScript 中用于定义对象的结构，区别在于接口更多用于描述对象的形状，而类型则可以更加灵活地定义对象的结构。

• 接口：
  • 接口定义了对象的形状，可以用来描述对象必须包含的属性和方法。
  • 接口可以被扩展，实现多态。
  • 接口可以用于类的实现，确保类实现了接口定义的所有成员。

示例：

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

let alice: Person = {
  name: "Alice",
  age: 25,
  greet() {
    return "Hello, my name is " + this.name;
  }
};

• 类型别名：
  • 类型别名用于定义复杂类型的别名，使得代码更容易阅读和维护。
  • 类型别名可以用于定义联合类型、元组类型等。

示例：

type Name = string;
type NameResolver = () => string;
type NameOrResolver = Name | NameResolver;

let getName: NameOrResolver = "TypeScript";

interface Named {
  name: string;
}

type NamedResolver = (resolve: (name: string) => void) => void;

function printName(obj: Named) {
  console.log(obj.name);
}

printName({ name: "Alice" });

接口与类型的区别

接口和类型虽然在某些情况下可以互换，但它们有一些重要的区别：

• 定义方式：

  • 接口使用interface关键字定义。
  • 类型别名使用type关键字定义。

• 方法定义：

  • 接口可以定义方法。
  • 类型别名不能定义方法，但可以通过类型别名来定义函数类型。
• 继承和组合：
  • 接口可以被扩展，实现多态。
  • 类型别名可以通过联合类型来组合多种类型。

示例：

interface Person {
  name: string;
  age: number;
}

interface Named {
  name: string;
}

interface PartialPerson extends Person, Named {
  name: string;
  age: number;
  // 可以添加新属性
  id: number;
}

let alice: PartialPerson = {
  name: "Alice",
  age: 25,
  id: 123
};

type Name = string;
type NameOrNumber = Name | number;

let getName: NameOrNumber = "TypeScript";

通过理解这些基本概念，开发者可以更好地利用 TypeScript 的类型系统来提升代码的质量和可维护性。

TS常见面试问题解析 类型推断与类型定义

类型推断

TypeScript 编译器会根据代码的上下文自动推断变量的类型。这意味着在很多情况下，开发者不需要手动为变量指定类型，编译器会根据变量的值或使用的上下文自动推断出类型。

示例：

let age = 25; // 编译器推断为 number 类型
let name = "Alice"; // 编译器推断为 string 类型
let isApproved = true; // 编译器推断为 boolean 类型
let anyValue = "Hello"; // 编译器推断为 any 类型
let voidValue = undefined; // 编译器推断为 void 类型

类型定义

在某些情况下，手动指定变量的类型可以提升代码的可读性和可维护性。例如，当变量的类型不能被编译器准确推断时，或者希望明确地定义变量的类型以提高代码的可读性。

示例：

let age: number = 25;
let name: string = "Alice";
let isApproved: boolean = true;
let anyValue: any = "Hello";
let voidValue: void = undefined;
let nullValue: null = null;

接口与类型的区别

定义方式

• 接口：

  • 使用interface关键字定义。
  • 通常用于描述对象的形状，定义类的结构。
• 类型别名：
  • 使用type关键字定义。
  • 通常用于定义复杂类型的别名，定义联合类型等。

示例：

interface Person {
  name: string;
  age: number;
}

type Name = string;
type NameOrNumber = Name | number;

方法定义

• 接口：

  • 可以定义方法。
  • 例如：

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

• 类型别名：
  • 不能直接定义方法，但可以通过类型别名来定义函数类型。
  • 例如：

    type NameResolver = () => string;

继承与组合

• 接口：

  • 可以被扩展，实现多态。
  • 例如：

    
    interface Named {
    name: string;
    }

  interface PartialPerson extends Named {
  age: number;
  id: number;
  }

• 类型别名：
  • 可以通过联合类型来组合多种类型。
  • 例如：

    type NameOrNumber = Name | number;

通过理解这些区别，开发者可以更好地利用 TypeScript 的接口和类型别名来编写更清晰和可维护的代码。

TS高级特性介绍 泛型的应用

泛型定义

泛型允许开发者编写可重用的代码，可以在不同的类型之间进行操作。通过泛型，可以定义函数、接口和类，使得它们可以处理多种数据类型而不需要具体的类型信息。

示例：

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

let age = identity<number>(25); // 使用 number 类型
let name = identity<string>("Alice"); // 使用 string 类型
let isApproved = identity<boolean>(true); // 使用 boolean 类型

interface GenericIdentityFn<T> {
  (arg: T): T;
}

let idFn: GenericIdentityFn<number> = identity;

泛型约束

有时需要对泛型的类型进行约束，以确保泛型在特定的上下文中可用。可以通过在泛型定义中添加类型参数来实现泛型约束。

示例：

function getProperty<T, K extends keyof T>(obj: T, key: K) {
  return obj[key];
}

let o = { a: 10, b: "hello" };
getProperty(o, "a"); // 10
getProperty(o, "b"); // "hello"
getProperty(o, "c"); // 错误，"c" 不是 o 的属性

泛型接口

泛型接口可以定义泛型成员，使得接口可以应用于多种类型的数据。

示例：

interface GenericIdentityFn<T> {
  (arg: T): T;
}

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

let identityFn: GenericIdentityFn<number> = identity;

泛型类

泛型类可以定义泛型成员，使得类可以应用于多种类型的数据。

示例：

class GenericNumber<T> {
  zeroValue: T;
  add: (x: T, y: T) => T;

  constructor(zeroValue: T, add: (x: T, y: T) => T) {
    this.zeroValue = zeroValue;
    this.add = add;
  }
}

let myGenericNumber = new GenericNumber<number>(0, (x, y) => x + y);
console.log(myGenericNumber.add(10, 20)); // 30

let stringGenericNumber = new GenericNumber<string>("", (x, y) => x + y);
console.log(stringGenericNumber.add("Hello, ", "TypeScript")); // "Hello, TypeScript"

泛型类型别名

泛型类型别名可以定义泛型类型，使得类型别名可以应用于多种类型的数据。

示例：

type GenericIdentityFn<T> = (arg: T) => T;

let identity: GenericIdentityFn<number> = (n: number) => n;
let id = identity(42);

通过泛型的应用，开发者可以编写更通用和灵活的代码，提升代码的重用性。

装饰器的作用

装饰器定义

装饰器是一种特殊类型的声明，可以附加到类声明、方法、访问符、属性或参数。装饰器使用@expression的形式，expression在运行时将被调用，它的返回值将被用作装饰器函数。装饰器函数的返回值将作为装饰的对象。

示例：

function readonly(target: any, key: string) {
  let value: any = target[key];
  let getter = function() {
    return value;
  };
  let setter = function(newValue: any) {
    if (value === newValue) {
      return;
    }
    throw new Error("Can't change readonly property");
  };
  Object.defineProperty(target, key, {
    get: getter,
    set: setter
  });
}

class Person {
  @readonly
  name: string;
}

let person = new Person();
person.name = "Alice"; // 抛出错误，不能修改 readonly 属性
let name = person.name; // 可以读取属性

装饰器的分类

装饰器可以分为多种类型，包括但不限于：

• 类装饰器：

  • 用于装饰类声明。
  • 语法：@decorator

• 方法装饰器：

  • 用于装饰成员函数。
  • 语法：@decorator

• 访问修饰符装饰器：

  • 用于装饰访问修饰符。
  • 语法：@decorator
• 属性装饰器：
  • 用于装饰属性。
  • 语法：@decorator

装饰器的应用场景

• 日志：

  • 可以在函数执行前后记录日志信息。
  • 例如：

    
    function log(target: any, name: string, descriptor: PropertyDescriptor) {
    let original = descriptor.value;
    descriptor.value = function(...args: any[]) {
    console.log("Calling method:", name);
    let result = original.apply(this, args);
    console.log("Method", name, "result:", result);
    return result;
    };
    }

  class Math {
  @log
  sum(a: number, b: number) {
  return a + b;
  }
  }

  let math = new Math();
  math.sum(1, 2); // 输出日志

• 验证：

  • 可以在属性或方法执行前后进行验证。
  • 例如：

    
    function validate(target: any, name: string, descriptor: PropertyDescriptor) {
    let original = descriptor.value;
    descriptor.value = function(...args: any[]) {
    if (args[0] < 0) {
      throw new Error("Invalid negative value");
    }
    return original.apply(this, args);
    };
    }

  class Math {
  @validate
  sum(a: number, b: number) {
  return a + b;
  }
  }

  let math = new Math();
  math.sum(1, 2); // 正常执行
  math.sum(-1, 2); // 抛出错误

• 性能监控：

  • 可以在函数执行前后记录执行时间。
  • 例如：

    
    function profile(target: any, name: string, descriptor: PropertyDescriptor) {
    let original = descriptor.value;
    descriptor.value = function(...args: any[]) {
    let startTime = Date.now();
    let result = original.apply(this, args);
    let endTime = Date.now();
    console.log(`Method ${name} took ${endTime - startTime} ms`);
    return result;
    };
    }

  class Math {
  @profile
  sum(a: number, b: number) {
  return a + b;
  }
  }

  let math = new Math();
  math.sum(1, 2); // 输出执行时间

通过装饰器的应用，开发者可以编写更灵活和可扩展的代码，提升代码的可维护性和扩展性。

TS最佳实践分享 项目中如何使用TS

基本步骤

1. 安装 TypeScript：

   • 通过 npm 安装 TypeScript：

     npm install -g typescript

   • 在项目中安装 TypeScript：

     npm install --save-dev typescript

2. 配置 tsconfig.json：

   • 在项目根目录下创建tsconfig.json文件，配置编译选项：

     {
     "compilerOptions": {
      "target": "es6",
      "module": "commonjs",
      "strict": true,
      "esModuleInterop": true,
      "skipLibCheck": true,
      "forceConsistentCasingInFileNames": true,
      "outDir": "./dist"
     },
     "include": ["src/**/*.ts"],
     "exclude": ["node_modules", "dist"]
     }

3. 编写 TypeScript 代码：

   • 在src目录下编写 TypeScript 代码。

4. 编译代码：

   • 使用tsc命令编译代码：

     npx tsc

5. 运行项目：
   • 编译后的代码位于dist目录下，可以运行这些代码。

集成到现有项目

如果已经有一个 JavaScript 项目，可以通过以下步骤将其转换为 TypeScript 项目：

1. 安装 TypeScript：

   • 通过 npm 安装 TypeScript：

     npm install --save-dev typescript

2. 创建 tsconfig.json：

   • 在项目根目录下创建tsconfig.json文件，配置编译选项：

     {
     "compilerOptions": {
      "target": "es6",
      "module": "commonjs",
      "strict": true,
      "esModuleInterop": true,
      "skipLibCheck": true,
      "forceConsistentCasingInFileNames": true,
      "outDir": "./dist"
     },
     "include": ["src/**/*.ts"],
     "exclude": ["node_modules", "dist"]
     }

3. 转换现有代码：

   • 将现有的 JavaScript 文件重命名为.ts文件，并添加类型声明。
4. 编译代码：
   • 使用tsc命令编译代码：

     npx tsc

使用 TypeScript 的好处

• 静态类型检查：在编译阶段捕获类型错误，提升代码质量和可维护性。
• 代码可读性：明确的类型声明使得代码更容易阅读和理解。
• 重构支持：类型检查器可以更好地支持代码重构，减少重构过程中的错误。
• IDE 支持：集成到 IDE 中，提供代码高亮、自动补全等功能。

常用插件和工具

• TypeScript 插件：

  • VSCode：Visual Studio Code 提供了强大的 TypeScript 插件，支持代码补全、错误提示等功能。
  • WebStorm：WebStorm 也提供了 TypeScript 插件，支持代码补全、智能提示等功能。

• 构建工具：

  • Webpack：通过 TypeScript 插件支持 TypeScript 代码的编译和打包。
  • Rollup：通过 TypeScript 插件支持 TypeScript 代码的编译和打包。
  • Gulp：通过 TypeScript 插件支持 TypeScript 代码的编译和打包。
• TS 验证工具：
  • TSLint：用于格式化和验证 TypeScript 代码的工具。
  • ESLint：通过 TypeScript 插件支持 TypeScript 代码的格式化和验证。

代码示例

// src/index.ts
function add(a: number, b: number): number {
  return a + b;
}

console.log(add(1, 2)); // 输出 3

通过这些步骤和工具的使用，开发者可以更好地利用 TypeScript 的优势，提升项目的开发效率和代码质量。

工具与插件推荐

TypeScript 插件

VSCode

VSCode 是目前广泛使用的代码编辑器，支持 TypeScript 插件，可以提供代码补全、错误提示等功能。以下是一些常用的 TypeScript 插件：

• TypeScript Hero：提供更高级的类型补全和重构功能。
• TypeScript Importer：自动导入 TypeScript 模块。
• TypeScript Extension Pack：包含多个 TypeScript 插件，提供丰富的 TypeScript 支持。

WebStorm

WebStorm 是一款功能强大的代码编辑器，支持 TypeScript 插件，可以提供代码补全、智能提示等功能。以下是一些常用的 TypeScript 插件：

• TypeScript Plugin：官方提供的 TypeScript 插件，支持 TypeScript 语法高亮和智能提示。
• TypeScript Enhancements：提供更高级的 TypeScript 支持，包括代码重构和快速修复。

构建工具

Webpack

Webpack 是一个强大的模块打包工具，通过 TypeScript 插件支持 TypeScript 代码的编译和打包。以下是一些常用的 TypeScript 插件：

• ts-loader：将 TypeScript 代码编译为 JavaScript 代码。
• awesome-typescript-loader：支持 TypeScript 代码的编译和打包，提供更高级的 TypeScript 支持。
• fork-ts-checker-webpack-plugin：提供 TypeScript 代码的类型检查功能。

Rollup

Rollup 是一个模块打包工具，通过 TypeScript 插件支持 TypeScript 代码的编译和打包。以下是一些常用的 TypeScript 插件：

• rollup-plugin-typescript2：将 TypeScript 代码编译为 JavaScript 代码。
• tslib：提供 TypeScript 代码的编译和打包，支持 TypeScript 2.x 版本。
• rollup-plugin-tsup：提供 TypeScript 代码的编译和打包，支持 TypeScript 3.x 版本。

Gulp

Gulp 是一个任务运行器，通过 TypeScript 插件支持 TypeScript 代码的编译和打包。以下是一些常用的 TypeScript 插件：

• gulp-typescript：将 TypeScript 代码编译为 JavaScript 代码。
• tsify：将 TypeScript 代码编译为 JavaScript 代码。
• gulp-tsc：通过 tsc 命令编译 TypeScript 代码。

TS 验证工具

TSLint

TSLint 是一个通过静态分析来验证 TypeScript 代码的工具，可以格式化和验证 TypeScript 代码。以下是一些常用的 TSLint 插件：

• tslint：官方提供的 TSLint 工具，支持 TypeScript 代码的格式化和验证。
• tslint-config-standard：提供一组标准的 TSLint 规则，用于验证 TypeScript 代码。
• tslint-eslint-rules：将 ESLint 规则转换为 TSLint 规则，提供更丰富的 TypeScript 代码验证功能。

ESLint

ESLint 是一个通过静态分析来验证 JavaScript 代码的工具，通过 TypeScript 插件支持 TypeScript 代码的格式化和验证。以下是一些常用的 ESLint 插件：

• @typescript-eslint/parser：将 TypeScript 代码解析为 AST 树，支持 TypeScript 代码的格式化和验证。
• @typescript-eslint/eslint-plugin：提供 TypeScript 代码的格式化和验证功能，支持 ESLint 规则。
• @typescript-eslint/eslint-plugin-tslint：将 TSLint 规则转换为 ESLint 规则，提供更丰富的 TypeScript 代码验证功能。

通过这些工具和插件的使用，开发者可以更好地利用 TypeScript 的优势，提升项目的开发效率和代码质量。

TS面试准备技巧 面试常见问题汇总

基础概念

• 什么是TypeScript？
• TypeScript 和 JavaScript 的区别是什么？
• TypeScript 的类型系统有哪些特点？

类型系统

• 什么是类型推断？
• 解释一下类型别名和接口的区别。
• 什么是泛型，如何使用泛型？
• 什么是装饰器？
• 装饰器有哪些常见的应用场景？

面试题解析

• 如何定义一个接口？

  • 例如：

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

• 如何定义一个泛型接口？

  • 例如：

    
    interface GenericIdentityFn<T> {
    (arg: T): T;
    }

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

  let identityFn: GenericIdentityFn<number> = identity;

• 什么是装饰器？

  • 例如：

    
    function readonly(target: any, key: string) {
    let value: any = target[key];
    let getter = function() {
    return value;
    };
    let setter = function(newValue: any) {
    if (value === newValue) {
      return;
    }
    throw new Error("Can't change readonly property");
    };
    Object.defineProperty(target, key, {
    get: getter,
    set: setter
    });
    }

  class Person {
  @readonly
  name: string;
  }

• 如何定义一个泛型类？

  • 例如：

    
    class GenericNumber<T> {
    zeroValue: T;
    add: (x: T, y: T) => T;
    
    constructor(zeroValue: T, add: (x: T, y: T) => T) {
    this.zeroValue = zeroValue;
    this.add = add;
    }
    }

  let myGenericNumber = new GenericNumber<number>(0, (x, y) => x + y);
  console.log(myGenericNumber.add(10, 20)); // 30

准备过程中的注意事项

• 熟悉 TypeScript 的基础概念：掌握 TypeScript 的类型系统、接口、泛型、装饰器等基础概念。
• 练习面试题：通过练习面试题目，熟悉面试中常见的问题和解答方式。
• 代码示例：准备一些常见的代码示例，以便在面试中快速展示和解释。
• 理解类型推断和类型定义的区别：掌握类型推断和类型定义的使用场景和区别。
• 熟悉 TypeScript 的高级特性：了解泛型的应用、装饰器的作用等高级特性。
• 了解 TypeScript 的最佳实践：掌握如何在项目中使用 TypeScript 和相关的工具与插件。

通过这些准备，开发者可以更好地应对 TypeScript 相关的面试问题，展示自己的技能和经验。

TS资源推荐 学习TS的在线教程

• 慕课网：慕课网提供了丰富的 TypeScript 学习资源，包括视频教程、实践项目等，适合不同水平的学习者。

  • 视频教程：
  • TypeScript 入门教程
  • TypeScript 高级教程
  • 实践项目：
  • TypeScript 实践项目
  • 社区交流：
  • TypeScript 论坛

• 官方文档：TypeScript 官方文档是学习 TypeScript 的重要资源，提供了详细的语法和用法说明。

  • TypeScript 官方文档
• 在线编辑器：在线编辑器可以快速尝试和练习 TypeScript 代码，适合初学者。
  • 在线编辑器：
  • TypeScript Playground

TS社区与论坛推荐

• TypeScript 官方论坛：TypeScript 官方论坛提供了丰富的讨论和交流资源，适合开发者交流和学习。

  • TypeScript 官方论坛

• GitHub 社区：GitHub 上有许多开源的 TypeScript 项目和仓库，适合开发者学习和参考。

  • GitHub TypeScript 仓库
• Stack Overflow：Stack Overflow 是一个广泛的开发者社区，提供了大量的 TypeScript 相关问题和解答。
  • Stack Overflow TypeScript 问答

通过这些资源的学习和交流，开发者可以更好地掌握 TypeScript 的使用和开发技巧，提升自己的技能水平。