TypeScript 面试题汇总

引言

TypeScript 是一种由微软开发的开源、跨平台的编程语言，它是 JavaScript 的超集，为 JavaScript 添加了静态类型系统和其他高级功能。随着 TypeScript 在前端开发领域的广泛应用，掌握 TypeScript 已经成为很多开发者必备的技能之一。本文将整理一系列常见的 TypeScript 面试题，帮助准备面试的开发者们复习和巩固知识。

1. TypeScript 基础

1.1 TypeScript 是什么？

• TypeScript 是一种静态类型的、面向对象的编程语言，它可以编译成纯净的 JavaScript 代码。
• 它是 JavaScript 的超集，意味着任何有效的 JavaScript 代码也是有效的 TypeScript 代码。

1.2 TypeScript 和 JavaScript 有什么区别？

• TypeScript 添加了静态类型系统，可以在编译阶段捕获类型错误。
• TypeScript 支持类、接口、枚举等面向对象编程概念。
• TypeScript 提供了更强大的工具支持，如自动完成、智能感知等功能。

1.3 如何安装 TypeScript？

• 通过 npm 安装 TypeScript：
• bash

• 深色版本

  1npm install -g typescript

1.4 如何编译 TypeScript？

• 使用 tsc 命令编译 TypeScript 文件：
  bash

  深色版本

  1tsc filename.ts

2. 类型与接口

2.1 TypeScript 中有哪些基本类型？

• string, number, boolean, null, undefined, void, never, any, unknown。

2.2 如何定义联合类型和交叉类型？

• 联合类型：使用 | 符号表示多种类型之一。
  typescript

  深色版本

  1let value: string | number;

• 交叉类型：使用 & 符号表示多个类型的组合。
  typescript

  深色版本

  1type Person = {
  2    name: string;
  3};
  4
  5type Developer = {
  6    skill: string;
  7};
  8
  9type DevPerson = Person & Developer;

2.3 接口和类型别名的区别是什么？

• 接口（Interface）用于描述对象的形状，可以扩展和合并。
  typescript

  深色版本

  1interface Person {
  2    name: string;
  3    age: number;
  4}

• 类型别名（Type Alias）用于给类型起别名，更加灵活。
  typescript

  深色版本

  1type Person = {
  2    name: string;
  3    age: number;
  4};

2.4 如何实现泛型？

• 使用 <T> 定义泛型类型参数。
  typescript

  深色版本

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

3. 高级类型

3.1 如何定义只读属性？

• 使用 readonly 关键字定义不可修改的属性。
  typescript

  深色版本

  1interface Person {
  2    readonly id: number;
  3    name: string;
  4}

3.2 如何使用条件类型？

• 条件类型允许基于类型推断的结果来选择不同的类型。
  typescript

  深色版本

  1type TypeName<T> =
  2    T extends string ? "string" :
  3    T extends number ? "number" :
  4    T extends boolean ? "boolean" :
  5    "unknown";

3.3 如何使用映射类型？

• 映射类型允许基于现有类型创建新的类型。
  typescript

  深色版本

  1type Readonly<T> = {
  2    readonly [P in keyof T]: T[P];
  3};

4. 类与模块

4.1 如何定义类？

• 使用 class 关键字定义类。
  typescript

  深色版本

  1class Person {
  2    constructor(public name: string, public age: number) {}
  3    
  4    greet() {
  5        console.log(`Hello, my name is ${this.name}.`);
  6    }
  7}

4.2 如何实现继承？

• 使用 extends 关键字实现继承。
  typescript

  深色版本

  1class Employee extends Person {
  2    constructor(name: string, age: number, public position: string) {
  3        super(name, age);
  4    }
  5    
  6    work() {
  7        console.log(`${this.name} is working.`);
  8    }
  9}

4.3 如何使用模块？

• 使用 export 和 import 关键字导入和导出模块。
  typescript

  深色版本

  1// person.ts
  2export class Person {
  3    constructor(public name: string, public age: number) {}
  4}
  5
  6// main.ts
  7import { Person } from './person';
  8const person = new Person('Alice', 30);

5. 实用技巧

5.1 如何使用类型断言？

• 类型断言允许你在 TypeScript 中“告诉”编译器某个值的类型。
  typescript

  深色版本

  1const value: any = 'hello';
  2const strLength: number = (value as string).length;

5.2 如何使用类型保护？

• 使用 instanceof 关键字或自定义类型保护函数。
  typescript

  深色版本

  1function isString(value: any): value is string {
  2    return typeof value === 'string';
  3}

5.3 如何使用装饰器？

• 装饰器是一种特殊类型的声明，可以用来修改类的行为。
  typescript

  深色版本

  1function log(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  2    const originalMethod = descriptor.value;
  3    descriptor.value = function (...args: any[]) {
  4        console.log(`Calling "${propertyKey}" with`, args);
  5        return originalMethod.apply(this, args);
  6    };
  7}
  8
  9class Calculator {
  10    @log
  11    add(a: number, b: number) {
  12        return a + b;
  13    }
  14}

6. 面向对象编程

6.1 如何使用抽象类？

• 使用 abstract 关键字定义抽象类。
  typescript

  深色版本

  1abstract class Animal {
  2    abstract makeSound(): void;
  3}
  4
  5class Dog extends Animal {
  6    makeSound() {
  7        console.log('Woof!');
  8    }
  9}

6.2 如何使用接口继承？

• 使用 extends 关键字继承接口。
  typescript

  深色版本

  1interface Shape {
  2    color: string;
  3}
  4
  5interface Circle extends Shape {
  6    radius: number;
  7}

7. TypeScript 与其他框架/库的集成

7.1 如何在 React 中使用 TypeScript？

• 定义组件的 props 和 state 类型。
  typescript

  深色版本

  1interface Props {
  2    name: string;
  3}
  4
  5interface State {
  6    count: number;
  7}
  8
  9class Greeting extends React.Component<Props, State> {
  10    state = { count: 0 };
  11    
  12    render() {
  13        return (
  14            <div>
  15                Hello, {this.props.name}!
  16                Clicked {this.state.count} times
  17            </div>
  18        );
  19    }
  20}

7.2 如何在 Angular 中使用 TypeScript？

• 使用 TypeScript 的类型系统来定义组件和服务。
  typescript

  深色版本

  1import { Component } from '@angular/core';
  2
  3@Component({
  4    selector: 'app-root',
  5    template: `
  6        <h1>{{ title }}</h1>
  7    `,
  8})
  9export class AppComponent {
  10    title = 'Angular App';
  11}

8. 最佳实践

8.1 如何避免类型错误？

• 使用严格的类型检查。
  typescript

  深色版本

  1tsc --strict

• 使用 never 类型表示永远不会发生的路径。
  typescript

  深色版本

  1function throwError(message: string): never {
  2    throw new Error(message);
  3}

8.2 如何编写可维护的代码？

• 使用接口和类型别名来定义清晰的数据结构。
• 遵循单一职责原则。
• 利用 TypeScript 的类型系统来减少运行时错误。

结论

掌握 TypeScript 的基础知识和高级特性对于成为一名合格的前端开发者来说非常重要。本文汇总了一系列常见的 TypeScript 面试题，希望能够帮助开发者们更好地准备面试，同时也加深对 TypeScript 的理解和应用能力。如果你有任何疑问或需要进一步的帮助，请随时提问！