类型声明空间类型声明就是告诉 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 stringsomeValue; // JSX 中不推荐