为什么你该做一次 TypeScript 测验？
在前端开发领域，TypeScript 已经从“新潮流”变成了“标配”。无论是 Vue 3.0 还是 React 18，主流框架都对 TypeScript 提供了原生支持。你可能已经接触过它，但是否真正理解它的核心思想？是否能应对实际项目中的类型推断、接口定义、泛型使用等常见问题？
不妨先问自己几个问题：
- 你能否准确说出
any和unknown的区别？ - 当你写一个函数时，能否避免“类型不安全”的陷阱？
- 面对复杂嵌套的对象结构，你是否还能清晰定义类型？
这些问题，正是“TypeScript 测验”要检验的核心能力。它不是一场考试，而是一次自我诊断。通过测验，你能发现自己的薄弱环节，比如对联合类型理解不清、对可选属性使用不当等。
更重要的是，测验帮助你建立“类型思维”——一种从“写代码”到“设计类型”的转变。这就像盖房子，光有砖瓦不行，还得有图纸和结构。TypeScript 就是那张设计图，让你的代码更健壮、更易维护。
如果你是初学者，别担心；如果你是中级开发者，也别掉以轻心。接下来的内容，将带你一步步深入 TypeScript 的核心机制，用真实案例和代码示例，让你在做“TypeScript 测验”时，不再盲目。
类型系统入门：从变量声明说起
在 JavaScript 中，变量可以随时改变类型。比如：
let value = "hello";
value = 123;
value = true;
这段代码完全合法，但代价是运行时才暴露错误。而 TypeScript 的出现，正是为了在编译阶段就发现问题。
我们来看一个 TypeScript 的基本写法：
let name: string = "Alice";
let age: number = 25;
let isStudent: boolean = true;
// 类型推断：即使不写类型，TypeScript 也能自动识别
let greeting = "Hello"; // 类型自动推断为 string
💡 注释：
string、number、boolean是 TypeScript 的基础类型。name: string表示这个变量只能存储字符串。如果后续赋值为数字，编译器会报错。
这种“提前声明类型”的方式，就像给变量贴上标签，防止它被“误用”。当你在团队协作中，这份明确性会极大提升代码可读性和维护效率。
接口与类型别名：构建复杂类型的骨架
当你面对一个用户对象时，光用基础类型显然不够。这时候，接口（Interface）和类型别名（Type Alias）就派上用场了。
创建接口定义用户结构
interface User {
id: number; // 用户唯一标识
name: string; // 姓名
email: string; // 邮箱
isActive?: boolean; // 可选属性：是否激活
roles: string[]; // 角色数组
}
// 使用接口定义变量
const user: User = {
id: 101,
name: "Bob",
email: "bob@example.com",
roles: ["admin", "editor"]
};
💡 注释：
isActive?: boolean中的?表示该属性是可选的，不赋值也不会报错。roles: string[]表示这是一个字符串数组。
类型别名：更灵活的类型定义方式
type Status = "active" | "inactive" | "pending"; // 联合类型：只能是这三个值之一
interface Product {
name: string;
price: number;
status: Status; // 只能是 active、inactive 或 pending
}
const product: Product = {
name: "iPhone",
price: 9999,
status: "active" // 正确
// status: "unknown" // 编译错误！类型不匹配
};
💡 注释：
type Status = "active" | "inactive" | "pending"定义了一个联合类型，表示status字段只能取这三个字符串值之一。这在表单校验、状态管理中非常实用。
泛型：让函数和类更具通用性
你有没有写过一个“通用”函数，比如数组反转？在 JavaScript 中，它能处理任何类型。但一旦用 TypeScript，问题就来了：你如何告诉编译器“这个函数适用于任意类型”？
答案是：泛型（Generics）。
泛型函数：处理任意类型的数据
function identity<T>(arg: T): T {
return arg;
}
// 使用泛型函数
const result1 = identity<string>("hello"); // 返回 "hello"
const result2 = identity<number>(42); // 返回 42
const result3 = identity<boolean>(true); // 返回 true
// 类型推断：TypeScript 可以自动识别类型
const result4 = identity("world"); // 类型推断为 string
💡 注释：
<T>是泛型参数，表示“任意类型”。arg: T表示输入参数是泛型类型，返回值也是相同类型。这样，函数就不受具体类型限制，同时保持类型安全。
泛型类：构建可复用的容器
class Stack<T> {
private items: T[] = [];
push(item: T): void {
this.items.push(item);
}
pop(): T | undefined {
return this.items.pop();
}
size(): number {
return this.items.length;
}
}
// 使用泛型类
const numberStack = new Stack<number>();
numberStack.push(1);
numberStack.push(2);
console.log(numberStack.pop()); // 输出 2
const stringStack = new Stack<string>();
stringStack.push("A");
stringStack.push("B");
console.log(stringStack.pop()); // 输出 "B"
💡 注释：
class Stack<T>表示这个类可以处理任意类型的元素。T[]是一个类型数组，push和pop方法的参数和返回值都遵循这个类型规则。
类型断言与类型守卫：处理不确定类型
现实开发中，你常常会遇到“我知道它是某种类型，但 TypeScript 不知道”的情况。这时候，类型断言（Type Assertion）就出场了。
类型断言：告诉编译器“我确定”
const userInput = document.getElementById("username") as HTMLInputElement;
// 如果不使用断言，会报错：Element 可能为 null
if (userInput) {
console.log(userInput.value); // 正确访问 value 属性
}
💡 注释：
as HTMLInputElement告诉 TypeScript：“我知道这个元素是输入框，别担心。” 但要小心使用，如果断言错误，运行时会出错。
类型守卫：更安全的类型判断
function isString(value: unknown): value is string {
return typeof value === "string";
}
function processInput(value: unknown) {
if (isString(value)) {
console.log(value.toUpperCase()); // TypeScript 知道 value 是 string
} else {
console.log("不是字符串");
}
}
processInput("hello"); // 输出 HELLO
processInput(123); // 输出 不是字符串
💡 注释：
value is string是类型谓词，表示“如果返回 true，则 value 是 string 类型”。这是一种更安全的类型判断方式，比instanceof更灵活。
实战案例：模拟一个“TypeScript 测验”题目
我们来做一个真实的“TypeScript 测验”题，看看你是否掌握核心概念。
题目：实现一个用户管理器
需求如下：
- 能添加用户（
addUser） - 能根据 ID 查询用户（
getUserById） - 用户数据保存在内存中
- 支持类型检查，防止错误赋值
interface User {
id: number;
name: string;
email: string;
age?: number;
}
class UserManager {
private users: User[] = [];
addUser(user: User): void {
// 检查 id 是否已存在
if (this.users.some(u => u.id === user.id)) {
throw new Error(`用户 ID ${user.id} 已存在`);
}
this.users.push(user);
}
getUserById(id: number): User | undefined {
return this.users.find(u => u.id === id);
}
getAllUsers(): User[] {
return this.users;
}
}
// 使用示例
const manager = new UserManager();
try {
manager.addUser({
id: 1,
name: "Alice",
email: "alice@example.com",
age: 28
});
const user = manager.getUserById(1);
if (user) {
console.log(`找到用户：${user.name}`);
}
} catch (error) {
console.error(error.message);
}
💡 注释：这个例子融合了接口、类、数组操作和错误处理。类型系统确保
addUser只能接收符合User接口的对象，防止id缺失或类型错误。
总结：让 TypeScript 成为你的好伙伴
TypeScript 不是“增加复杂度”，而是“降低风险”。它让你在写代码时，就提前发现问题。一次“TypeScript 测验”，不仅是对知识的检验，更是对编码习惯的反思。
从变量类型到接口定义，从泛型到类型守卫，每一个知识点都在帮助你写出更健壮、更可维护的代码。尤其是在团队协作中，类型系统就是沟通的桥梁。
别再让 undefined is not a function 这类错误困扰你。用好 TypeScript，让编译器帮你把关，让你的代码更优雅、更高效。
无论你是初学者还是中级开发者，不妨现在就动手写一段代码，做一次“TypeScript 测验”。你会发现，原来类型系统，也可以很温柔。