企业官网建设流程全解析

类型声明空间

类型声明就是告诉 TypeScript"这个东西是什么类型"的语句。它就像是给变量、函数、对象等贴上的类型标签，让 TypeScript 编译器知道该如何理解和检查你的代码。

// 这些声明都进入类型声明空间 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" 这三个字符串中的一个。

变量声明空间

Class的双重身份（双空间）

"双空间公民"意思是：一个class声明同时做了两件事：

1. 创建了一个类型（在类型声明空间）- 用于类型检查

2. 创建了一个构造函数（在变量声明空间）- 用于创建对象

​ // ✅ 类同时存在于两个空间 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 中不推荐