TypeScript 高级知识入门教程

本文详细介绍了TS高级知识，涵盖了联合类型与类型保护、映射类型与条件类型、泛型的深入理解以及类的高级特性等内容。此外，文章还讲解了TS在高阶函数应用、模块化编程、代码库管理和调试方面的高级技巧。通过这些内容，读者可以全面掌握并应用TS的高级特性，提升代码质量和开发效率。

联合类型与类型保护

联合类型是指一个变量可以具有多种类型中的一种。使用关键字 | 来定义联合类型。例如：

let x: number | string;
x = 10; // 允许
x = "hello"; // 允许
x = true; // 错误，布尔值不是联合类型的一部分

类型保护是一种确保当前类型是特定类型的方法。类型保护函数通常检查变量是否符合特定类型。例如：

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

function processValue(value: any) {
    if (isString(value)) {
        console.log(value.toUpperCase());
    } else {
        console.log(value + 1);
    }
}

processValue("hello"); // 输出 "HELLO"
processValue(10);     // 输出 11

映射类型与条件类型

映射类型允许从现有的类型中衍生出新的类型。例如，给定一个对象类型，映射类型可以将对象的每一个属性类型都转换为另一种类型。以下是一个例子：

type Keys = keyof { a: number; b: string; }; // "a" | "b"
type ReverseMap<T> = { [P in keyof T]: T[P] }; // 创建一个映射类型，但保持原有的键值

type Original = { name: string; id: number };
type Reversed = ReverseMap<Original>; // { name: string; id: number }

let data: Reversed = { name: "Alice", id: 123 };
console.log(data); // { name: "Alice", id: 123 }

条件类型允许在类型系统中使用条件逻辑。例如，我们可以使用条件类型来实现一个类型是否是数组的检查：

type IsArray<T> = T extends any[] ? true : false;

type ArrayCheck1 = IsArray<number[]>; // true
type ArrayCheck2 = IsArray<string>;    // false

泛型的深入理解

泛型允许我们写可重用的代码，而无需具体指定类型。例如：

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

let output = identity<string>("hello"); // 类型推断为 string
console.log(output); // 输出 "hello"

泛型可以在接口或类中定义：

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

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

函数作为参数和返回值

函数可以作为另一个函数的参数。例如：

function log<T>(value: T): T {
    console.log(value);
    return value;
}

let withNumber = log<number>(10);
console.log(withNumber); // 输出 10

let withString = log<string>("hello");
console.log(withString); // 输出 "hello"

函数也可以作为返回值。例如，我们可以创建一个函数，该函数返回一个新的函数：

function createLogger(prefix: string) {
    return function (message: string) {
        console.log(prefix + ": " + message);
    };
}

let logError = createLogger("ERROR");
logError("Something went wrong");

let logInfo = createLogger("INFO");
logInfo("Everything is fine");

高阶函数的实际应用场景

高阶函数在许多应用场景中都非常有用，例如在异步编程中。例如，我们可以使用 Promise 来处理异步操作，并使用高阶函数来处理不同的结果：

function fetchData(url: string): Promise<string> {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("Data fetched successfully");
        }, 1000);
    });
}

function handleData(data: string) {
    console.log("Data:", data);
}

fetchData("http://example.com")
    .then(handleData); // 异步处理数据

高阶函数也常用于函数式编程中，例如在数组操作中使用 map、filter 和 reduce：

let numbers = [1, 2, 3, 4, 5];

let squares = numbers.map((num) => num * num);
console.log(squares); // 输出 [1, 4, 9, 16, 25]

let evens = numbers.filter((num) => num % 2 === 0);
console.log(evens); // 输出 [2, 4]

let sum = numbers.reduce((acc, num) => acc + num, 0);
console.log(sum); // 输出 15

类的继承与多态

类可以通过继承其他类来扩展其功能。例如：

class Animal {
    constructor(public name: string) {}
    makeSound(): void { }
}

class Dog extends Animal {
    constructor(name: string) {
        super(name);
    }
    makeSound(): void {
        console.log("Woof!");
    }
}

let myDog = new Dog("Rex");
myDog.makeSound(); // 输出 "Woof!"

多态是指子类可以覆盖父类的方法来实现不同的行为：

class Bird extends Animal {
    constructor(name: string) {
        super(name);
    }
    makeSound(): void {
        console.log("Tweet!");
    }
}

let myBird = new Bird("Tweety");
myBird.makeSound(); // 输出 "Tweet!"

接口与类型别名结合类的使用

接口可以定义类的结构。例如：

interface AnimalInterface {
    name: string;
    makeSound(): void;
}

class Cat implements AnimalInterface {
    name: string;
    constructor(name: string) {
        this.name = name;
    }
    makeSound(): void {
        console.log("Meow!");
    }
}

let myCat = new Cat("Whiskers");
myCat.makeSound(); // 输出 "Meow!"

类型别名可以用来简化复杂的类型定义：

type AnimalType = {
    name: string;
    makeSound(): void;
};

class Fish implements AnimalType {
    name: string;
    constructor(name: string) {
        this.name = name;
    }
    makeSound(): void {
        console.log("Blub!");
    }
}

let myFish = new Fish("Nemo");
myFish.makeSound(); // 输出 "Blub!"

ES6 模块与 TypeScript 模块化编程

TypeScript 支持 ES6 模块语法。模块化编程可以将代码组织成独立的模块，以提高代码的可维护性和可重用性。例如：

// module1.ts
export function sayHello(name: string): string {
    return `Hello, ${name}`;
}

// module2.ts
import { sayHello } from "./module1";
console.log(sayHello("World")); // 输出 "Hello, World"

模块的导入与导出

模块可以使用 export 关键字导出，使用 import 关键字导入：

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

// moduleB.ts
import { add } from "./moduleA";
console.log(add(1, 2)); // 输出 3

TypeScript 还支持默认导出：

// moduleC.ts
export default function subtract(a: number, b: number): number {
    return a - b;
}

// moduleD.ts
import subtract from "./moduleC";
console.log(subtract(5, 3)); // 输出 2

使用 tsconfig.json 进行项目配置

tsconfig.json 文件用于配置 TypeScript 编译器的选项。例如：

{
    "compilerOptions": {
        "target": "ES6",
        "module": "commonjs",
        "strict": true,
        "esModuleInterop": true,
        "outDir": "./dist",
        "rootDir": "./src"
    },
    "include": [
        "src/**/*"
    ]
}

提升开发体验的常用工具介绍

常用的 TypeScript 开发工具包括：

• TypeScript 编译器：用于将 TypeScript 代码编译成 JavaScript。
• Visual Studio Code：集成 TypeScript 支持的代码编辑器。
• tslint：静态代码分析工具，用于检查代码是否符合编码规范。
• tsc-watch：用于监视文件更改并自动编译 TypeScript 文件。
• ts-node：允许直接运行 TypeScript 文件，无需编译。

例如，使用 tsc-watch 监视文件更改：

npm install -g tsc-watch
tsc-watch --onFirstError

调试技巧与调试工具推荐

调试 TypeScript 代码时，可以使用以下工具：

• Visual Studio Code：内置 TypeScript 调试支持。
• Chrome DevTools：支持调试运行中的 Web 应用程序。
• Node.js Debugger：用于调试 Node.js 应用程序中的 TypeScript 代码。

例如，在 Visual Studio Code 中设置断点：

function add(a: number, b: number): number {
    debugger; // 设置断点
    return a + b;
}

add(1, 2);

常见错误类型及解决方法

1. 类型错误：确保变量和参数具有正确的类型。

let num: number = "123"; // 错误，字符串不能赋值给 number 类型

1. 编译错误：确保 tsconfig.json 配置正确。

{
    "compilerOptions": {
        "target": "ES6",
        "module": "commonjs",
        "strict": true
    }
}

1. 运行时错误：检查逻辑错误和未捕获的异常。

function divide(a: number, b: number): number {
    if (b === 0) {
        throw new Error("Cannot divide by zero");
    }
    return a / b;
}

try {
    console.log(divide(10, 0)); // 抛出异常并被捕获
} catch (error) {
    console.error(error.message); // 输出 "Cannot divide by zero"
}

通过以上内容，我们可以深入了解 TypeScript 的高级特性和最佳实践，从而编写更高质量的代码。