类型与变量
类型声明空间
类型声明就是告诉 TypeScript"这个东西是什么类型"的语句。它就像是给变量、函数、对象等贴上的类型标签，让 TypeScript 编译器知道该如何理解和检查你的代码。
| 类型声明空间 | 存储类型别名、接口、类（类型部分） | interface User {}type ID = string |
// 这些声明都进入类型声明空间 interface User { name: string; } // ✅ 进入类型空间 type ID = string | number; // ✅ 进入类型空间 class Animal { name: string; } // ✅ 同时进入类型空间（作为类型） enum Color { Red, Green } // ✅ 同时进入类型空间（作为类型） // 这些不进入类型声明空间 const x = 10; // ❌ 只进入变量空间 function foo() {} // ❌ 只进入变量空间type 可以用来定义别名，纯类型空间居民
type ID = string | number; ID只能是string类型或者number类型type Status = "pending" | "success" | "error"; 创建了一个叫 Status 的"类型"，这个类型的值只能是 "pending"、"success" 或 "error" 这三个字符串中的一个。变量声明空间
| 变量声明空间 | 存储变量、函数、类（值部分） | const x = 1function foo() {} |
Class的双重身份（双空间）
"双空间公民"意思是：一个class声明同时做了两件事：
创建了一个类型（在类型声明空间）- 用于类型检查
创建了一个构造函数（在变量声明空间）- 用于创建对象
// ✅ 类同时存在于两个空间 class Person { name: string; constructor(name: string) { this.name = name; } } // 作为类型使用（类型声明空间） let p: Person; // 类型注解 // 作为值使用（变量声明空间） const p2 = new Person("Alice"); // 创建实例 // ❌ interface 只存在于类型空间 interface Animal { species: string; } // 错误！不能用作值 // const a = new Animal(); // ❌ 'Animal' 仅表示类型 // ✅ Person 作为"类型"使用 let person1: Person; // 声明变量类型 // 作为变量使用 let person1 = Person // 变量代表Person的构造函数， console.log(typeof p) // function同名声明（互相独立的两个空间）
// 同名标识符可以在两个空间中独立存在 type State = string; // 类型空间 const State = "pending"; // 变量空间（不冲突） // 类的双重作用 class User { static type = "admin"; // 类静态属性（变量空间） name: string; // 实例属性（类型空间的一部分） } // 类型别名与变量同名 type ID = number; const ID = 123; // ✅ 可以共存类型注解
类型注解是显式告诉 TypeScript 变量、参数、返回值等应该是什么类型的语法。
// 基本语法 let variable: type = value;
// 示例 let age: number = 25; let name: string = "Alice"; let isActive: boolean = true; let items: string[] = ["a", "b"]; // 函数参数和返回值 function greet(name: string): string { return `Hello, ${name}`; } // 箭头函数 const add = (a: number, b: number): number => a + b;类型推断
TypeScript 能够在没有显式类型注解的情况下，根据上下文自动推断出变量的类型。
// 基础推断 let x = 3; // 推断为 number let y = "hello"; // 推断为 string let z = [1, 2, 3]; // 推断为 number[] // 函数返回值推断 function sum(a: number, b: number) { return a + b; // 推断返回类型为 number } // 上下文类型推断 window.onmousedown = function(e) { // e 被推断为 MouseEvent 类型 console.log(e.button); };类型注解 vs 类型断言
// 类型注解：编译时检查，限制赋值 let a: string | number = "hello"; a = 42; // ✅ 可以 // a = true; // ❌ 类型不匹配 // 类型断言：告诉编译器"相信我，我知道类型" const el = document.getElementById("app") as HTMLDivElement; const value = "123" as unknown as number; // 双重断言 // 断言语法 const val1 = someValue as string; const val2 = <string>someValue; // JSX 中不推荐