TypeScript 学习笔记#

let str: string = "hello";
let num: number = 42;
let bool: boolean = true;
let n: null = null;
let u: undefined = undefined;
let big: bigint = 100n;
let sym: symbol = Symbol("id");

// 数组
let arr: number[] = [1, 2, 3];
let arr2: Array<string> = ["a", "b"];

// 元组（固定长度和类型的数组）
let tuple: [string, number] = ["hello", 42];
let tuple2: [string, number, boolean] = ["a", 1, true];

// 可选元素
let tuple3: [string, number?] = ["a"];

// 数字枚举（默认从 0 开始）
enum Direction { Up, Down, Left, Right }
let d: Direction = Direction.Up;   // 0

// 字符串枚举
enum Color { Red = "RED", Green = "GREEN", Blue = "BLUE" }
let c: Color = Color.Red;   // "RED"

// 异构枚举（不推荐）
enum Mixed { No = 0, Yes = "YES" }

// const enum（内联，编译后消失）
const enum Status { Active, Inactive }
let s = Status.Active;   // 编译为: let s = 0;

// any：放弃类型检查（尽量少用）
let a: any = 42;
a = "hello";   // OK
a.foo();       // OK（编译器不检查）

// unknown：类型安全的 any
let u: unknown = 42;
u.toFixed();   // 错误！必须先类型收窄
if (typeof u === "number") {
    u.toFixed();   // OK
}

// never：永远不会有值的类型
function infiniteLoop(): never {
    while (true) {}
}
function throwError(msg: string): never {
    throw new Error(msg);
}

// void：函数没有返回值
function log(msg: string): void {
    console.log(msg);
}

// 尖括号语法（JSX 中不可用）
let len: number = (<string>someValue).length;

// as 语法（推荐，JSX 兼容）
let len2: number = (someValue as string).length;

// 双重断言（当类型不重叠时）
let s = (obj as unknown) as string;

interface User {
    name: string;
    age: number;
    email?: string;              // 可选属性
    readonly id: number;         // 只读属性
}

const u: User = { name: "Alice", age: 25, id: 1 };

// 函数接口
interface SearchFn {
    (source: string, keyword: string): boolean;
}
const search: SearchFn = (s, k) => s.includes(k);

// 可索引接口
interface StringArray {
    [index: number]: string;
}
const arr: StringArray = ["a", "b"];

interface Animal {
    name: string;
}
interface Dog extends Animal {
    bark(): void;
}
interface Cat extends Animal {
    meow(): void;
}

// 多继承
interface Bird extends Animal, Dog {
    fly(): void;
}

type UserName = string;
type ID = number | string;
type Callback = (data: any) => void;

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

type Tree = {
    value: number;
    left?: Tree;
    right?: Tree;
};

// interface 可以重复声明（自动合并）
interface Window { foo: string; }
interface Window { bar: number; }
// 合并为: { foo: string; bar: number }

// type 不能重复声明
type Foo = string;
// type Foo = number;  // 错误

// 完整函数类型
function add(a: number, b: number): number {
    return a + b;
}

// 箭头函数
const multiply = (a: number, b: number): number => a * b;

// 类型别名
type MathFn = (a: number, b: number) => number;
const divide: MathFn = (a, b) => a / b;   // 参数类型自动推断

// 可选参数（必须在必选参数后面）
function greet(name: string, greeting?: string): string {
    return `${greeting || "Hello"}, ${name}`;
}

// 默认值（自动推断为可选）
function greet2(name: string, greeting: string = "Hello"): string {
    return `${greeting}, ${name}`;
}

// 剩余参数
function sum(...nums: number[]): number {
    return nums.reduce((a, b) => a + b, 0);
}

// 重载签名
function padLeft(value: string, padding: number): string;
function padLeft(value: string, padding: string): string;

// 实现签名（对外不可见）
function padLeft(value: string, padding: number | string): string {
    if (typeof padding === "number") {
        return " ".repeat(padding) + value;
    }
    return padding + value;
}

padLeft("hello", 3);      // "   hello"
padLeft("hello", ">>");   // ">>hello"
padLeft("hello", true);   // 错误

class Animal {
    // 属性修饰符
    public name: string;        // 公开（默认）
    private id: number;         // 私有（类内可访问）
    protected species: string;  // 受保护（类和子类可访问）
    readonly birth: Date;       // 只读

    // 静态属性
    static count: number = 0;

    // 构造函数
    constructor(name: string, species: string) {
        this.name = name;
        this.species = species;
        this.id = ++Animal.count;
        this.birth = new Date();
    }

    // 方法
    public describe(): string {
        return `${this.name} is a ${this.species}`;
    }
}

// 参数属性：构造函数参数直接声明为类属性
class User {
    constructor(
        public name: string,      // 自动创建 public name 属性
        private age: number,      // 自动创建 private age 属性
        readonly email: string    // 自动创建 readonly email 属性
    ) {}
}

const u = new User("Alice", 25, "a@b.com");
console.log(u.name);   // "Alice"

// 抽象类
abstract class Shape {
    abstract area(): number;          // 抽象方法，子类必须实现
    protected color: string;
    constructor(color: string) {
        this.color = color;
    }
}

class Circle extends Shape {
    constructor(color: string, private radius: number) {
        super(color);
    }
    area(): number {
        return Math.PI * this.radius ** 2;
    }
}

class Square extends Shape {
    constructor(color: string, private side: number) {
        super(color);
    }
    area(): number {
        return this.side ** 2;
    }
}

// interface 定义能力
interface Comparable {
    compareTo(other: this): number;
}

// implements：实现接口（只检查形状，不继承实现）
class Money implements Comparable {
    constructor(public amount: number) {}
    compareTo(other: Money): number {
        return this.amount - other.amount;
    }
}

// extends：继承父类（获得实现）
class Dollar extends Money {
    constructor(amount: number) {
        super(amount);
    }
}

class Temperature {
    private _celsius: number = 0;

    get celsius(): number {
        return this._celsius;
    }
    set celsius(value: number) {
        if (value < -273.15) throw new Error("Below absolute zero");
        this._celsius = value;
    }

    get fahrenheit(): number {
        return this._celsius * 9/5 + 32;
    }
    set fahrenheit(value: number) {
        this._celsius = (value - 32) * 5/9;
    }
}

// 泛型函数：T 是类型参数
function identity<T>(value: T): T {
    return value;
}

identity<string>("hello");   // 显式指定 T = string
identity(42);                // 推断 T = number

// 多类型参数
function pair<K, V>(key: K, value: V): [K, V] {
    return [key, value];
}
pair("name", "Alice");       // [string, string]
pair(1, true);               // [number, boolean]

// 泛型接口
interface Box<T> {
    value: T;
}
const strBox: Box<string> = { value: "hello" };
const numBox: Box<number> = { value: 42 };

// 泛型类
class Stack<T> {
    private items: T[] = [];
    push(item: T): void { this.items.push(item); }
    pop(): T | undefined { return this.items.pop(); }
    get size(): number { return this.items.length; }
}

const s = new Stack<number>();
s.push(1);
s.push(2);
s.pop();   // 2

// 约束 T 必须有 length 属性
function getLength<T extends { length: number }>(arg: T): number {
    return arg.length;
}
getLength("hello");     // 5
getLength([1, 2, 3]);   // 3
// getLength(42);       // number 没有 length

// 使用 keyof 约束
function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
    return obj[key];
}
getProperty({ name: "Alice", age: 25 }, "name");   // string
getProperty({ name: "Alice", age: 25 }, "age");    // number
// getProperty({ name: "Alice" }, "email");         // key 不存在

interface Container<T = string> {
    value: T;
}
const c1: Container = { value: "hello" };        // T 默认为 string
const c2: Container<number> = { value: 42 };     // 显式指定 number

// 一个值可以是多种类型之一
type ID = number | string;
function findUser(id: ID) {
    if (typeof id === "string") {
        id.toUpperCase();   // TS 知道这里是 string
    } else {
        id.toFixed();       // TS 知道这里是 number
    }
}

// 字面量联合
type Status = "pending" | "success" | "error";
type Direction = "up" | "down" | "left" | "right";

// 对象联合（可辨识联合）
interface Success { status: "success"; data: string; }
interface Error { status: "error"; message: string; }
type Result = Success | Error;

function handle(r: Result) {
    if (r.status === "success") {
        console.log(r.data);    // TS 知道是 Success
    } else {
        console.log(r.message); // TS 知道是 Error
    }
}

// 将多个类型合并为一个
type Named = { name: string };
type Aged = { age: number };
type Person = Named & Aged;

const p: Person = { name: "Alice", age: 25 };   // 必须同时满足两个类型

// 实用场景：混入（mixin）
type WithTimestamp = { createdAt: Date; updatedAt: Date };
type AuditableUser = User & WithTimestamp;

function process(value: string | number) {
    if (typeof value === "string") {
        value.toUpperCase();   // string
    } else {
        value.toFixed();       // number
    }
}

class Cat { meow(): void {} }
class Dog { bark(): void {} }

function speak(animal: Cat | Dog) {
    if (animal instanceof Cat) {
        animal.meow();
    } else {
        animal.bark();
    }
}

interface Fish { swim(): void; }
interface Bird { fly(): void; }

function move(animal: Fish | Bird) {
    if ("swim" in animal) {
        animal.swim();
    } else {
        animal.fly();
    }
}

// is 关键字：自定义类型守卫
function isString(value: unknown): value is string {
    return typeof value === "string";
}

function process(value: unknown) {
    if (isString(value)) {
        value.toUpperCase();   // TS 知道 value 是 string
    }
}

// 复杂例子：检查对象是否包含特定属性
function hasProperty<K extends string>(
    obj: unknown,
    key: K
): obj is Record<K, unknown> {
    return typeof obj === "object" && obj !== null && key in obj;
}

let x = 42;          // 推断为 number
let s = "hello";     // 推断为 string
let arr = [1, 2, 3]; // 推断为 number[]
let obj = { name: "Alice", age: 25 };  // { name: string; age: number }

// 函数返回值推断
function add(a: number, b: number) {
    return a + b;    // 返回类型推断为 number
}

// 根据上下文推断参数类型
window.onmousedown = (mouseEvent) => {
    // TS 推断 mouseEvent: MouseEvent
    console.log(mouseEvent.button);
};

// 根据返回类型推断
const names = ["Alice", "Bob", "Charlie"];
names.forEach((name) => {
    // TS 推断 name: string
    console.log(name.toUpperCase());
});

// 混合类型数组推断为联合类型
let arr = [1, "hello", true];
// 推断为 (string | number | boolean)[]

// 但 const 推断为字面量类型
const x = 42;        // 42（字面量）
const s = "hello";   // "hello"（字面量）
const arr = [1, 2, 3] as const;   // readonly [1, 2, 3]

// export 命名导出
export function add(a: number, b: number): number { return a + b; }
export const PI = 3.14159;

// export 默认导出（每个模块最多一个）
export default class Calculator {}

// 导入
import Calculator, { add, PI } from "./calculator";

// 重命名导入
import { add as plus } from "./calculator";

// 导入类型（编译后擦除）
import type { User } from "./types";

// 动态导入
const module = await import("./heavy-module");

// types.ts
export interface User {
    name: string;
    age: number;
}
export type ID = number | string;

// 使用
import type { User, ID } from "./types";
// 或
import { type User, type ID } from "./types";

namespace Utils {
    export function clamp(value: number, min: number, max: number): number {
        return Math.max(min, Math.min(max, value));
    }
    export const VERSION = "1.0";
}

Utils.clamp(5, 0, 10);   // 5

// 类装饰器：接收构造函数，返回新的构造函数
function Logged<T extends new (...args: any[]) => any>(constructor: T) {
    return class extends constructor {
        created = new Date().toISOString();
    };
}

@Logged
class Service {
    constructor(public name: string) {}
}

const s = new Service("api");
console.log((s as any).created);   // 时间戳

// 方法装饰器：(target, propertyKey, descriptor)
function Log(target: any, key: string, desc: PropertyDescriptor) {
    const original = desc.value;
    desc.value = function (...args: any[]) {
        console.log(`Calling ${key} with`, args);
        return original.apply(this, args);
    };
}

class Calculator {
    @Log
    add(a: number, b: number): number {
        return a + b;
    }
}

// 属性装饰器
function Required(target: any, key: string) {
    // 标记属性为必填（配合验证框架）
}

// 参数装饰器
function Inject(target: any, key: string, index: number) {
    // 依赖注入标记
}

class UserService {
    @Required name!: string;

    save(@Inject repo: Repository) {}
}

// types.d.ts — 只包含类型，不包含实现
declare function greet(name: string): void;

declare const VERSION: string;

declare namespace MyLib {
    function init(config: Config): void;
    interface Config { debug: boolean; }
}

// my-lib.d.ts
declare module "my-lib" {
    export function add(a: number, b: number): number;
    export function subtract(a: number, b: number): number;
    export const PI: number;
}

// 使用
import { add, PI } from "my-lib";   // 有类型提示了

/// <reference types="node" />
/// <reference path="./custom-types.d.ts" />

// 现代项目中，推荐用 tsconfig 的 types 和 include 代替

interface User {
    id: number;
    name: string;
    age: number;
    email: string;
}

// Partial<T>：所有属性变可选
type PartialUser = Partial<User>;
// { id?: number; name?: string; age?: number; email?: string; }

// Required<T>：所有属性变必选
type RequiredUser = Required<PartialUser>;

// Readonly<T>：所有属性变只读
type ReadonlyUser = Readonly<User>;
// { readonly id: number; readonly name: string; ... }

// Pick<T, K>：选取部分属性
type UserName = Pick<User, "name" | "email">;
// { name: string; email: string; }

// Omit<T, K>：排除部分属性
type UserWithoutId = Omit<User, "id">;
// { name: string; age: number; email: string; }

// Record<K, V>：构造键值对类型
type UserMap = Record<string, User>;

// ReturnType<T>：获取函数返回类型
function getUser() { return { name: "Alice", age: 25 }; }
type User2 = ReturnType<typeof getUser>;

// Parameters<T>：获取函数参数类型（元组）
type Params = Parameters<typeof getUser>;

// Awaited<T>：解包 Promise<T>
type Data = Awaited<Promise<string>>;   // string

// T extends U ? X : Y
// 如果 T 可赋值给 U，则类型为 X，否则为 Y

type IsString<T> = T extends string ? "yes" : "no";

type A = IsString<string>;    // "yes"
type B = IsString<number>;    // "no"
type C = IsString<"hello">;   // "yes"（字面量也是 string）

// 当 T 是联合类型时，条件类型会分配（distribute）
type ToArray<T> = T extends any ? T[] : never;

type R = ToArray<string | number>;
// 分配为: ToArray<string> | ToArray<number>
// 结果: string[] | number[]

// 阻止分配：用 [T] 包裹
type ToArrayNonDist<T> = [T] extends [any] ? T[] : never;
type R2 = ToArrayNonDist<string | number>;
// 结果: (string | number)[]

// infer：在条件类型中推断类型变量
type UnpackPromise<T> = T extends Promise<infer U> ? U : T;

type R1 = UnpackPromise<Promise<string>>;   // string
type R2 = UnpackPromise<number>;            // number

// 提取数组元素类型
type ElementOf<T> = T extends (infer E)[] ? E : never;
type R3 = ElementOf<string[]>;              // string

// 提取函数第一个参数
type FirstParam<T> = T extends (first: infer P, ...rest: any[]) => any ? P : never;
type R4 = FirstParam<(a: number, b: string) => void>;   // number