本文深入探讨了TypeScript高级知识，包括泛型、联合与交集类型、映射和条件类型等复杂概念。文章还介绍了装饰器的使用和类型脚本项目的配置，帮助开发者更好地理解和应用这些高级特性。希望读者能通过本文掌握TypeScript高级知识，提升编程技能。

变量声明与类型推断

TypeScript 是 JavaScript 的超集，提供了类型检查等特性。在声明变量时，可以指定具体的类型，也可以让 TypeScript 自动推断类型。

变量声明

let message: string = "Hello, TypeScript!";
let count: number = 42;
let isComplete: boolean = true;

console.log(message);
console.log(count);
console.log(isComplete);

类型推断

let message = "Hello, TypeScript!";
let count = 42;
let isComplete = true;

console.log(message); // 输出 "Hello, TypeScript!"
console.log(count); // 输出 42
console.log(isComplete); // 输出 true

在上述示例中，TypeScript 可以根据赋予变量的初始值推断出变量的类型。

函数定义与调用

函数在 TypeScript 中可以声明具体类型，明确函数的参数类型、返回类型等。

函数定义

function greet(name: string): void {
    console.log("Hello, " + name + "!");
}

greet("TypeScript");

函数调用

let add = (a: number, b: number): number => {
    return a + b;
};

console.log(add(1, 2)); // 输出 3

接口和类的简单使用

接口和类是 TypeScript 中定义结构和行为的重要方式。

接口定义

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

let person: Person = {
    name: "Alice",
    age: 30
};

console.log(person.name); // 输出 "Alice"
console.log(person.age); // 输出 30

类定义

class Animal {
    name: string;

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

    speak(): void {
        console.log(`${this.name} makes a noise.`);
    }
}

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

泛型的定义与使用

泛型允许在定义函数、接口或类时使用类型参数。

泛型函数

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

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

泛型接口

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

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

泛型约束及应用案例

使用泛型约束可以定义类型参数应该满足的条件。

泛型约束

interface Lengthy {
    length: number;
}

function getLength<T extends Lengthy>(arg: T): number {
    return arg.length;
}

let a: string[] = ["Hello", "TypeScript"];
console.log(getLength(a)); // 输出 13

在此示例中，泛型约束确保了 T 只能是具有 length 属性的类型。

联合类型与交集类型

联合类型和交集类型用于定义复杂的数据结构。

联合类型

let numberOrString: number | string;

numberOrString = 123; // 正确
numberOrString = "Hello"; // 正确

// numberOrString = true; // 错误，不是 number 或 string 类型

交集类型

interface A {
    a: number;
}

interface B {
    b: string;
}

type AB = A & B;

let ab: AB = {
    a: 1,
    b: "Hello"
};

console.log(ab.a); // 输出 1
console.log(ab.b); // 输出 "Hello"

映射类型和条件类型

映射类型和条件类型用于创建复杂的类型结构。

映射类型

type KeysToCamelCase<T> = {
    [P in keyof T as `${typeof P}`]: T[P];
};

interface Original {
    first_name: string;
    last_name: string;
}

type CamelCase = KeysToCamelCase<Original>;

let camelCase: CamelCase = {
    firstName: "Alice",
    lastName: "Smith"
};

console.log(camelCase.firstName); // 输出 "Alice"
console.log(camelCase.lastName); // 输出 "Smith"

条件类型

type IsString<T> = T extends string ? true : false;

let isString1: IsString<string>; // 是 true
let isString2: IsString<number>; // 是 false

console.log(isString1); // 输出 true
console.log(isString2); // 输出 false

模块的定义与导入导出

模块化是 TypeScript 中组织代码的重要方式。

模块定义

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

export class Animal {
    name: string;

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

    speak(): void {
        console.log(`${this.name} makes a noise.`);
    }
}

模块导入

// main.ts
import { greet, Animal } from "./module";

greet("TypeScript"); // 输出 "Hello, TypeScript!"
let dog = new Animal("Dog");
dog.speak(); // 输出 "Dog makes a noise."

命名空间的作用与使用

命名空间用于组织和命名相关的功能。

命名空间定义

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

    export function subtract(a: number, b: number): number {
        return a - b;
    }
}

命名空间使用

// main.ts
import "./namespace";

let result = MathUtils.add(1, 2);
console.log(result); // 输出 3

result = MathUtils.subtract(3, 1);
console.log(result); // 输出 2

装饰器的定义与分类

装饰器是一种特殊的声明，可以附加到类声明、方法、访问修饰符、属性或参数。

装饰器定义

function readonly(target: any, key: string) {
    let value = target[key];

    let getter = function() {
        return value;
    };

    let setter = function(val) {
        value = val;
    };

    Object.defineProperty(target, key, {
        get: getter,
        set: setter,
        enumerable: true,
        configurable: true
    });
}

class Example {
    @readonly
    value = 0;
}

let example = new Example();
console.log(example.value); // 输出 0
example.value = 123; // 设置失败，因为属性是只读的
console.log(example.value); // 输出 0

装饰器的实际应用场景

装饰器可以用于各种场景，如日志记录、权限检查等。

日志记录

function log(target: any, name: string, descriptor: PropertyDescriptor) {
    let originalMethod = descriptor.value;

    descriptor.value = function(...args: any[]) {
        console.log(`Calling ${name}(${args.join(", ")})`);
        return originalMethod.apply(this, args);
    };
}

class Example {
    @log
    method(a: number, b: number) {
        return a + b;
    }
}

let example = new Example();
console.log(example.method(1, 2)); // 输出 "Calling method(1, 2)"

tsconfig.json文件详解

tsconfig.json 文件是 TypeScript 项目的核心配置文件，定义了项目编译时的设置。

tsconfig.json示例

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

主要配置项

• target: 指定生成 JavaScript 的版本，如 es5 或 es6。
• module: 指定生成的模块类型，如 commonjs 或 esnext。
• outDir: 指定生成文件的输出目录。
• rootDir: 指定源代码的根目录。
• strict: 启用所有严格类型检查选项。
• esModuleInterop: 为 CommonJS 模块添加互操作性。
• skipLibCheck: 跳过库文件的类型检查。
• forceConsistentCasingInFileNames: 要求文件系统中的所有文件名在 TypeScript 中具有相同的大小写。

常见配置项及其作用

• strictNullChecks: 启用严格的空值检查。
• noImplicitAny: 强制所有变量和参数都必须指定类型。
• noEmitOnError: 如果存在编译错误，则不生成输出文件。
• sourceMap: 生成源映射文件，方便调试。

具体配置示例

{
    "compilerOptions": {
        "target": "es6",
        "module": "commonjs",
        "outDir": "./dist",
        "rootDir": "./src",
        "strict": true,
        "esModuleInterop": true,
        "skipLibCheck": true,
        "forceConsistentCasingInFileNames": true,
        "strictNullChecks": true,
        "noImplicitAny": true,
        "noEmitOnError": true,
        "sourceMap": true
    },
    "include": ["src/**/*"],
    "exclude": ["node_modules", "dist", ".vscode"]
}

示例代码

// main.ts
console.log("Hello, TypeScript!");

// tsconfig.json
{
    "compilerOptions": {
        "target": "es6",
        "module": "commonjs",
        "outDir": "./dist",
        "rootDir": "./src",
        "strict": true,
        "esModuleInterop": true,
        "skipLibCheck": true,
        "forceConsistentCasingInFileNames": true,
        "strictNullChecks": true,
        "noImplicitAny": true,
        "noEmitOnError": true,
        "sourceMap": true
    },
    "include": ["src/**/*"],
    "exclude": ["node_modules", "dist", ".vscode"]
}

通过以上的配置和示例代码，可以更好地理解和使用 TypeScript 的高级特性。希望这篇教程能帮助你更深入地掌握 TypeScript，并在实际项目中应用这些知识。想要进一步学习，可以访问慕课网 获取更多相关课程。