TypeScript 学习笔记

1. TypeScript 概述

• JavaScript 的超集：TypeScript 是 JavaScript 的超集，添加了静态类型和其他特性。

• 类型检查：在开发阶段通过类型检查发现错误，增强代码的健壮性。

• 扩展性强：可以直接使用现有的 JavaScript 代码，并向项目逐步引入 TypeScript。

2. 安装与配置

• 使用 npm install -g typescript 安装 TypeScript。

• 使用 tsc 命令编译 .ts 文件(编译时一定要先保存ts文件，否则会生成空的js文件)。

• 创建 tsconfig.json 配置文件，简化编译步骤并自定义编译选项。

3. 基本类型

• 原始类型：string，number，boolean，null，undefined，symbol。

• 数组类型：number[] 或 Array<number> 表示数字数组。

• 元组类型：[string, number]，用于表示固定长度和类型的数组。

• 枚举类型：使用 enum 声明一组命名常量。

• any 类型：适用于任何类型，但会丧失类型检查优势。

• void 类型：表示函数没有返回值。

• never 类型：用于不会产生值的类型，如抛出错误的函数。

4. 接口 (Interfaces)

• 用于定义对象的结构，如属性和方法。

• 可扩展，通过 extends 继承其他接口。

• 支持可选属性和只读属性。

interface Person {
    readonly id: number;
    name: string;
    age?: number;
}

5. 类 (Classes)

• 支持面向对象编程，包含 public、private、protected 修饰符。

• 支持继承，通过 extends 关键字。

• 支持接口的实现，通过 implements 关键字。

• 使用构造函数 constructor 初始化类的实例属性。

class Animal {
    constructor(public name: string) {}
    move(distance: number) {
        console.log(`${this.name} moved ${distance} meters`);
    }
}

6. 函数类型

• 函数声明：使用 function 关键字定义函数。

• 箭头函数：简洁的函数表达式。

• 可选参数：使用 ? 标记可选参数。

• 默认参数：定义默认值的参数。

• 剩余参数：用 ... 表示不确定数量的参数。

function add(x: number, y: number = 10): number {
    return x + y;
}

7. 泛型 (Generics)

• 提高代码的复用性，使函数、类和接口可以处理不同的数据类型。

• 使用 <T> 定义泛型参数，表示类型变量。

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

8. 类型推断和类型断言

• 类型推断：TypeScript 会自动推断变量类型。

• 类型断言：通过 as 或 <type> 明确指定类型，告诉编译器如何理解变量。

let someValue: any = "hello";
let strLength: number = (someValue as string).length;

9. 类型别名 (Type Aliases)

• 使用 type 关键字为类型定义别名，简化代码。

• 类型别名可以组合联合类型和交叉类型。

type Point = { x: number; y: number };

10. 模块与命名空间

• 模块：在文件间导入导出代码块，使用 import 和 export。

• 命名空间：将相关的变量、函数、类组织在一起，使用 namespace 定义。

11. 高级类型

• 联合类型 (Union Types)：允许变量有多种可能的类型。

• 交叉类型 (Intersection Types)：将多个类型合并成一个。

• 类型守卫 (Type Guards)：使用 typeof、instanceof 等关键字检查类型。

• 条件类型：根据条件动态生成类型。

12. 装饰器 (Decorators)

• 装饰器简介：装饰器是一种特殊的声明，用于修改类、方法、属性或参数的行为。需要启用 experimentalDecorators。

• 种类：包括类装饰器、方法装饰器、属性装饰器、参数装饰器。

• 常见用法：常用于依赖注入、日志记录、验证等。

function log(target: any, key: string) {
    console.log(`${key} was called`);
}

class Example {
    @log
    sayHello() {
        console.log("Hello");
    }
}

13. 命名空间 (Namespaces)

• 命名空间的作用：用于将相关的代码分组，避免全局命名冲突，类似模块的作用。

• 定义方式：使用 namespace 关键字，并在 export 导出内部成员以便外部使用。

• 命名空间合并：同名命名空间可以自动合并。

namespace Utils {
    export function log(msg: string) {
        console.log(msg);
    }
}
Utils.log("Hello, World");