TypeScript面试真题详解：快速提升你的TypeScript技能

TypeScript面试真题深入解析TypeScript基础概念，从其与JavaScript的关系、主要特性到实战应用。涵盖基础类型与联合类型、可选参数与默认值、类型断言与约束，以及接口定义与实现。文章还覆盖了函数与回调的TypeScript化、类与构造函数的类型注解，直至模块与ES模块集成，以及与现代前端库协同开发的实践。通过实例和代码示例，全面展示了TypeScript在不同场景下的功能与应用，为面试准备提供了详尽的指南。

TypeScript基础概念

TypeScript与JavaScript的关系

TypeScript 是一种由微软开发的超集，与JavaScript共享广泛的兼容性。它引入了额外的类型系统，旨在提高开发效率和代码可维护性。任何有效的JavaScript代码在TypeScript中亦有效，反之则非。

TypeScript的主要特性

TypeScript 的关键特性包括：

• 静态类型：提供类型检查，助于在开发期间发现并预防潜在的类型错误。
• 类和接口：支持面向对象编程，构建复杂的对象模型。
• 函数类型注解：允许为函数参数、返回类型、方法实现提供明确的类型定义。
• 模块系统：支持ES模块导入导出，简化大型项目管理。
• 类型保护：通过枚举类型、联合类型等特性，实现类型断言和条件类型，增强类型安全性。

TypeScript类型系统实战

基本类型和联合类型

TypeScript支持基本类型如 number, string, boolean，以及联合类型，允许一个变量可以是多种类型之一。

示例代码：

let age: number = 25;
let name: string = "Alice";

let value: number | string = 10;
value = "hello";

可选参数与默认值

使用可选参数在参数名称后添加 ? 符号，并可指定默认值。

示例代码：

function greet(name: string, age?: number) {
    console.log(`Hello, ${name}. You are ${age} years old.`);
}

greet("Alice"); // 只传入名字
greet("Bob", 30); // 传入名字和年龄

类型断言与约束

类型断言允许开发者在运行时改变变量的类型。类型约束用于在函数体内缩小变量的类型范围。

示例代码：

let item = "apple";
let typeAssertion: string = item as string; // 类型断言

let typeGuardExample = (x: any): boolean => {
    if (typeof x === 'number') {
        return x > 5;
    }
    return false;
};

typeGuardExample(6); // 类型约束

类型安全与接口应用

接口定义与实现

接口定义对象结构，包括属性和方法的类型。接口可用于约束类的结构。

示例代码：

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

class Manager implements Employee {
    name: string;
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }
}

接口继承与重写

接口之间可以实现继承关系，实现接口的类必须实现所有方法。

示例代码：

interface Person {
    name: string;
}

interface Developer extends Person {
    programmingLanguages: string[];
}

let developer: Developer = {
    name: "John",
    programmingLanguages: ["JavaScript", "TypeScript"]
};

接口与类的结合

结合接口和类，增强代码的类型安全性。

示例代码：

interface HasAge {
    age: number;
}

class Person implements HasAge {
    age: number;

    constructor(age: number) {
        this.age = age;
    }
}

函数与回调的TypeScript化

函数参数类型

为函数参数添加类型注解，增强函数接口的清晰度。

示例代码：

function logMessage(message: string) {
    console.log(message);
}

返回类型与泛型

明确函数返回类型和使用泛型处理类型参数。

示例代码：

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

回调函数的类型化处理

使用泛型定义回调函数类型。

示例代码：

function processItems<T>(items: T[], callback: (item: T) => void) {
    for (let item of items) {
        callback(item);
    }
}

类与构造函数的类型注解

类型注解与构造函数参数

为构造函数参数提供类型注解，增强代码类型安全性。

示例代码：

class User {
    constructor(private name: string) {}
}

let newUser = new User("Alice");

类属性与方法的类型定义

明确类的属性和方法类型。

示例代码：

class User {
    name: string;
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    greet(): string {
        return `Hello, my name is ${this.name}.`;
    }
}

TypeScript中的模块与ES模块集成

模块导入与导出

通过 import 和 export 关键字进行模块的导入和导出。

示例代码：

// src/index.ts
export function greet(name: string) {
    console.log(`Hello, ${name}`);
}

// src/greet.ts
import { greet } from './index';
greet("World");

TypeScript与Node.js集成

TypeScript 通过 TypeScript 编译器生成 JavaScript 文件，可在Node.js环境中运行。

示例命令：

tsc --target es6

TypeScript与现代前端库协同开发

TypeScript 与 React、Angular等库协同工作，提供类型安全的开发体验。

示例代码：

import React, { Component } from 'react';

class Welcome extends Component {
    render() {
        return (
            <div>
                <h1>Hello, {this.props.name}</h1>
            </div>
        );
    }
}

export default Welcome;

通过上述实例和代码示例，深入探讨了TypeScript的各项特性及其在实际开发中的应用，从基础概念到高级用法，为开发者提供了全面的TypeScript学习指南。