TypeScript 高级知识入门教程

本文详细介绍了 TypeScript 高级知识，包括联合类型、元组类型、字面量类型、泛型、装饰器、混入、接口继承、模块声明、命名空间、tsconfig.json 配置详解，以及自定义类型声明文件等内容。文章还讲解了如何进行代码组织与模块化，并深入探讨了代码调试与错误处理的实用技巧和示例代码。

联合类型

在 TypeScript 中，联合类型允许一个变量存储多种可能的类型。这种类型在处理不确定的数据来源时非常有用。例如，一个变量可能存储字符串或数字。

示例代码

let userInput: string | number;

userInput = 'Hello';
userInput = 42;

function processInput(input: string | number) {
    if (typeof input === 'string') {
        console.log(input.toUpperCase());
    } else if (typeof input === 'number') {
        console.log(input * 2);
    }
}

processInput('Hello');
processInput(42);

元组类型

元组类型允许你定义一个固定长度的数组，其中每个元素都有一个特定的类型。这对于需要特定类型数据的数组非常有用。

示例代码

let person: [string, number];

person = ['Alice', 25];

console.log(person[0]); // 输出 'Alice'
console.log(person[1]); // 输出 25

function printPerson(person: [string, number]) {
    console.log(`${person[0]} is ${person[1]} years old.`);
}

printPerson(['Bob', 30]);

字面量类型

字面量类型允许你将类型限制为特定的值。这种类型在处理枚举或特定的常量时非常有用。

示例代码

type Status = 'active' | 'inactive';

let status: Status = 'active';
status = 'inactive';

function setStatus(value: Status) {
    console.log(`Status is set to ${value}`);
}

setStatus('active');

泛型

泛型允许你编写可重用的函数或类，这些函数或类可以处理多种类型。泛型通过类型参数来传递类型信息，使代码更灵活和通用。

示例代码

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

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

function getLength<T>(arg: T[]): T[] {
    return arg;
}

let numbers = getLength([1, 2, 3]);
console.log(numbers.length); // 输出 3

装饰器

装饰器是一种特殊类型的声明，可以被附加到类声明、方法、访问符、属性或参数。装饰器使用 @expression 格式，其中 expression 必须评估为一个函数，该函数将在运行时被调用并接收三个参数：目标对象、装饰器名称和装饰器参数。

示例代码

function readonly(target: any, propertyName: string) {
    let value = target[propertyName];
    let descriptor: PropertyDescriptor = {
        get() {
            return value;
        },
        set(this: any, newValue: any) {
            console.log(`Cannot set ${propertyName}`);
        }
    };
    Object.defineProperty(target, propertyName, descriptor);
}

class User {
    @readonly
    name: string = 'Alice';

    getName() {
        return this.name;
    }
}

let user = new User();
console.log(user.getName()); // 输出 'Alice'
user.name = 'Bob'; // 输出 'Cannot set name'

混入（Mixins）

混入是一种在运行时将行为注入到类中的模式。混入模式允许你创建一个类，该类从多个原型继承行为，而不是依赖单一继承。

示例代码

function logConstructor<T extends { new(...args: any[]): {} }>(constructor: T) {
    return class extends constructor {
        constructor(...args: any[]) {
            console.log('Constructor called with arguments', args);
            super(...args);
        }
    };
}

@logConstructor
class User {
    constructor(public name: string) {}
}

let user = new User('Alice'); // 输出 'Constructor called with arguments [ "Alice" ]'

接口继承

接口可以继承其他接口，这允许你通过组合多个接口来创建更复杂的接口。接口继承使得代码更灵活和模块化。

示例代码

interface A {
    a: number;
}

interface B {
    b: number;
}

interface C extends A, B {
    c: number;
}

let c: C = { a: 1, b: 2, c: 3 };
console.log(c.a); // 输出 1
console.log(c.b); // 输出 2
console.log(c.c); // 输出 3

模块声明

模块声明允许你声明一个模块，该模块可以包含其他声明。模块声明可以用来组织代码，并使其更易于管理和复用。

示例代码

declare module 'exampleModule' {
    export function exampleFunction(): void;
}

import { exampleFunction } from 'exampleModule';

exampleFunction();

命名空间

命名空间可以用来组织相关的声明，如接口、类、函数和变量。命名空间可以嵌套，以创建更复杂的命名结构。

示例代码

namespace MyNamespace {
    export interface User {
        name: string;
    }

    export class UserImpl implements User {
        constructor(public name: string) {}
    }
}

let user: MyNamespace.User = new MyNamespace.UserImpl('Alice');
console.log(user.name); // 输出 'Alice'

tsconfig.json 配置详解

tsconfig.json 文件是 TypeScript 项目的配置文件。它包含编译器选项、文件包含和排除规则等。

示例代码

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

自定义类型声明文件

自定义类型声明文件允许你为没有 TypeScript 类型定义的库编写类型定义。这些类型定义文件通常以 .d.ts 为扩展名。

示例代码

declare module 'customLib' {
    export function customFunction(): void;
}

import { customFunction } from 'customLib';

customFunction();

常见错误类型及处理方法

在 TypeScript 中，常见的错误类型包括类型错误、编译错误和运行时错误。处理这些错误的方法包括使用断言、类型检查和编写更健壮的代码。

示例代码

function add(a: number, b: number): number {
    if (typeof a !== 'number' || typeof b !== 'number') {
        throw new Error('Both arguments must be numbers');
    }
    return a + b;
}

try {
    console.log(add(1, 2)); // 输出 3
    console.log(add('1', 2)); // 抛出错误
} catch (error) {
    console.error(error);
}

如何利用 TypeScript 进行代码调试

TypeScript 提供了一些特性，如类型检查和断言，可以帮助你更好地调试代码。你也可以使用调试工具，如 VS Code 的内置调试器，来调试 TypeScript 代码。

示例代码

function add(a: number, b: number): number {
    if (typeof a === 'number' && typeof b === 'number') {
        return a + b;
    } else {
        throw new Error('Both arguments must be numbers');
    }
}

try {
    console.log(add(1, 2)); // 输出 3
    console.log(add('1', 2)); // 抛出错误
} catch (error) {
    console.error(error);
}

希望这篇教程能帮助你更好地理解和使用 TypeScript 的高级功能。如果你需要进一步的学习和实践，可以考虑在 慕课网 上找到更多相关的课程和资源。