类型与变量 - 技术栈

类型声明空间

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

|------------|-------------------|----------------------------------------|
| 类型声明空间 | 存储类型别名、接口、类（类型部分） | interface User {} type ID = string |

javascript 复制代码

// 这些声明都进入类型声明空间
interface User { name: string; }     // ✅ 进入类型空间
type ID = string | number;           // ✅ 进入类型空间
class Animal { name: string; }       // ✅ 同时进入类型空间（作为类型）
enum Color { Red, Green }            // ✅ 同时进入类型空间（作为类型）

// 这些不进入类型声明空间
const x = 10;                        // ❌ 只进入变量空间
function foo() {}                    // ❌ 只进入变量空间

type 可以用来定义别名，纯类型空间居民

javascript 复制代码

type ID = string | number;
ID只能是string类型或者number类型

javascript 复制代码

type Status = "pending" | "success" | "error"; 
创建了一个叫 Status 的"类型"，这个类型的值只能是 "pending"、"success" 或 "error" 这三个字符串中的一个。

变量声明空间

|------------|----------------|-----------------------------------|
| 变量声明空间 | 存储变量、函数、类（值部分） | const x = 1 function foo() {} |

Class的双重身份（双空间）

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

创建了一个类型（在类型声明空间）- 用于类型检查
创建了一个构造函数（在变量声明空间）- 用于创建对象

TypeScript 复制代码


// ✅ 类同时存在于两个空间
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' 仅表示类型

javascript 复制代码

// ✅ Person 作为"类型"使用
let person1: Person;           // 声明变量类型



// 作为变量使用
let person1 = Person // 变量代表Person的构造函数，
console.log(typeof p)  // function

同名声明（互相独立的两个空间）

java 复制代码

// 同名标识符可以在两个空间中独立存在
type State = string;        // 类型空间
const State = "pending";    // 变量空间（不冲突）

// 类的双重作用
class User {
  static type = "admin";      // 类静态属性（变量空间）
  name: string;               // 实例属性（类型空间的一部分）
}

// 类型别名与变量同名
type ID = number;
const ID = 123;  // ✅ 可以共存

类型注解

类型注解是显式告诉 TypeScript 变量、参数、返回值等应该是什么类型的语法。

复制代码

// 基本语法
let variable: type = value;

javascript 复制代码

// 示例
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 能够在没有显式类型注解 的情况下，根据上下文自动推断出变量的类型。

javascript 复制代码

// 基础推断
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 类型断言

javascript 复制代码

// 类型注解：编译时检查，限制赋值
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 中不推荐