TypeScript 基础类型：初学者的实用指南
如果你正在学习前端开发，或者已经在使用 JavaScript 但想提升代码的健壮性，那么 TypeScript 绝对是你值得投入时间掌握的工具。它在 JavaScript 的基础上加入了静态类型系统，让你在编码阶段就能发现潜在的错误，而不是等到运行时才暴露问题。
而这一切的起点，就是理解 TypeScript 基础类型。它们就像盖房子用的砖块——看似简单，却是构建整个类型系统的基石。今天我们就来系统梳理这些基础类型，用真实场景和清晰代码，带你一步步掌握它们的用法。
布尔值与数字类型：最简单的两种类型
在编程中，布尔值（boolean）和数字（number）是最基础的数据类型。TypeScript 为它们提供了明确的类型声明，防止你误把字符串当作数字使用。
// 声明一个布尔变量，值只能是 true 或 false
let isDone: boolean = false;
// 声明一个数字变量，支持整数和浮点数
let age: number = 25;
// 尝试赋值错误类型会报错（TypeScript 编译时检查）
// isDone = "yes"; // ❌ 错误：不能将字符串赋值给 boolean 类型
// age = "25"; // ❌ 错误：不能将字符串赋值给 number 类型
💡 小贴士：TypeScript 的类型检查是在编译阶段完成的。这意味着你写的代码虽然看起来像 JS，但实际运行前已经经过了“体检”，能提前发现很多低级错误。
在实际项目中，这类类型常用于表单验证、状态控制等场景。比如：
// 判断用户是否登录
let isLoggedIn: boolean = false;
// 登录成功后设置为 true
function login() {
isLoggedIn = true;
console.log("用户已登录");
}
// 检查登录状态
if (isLoggedIn) {
console.log("欢迎回来！");
} else {
console.log("请先登录");
}
字符串与模板字面量：处理文本数据
字符串（string）是处理文本的核心类型。TypeScript 允许你用单引号、双引号或反引号定义字符串。其中，反引号（`）支持模板字面量，功能更强大。
// 基本字符串声明
let name: string = "小明";
// 使用模板字面量插入变量
let greeting: string = `你好，${name}！今天是 ${new Date().toLocaleDateString()}。`;
// 模板字面量还可以换行，适合构建 HTML 片段
let htmlTemplate: string = `
<div class="user-card">
<h3>${name}</h3>
<p>年龄：${age}</p>
</div>
`;
console.log(greeting); // 输出：你好，小明！今天是 2025/4/5。
📌 注意：模板字面量中的变量必须用
${}包裹，否则会被当作普通字符串处理。
在开发中，字符串类型常用于构建动态内容，比如 API 返回的用户名、用户输入的文本等。通过 TypeScript 的类型系统，你可以确保这些字符串变量始终是“字符串”，避免出现 null 或 undefined 导致的崩溃。
数组与元组：组织多个数据
当你需要存储一组相同或不同类型的数据时，数组（array）和元组（tuple）就是你的得力助手。
创建数组与初始化
// 声明一个字符串数组
let colors: string[] = ["红色", "绿色", "蓝色"];
// 或者使用泛型语法
let numbers: Array<number> = [1, 2, 3, 4, 5];
// 尝试添加非数字元素会报错
// numbers.push("六"); // ❌ 错误：不能将字符串添加到 number[] 数组
数组类型的优势在于，你可以安全地遍历并操作数据，而无需担心类型混乱。
// 安全地遍历数组
function printColors(colorList: string[]) {
colorList.forEach(color => {
console.log(`颜色：${color}`);
});
}
printColors(colors); // 输出：颜色：红色、绿色、蓝色
使用元组：固定结构的数据
元组允许你定义一个具有固定长度和类型顺序的数组。它特别适合表示“一组相关但类型不同的数据”。
// 定义一个元组：[姓名, 年龄, 是否在职]
let employee: [string, number, boolean] = ["张三", 30, true];
// 可以通过下标访问
console.log(employee[0]); // 输出：张三
console.log(employee[1]); // 输出：30
// 但不能随意修改结构
// employee[0] = 123; // ❌ 错误：不能将数字赋值给 string 类型
// employee.push("新员工"); // ❌ 错误：元组长度固定，不能随意添加
🎯 应用场景：元组常用于函数返回多个不同类型的值，比如
getUserInfo()返回[name, age, status]。
null、undefined 与 any：处理“不确定”的值
在 JavaScript 中，null 和 undefined 是常见的“空值”状态。TypeScript 提供了对它们的精细控制，帮助你避免“空指针”类错误。
// 声明变量为 null 或 undefined
let user: null = null;
let message: undefined = undefined;
// 但你不能直接将 null 赋值给非 null 类型的变量
// let name: string = null; // ❌ 错误：null 不能赋值给 string
// 如果你想允许 null，必须显式声明
let optionalName: string | null = null;
optionalName = "李四"; // ✅ 可以赋值字符串
optionalName = null; // ✅ 也可以赋值 null
⚠️ 重要提醒：
|是联合类型操作符，表示“可以是 A 或 B”。我们将在后续章节详细讲解。
any 类型则是一种“宽松”类型，表示“我不管这个变量是什么类型，随便赋值都可以”。虽然它能绕过类型检查，但强烈建议不要滥用，因为它会失去 TypeScript 的核心优势。
// ❌ 不推荐：使用 any 会失去类型保护
let data: any = "Hello";
data = 123;
data = true;
// ✅ 推荐：使用联合类型明确范围
let data2: string | number | boolean = "Hello";
data2 = 123; // ✅
data2 = true; // ✅
任意类型与类型推断：智能的默认行为
TypeScript 有一个非常强大的特性：类型推断。当你声明变量但不指定类型时，TypeScript 会根据赋值自动推断出类型。
// 类型推断：根据值自动确定类型
let price = 99.9; // 推断为 number
let title = "Vue 3.0"; // 推断为 string
let isActive = true; // 推断为 boolean
// 即使不写类型，TypeScript 依然知道它们的类型
console.log(price.toFixed(2)); // ✅ 可以调用 number 的方法
console.log(title.toUpperCase()); // ✅ 可以调用 string 的方法
🔄 类型推断的本质：TypeScript 会分析你赋的值，自动推导出最合适的类型，让你写代码更简洁。
但当你需要明确控制类型时，依然要手动声明。比如：
// 明确声明类型，提高可读性和安全性
function calculateTax(income: number, taxRate: number): number {
return income * taxRate;
}
// 调用函数时，类型检查生效
const totalTax = calculateTax(5000, 0.15); // ✅ 正确
// const wrong = calculateTax("5000", 0.15); // ❌ 编译错误：字符串不能传给 number
总结：掌握基础类型，迈向类型安全编程
今天我们系统地学习了 TypeScript 基础类型的核心内容：布尔值、数字、字符串、数组、元组、null/undefined 以及类型推断。这些类型不是孤立的，而是共同构成了 TypeScript 类型系统的“地基”。
当你在项目中开始使用这些类型，你会发现：
- 代码更清晰，其他人更容易理解你的意图；
- 编辑器能提供精准的提示和自动补全；
- 错误更早暴露，减少线上 Bug；
- 团队协作更高效，减少“你传的是字符串还是数组？”这类沟通成本。
✅ 建议实践：从今天起，在声明变量时，不要依赖类型推断，而是主动写出类型。即使只写
: string或: number，也能让你的代码更可靠。
TypeScript 基础类型看似简单，却是构建健壮应用的第一步。掌握它们，你就已经走在了更专业、更高效的开发路上。