TypeScript面试题详解与实战

本文详细介绍了TypeScript的基础概念、数据类型、函数与接口、类与继承以及泛型等内容，并深入解析了TypeScript面试题，帮助读者掌握TypeScript的核心知识和面试技巧，包含了如何定义和使用接口、类型推断、类和继承的概念、泛型的用途等TypeScript面试题。

TypeScript基础概念

什么是TypeScript

TypeScript是由微软开发的一种开源编程语言，它是JavaScript的超集，也就是说，TypeScript可以编译成JavaScript代码。TypeScript的主要目的是提供一种静态类型系统来增强JavaScript，从而帮助开发者更早地发现错误。TypeScript支持各种现代JavaScript特性，并且增加了诸如接口、类型注解和类等特性。

TypeScript与JavaScript的区别

• 静态类型系统：TypeScript引入了静态类型系统，允许在编译时检测类型错误，而JavaScript是动态类型语言，类型检查在运行时进行。
• 类和对象：TypeScript引入了类和对象的概念，这在JavaScript中是没有的。TypeScript中的类支持继承、抽象类、接口等特性。
• 接口和类型注解：TypeScript支持接口定义，可以用来指定对象的结构，以及使用类型注解来指定变量、参数、返回值的类型。
• 模块和命名空间：TypeScript支持模块系统，这使得代码更易于组织和重用。同时，TypeScript也支持命名空间，虽然这在ES6模块化后已较少使用。

TypeScript的优势与应用场景

TypeScript提供了类型检查，这使得类型错误可以在编译阶段被发现，而不是在运行时才被发现。这提升了代码的健壮性和可维护性。此外，TypeScript还提供了更好的工具支持，如代码补全、重构等。TypeScript主要应用于大型项目和团队协作，尤其是企业级应用和框架的开发。

TypeScript数据类型

基础数据类型

TypeScript支持多种基础数据类型，包括number、string、boolean、null、undefined、void、never等。下面是这些基础数据类型的定义和使用示例：

let num: number = 42;
let str: string = "Hello, TypeScript!";
let bool: boolean = true;
let nullVal: null = null;
let undefinedVal: undefined = undefined;
let voidVal: void = undefined; // void 类型通常用于函数返回类型定义为无返回值
let neverVal: never = (() => { throw new Error("This function never returns") })();

复杂数据类型

TypeScript还支持复杂数据类型，包括数组、元组、枚举等。这些类型在处理复杂数据结构时非常有用。

数组

数组类型可以使用数组字面量或泛型来指定元素类型。

let arr: number[] = [1, 2, 3];
let arr2: Array<string> = ["one", "two", "three"];

元组

元组允许指定一个固定长度的数组，每个位置都有特定的数据类型。

let tuple: [number, string];
tuple = [1, "hello"];
// tuple = ["world", 2]; // 错误，元组元素类型不匹配

枚举

枚举可以用于定义一组命名的常量。

enum Color { Red, Green, Blue }
let color: Color = Color.Red;

类型推断

TypeScript可以推断变量的类型，这使得代码更加简洁。编译器会根据赋值表达式的类型来推断变量的类型。

let num = 42; // 编译器推断 num 为 number 类型
let str = "TypeScript"; // 编译器推断 str 为 string 类型
let obj = { a: 1, b: "two" }; // 编译器推断 obj 为 { a: number; b: string; } 类型

function doubleNumber(n: number): number {
    return n * 2;
}

let result = doubleNumber(10); // 编译器推断 result 为 number 类型

TypeScript函数与接口

函数定义与类型声明

在TypeScript中，可以通过函数定义和类型声明来指定函数的参数类型和返回类型。

function add(a: number, b: number): number {
    return a + b;
}

let add2: (x: number, y: number) => number = function(x: number, y: number): number {
    return x + y;
};

接口定义与使用

接口定义了对象的结构，可以用来指定对象的属性和方法。接口可以用来约束变量类型。

interface Point {
    x: number;
    y: number;
    draw(): void;
}

let point: Point = {
    x: 1,
    y: 2,
    draw() {
        console.log(`Drawing point at (${this.x}, ${this.y})`);
    }
};

// 实际项目应用案例
interface Car {
    make: string;
    model: string;
    year: number;
    displayInfo(): void;
}

let myCar: Car = {
    make: "Toyota",
    model: "Corolla",
    year: 2023,
    displayInfo() {
        console.log(`${this.year} ${this.make} ${this.model}`);
    }
};

myCar.displayInfo(); // 输出 "2023 Toyota Corolla"

函数接口与类接口

函数接口可以用来定义函数类型，从而实现函数间的互换性。

interface SearchFunction {
    (source: string, subString: string): boolean;
}

let searchString: SearchFunction = function(source: string, subString: string): boolean {
    return source.indexOf(subString) !== -1;
};

TypeScript类与继承

类的基本概念

类是面向对象编程的核心，它封装了数据（成员变量）和行为（成员函数）。在TypeScript中，类可以定义成员变量、方法，并且可以实现继承。

class Animal {
    name: string;
    constructor(name: string) {
        this.name = name;
    }
    speak(): void {
        console.log(`${this.name} makes a noise.`);
    }
}

let myAnimal = new Animal("Dog");
myAnimal.speak(); // 输出 "Dog makes a noise."

// 实际项目应用案例
class Car {
    make: string;
    model: string;
    year: number;
    constructor(make: string, model: string, year: number) {
        this.make = make;
        this.model = model;
        this.year = year;
    }
    displayInfo(): void {
        console.log(`${this.year} ${this.make} ${this.model}`);
    }
}

let myCar = new Car("Toyota", "Corolla", 2023);
myCar.displayInfo(); // 输出 "2023 Toyota Corolla"

类的构造函数与成员变量

构造函数用于初始化类的实例，成员变量存储类实例的数据。

class Mammal {
    name: string;
    constructor(name: string) {
        this.name = name;
    }
    speak(): void {
        console.log(`${this.name} makes a noise.`);
    }
}

class Dog extends Mammal {
    constructor(name: string) {
        super(name);
    }
    speak(): void {
        console.log(`${this.name} barks.`);
    }
}

let myDog = new Dog("Rex");
myDog.speak(); // 输出 "Rex barks."

TypeScript泛型

泛型的概念与作用

泛型允许创建可重用的函数、接口和类，这些函数、接口和类可以处理多种类型的数据。

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

let output = identity<string>("TypeScript");
console.log(output); // 输出 "TypeScript"

泛型函数与泛型接口

泛型函数可以指定参数和返回值的类型。

function createArray<T>(length: number, value: T): Array<T> {
    let result: T[] = [];
    for (let i = 0; i < length; i++) {
        result[i] = value;
    }
    return result;
}

console.log(createArray<string>(3, "Hello")); // 输出 ["Hello", "Hello", "Hello"]

泛型接口可以定义对象的结构，约束对象的类型。

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

let myIdentity: GenericIdentityFn<number> = (n: number): number => n;
console.log(myIdentity(123)); // 输出 123

泛型类的使用

泛型类可以定义泛型成员变量和方法。

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的类型和JavaScript的类型有何不同？

面试技巧与注意事项

• 理解基础概念：掌握TypeScript的基础概念，包括类型系统、类、接口、泛型等。
• 代码示例：准备一些实际代码示例，展示如何使用类型、接口、泛型等特性。
• 比较与对比：理解TypeScript与JavaScript的区别，能够列举出两者之间的主要差异。
• 实际应用：阐述TypeScript在实际项目中的应用，如类型检查如何提高代码的质量。

实战案例分析

问题: 给定一个函数，该函数接收一个数组，并返回一个新数组，新数组中的每个元素都是原数组对应元素的平方。

解决方案：

function squareArray<T>(arr: Array<T>): Array<T> {
    return arr.map((element: T) => {
        if (typeof element === "number") {
            return element * element;
        } else {
            return element;
        }
    });
}

let numbersArray = [1, 2, 3, 4];
let squaredNumbers = squareArray<number>(numbersArray);
console.log(squaredNumbers); // 输出 [1, 4, 9, 16]

let stringsArray = ["a", "b", "c"];
let squaredStrings = squareArray<string>(stringsArray);
console.log(squaredStrings); // 输出 ["a", "b", "c"]

通过这个例子，可以看出泛型在处理不同类型的数据时非常灵活，并且可以保证代码的通用性。

问题: 实现一个函数，该函数接收一个字符串数组，返回一个新数组，新数组中的每个元素都是原数组元素的长度。

解决方案：

function stringLengths<T extends string[]>(arr: T): Array<number> {
    return arr.map((str: string) => str.length);
}

let stringsArray = ["apple", "banana", "cherry"];
let lengths = stringLengths(stringsArray);
console.log(lengths); // 输出 [5, 6, 6]

通过这个例子，可以看到泛型在处理字符串数组时的应用，提高了代码的可重用性。

问题: 实现一个函数，该函数接收一个泛型数组，并返回一个新数组，新数组中的每个元素都是原数组元素的两倍。

解决方案：

function doubleArray<T>(arr: Array<T>): Array<T> {
    return arr.map((element: T) => {
        if (typeof element === "number") {
            return element * 2;
        } else if (typeof element === "string") {
            return element + element;
        } else {
            return element;
        }
    });
}

let numbersArray = [1, 2, 3];
let doubledNumbers = doubleArray<number>(numbersArray);
console.log(doubledNumbers); // 输出 [2, 4, 6]

let stringsArray = ["a", "b", "c"];
let doubledStrings = doubleArray<string>(stringsArray);
console.log(doubledStrings); // 输出 ["aa", "bb", "cc"]

通过这个例子，可以看到泛型在处理不同类型的数据时的应用，增强了代码的灵活性和可重用性。