TypeScript 作为 JavaScript 的超集，最大的优势就是提供了静态类型系统。理解基础类型是掌握 TypeScript 的关键第一步。本文将带你深入浅出地了解这些基础类型，并展示它们在实际开发中的应用。
一、布尔值：最简单的真假判断
布尔值表示最基本的逻辑状态：真(true)或假(false)。在 TypeScript 中，我们使用 boolean 类型：
typescript
let isLoading: boolean = true; // 页面正在加载
let hasPermission: boolean = false; // 用户没有权限
// 类型检查会防止错误赋值
// hasPermission = "yes"; // 错误：不能将字符串赋给布尔值
实际应用场景：开关状态、权限检查、条件判断等。
二、数字：不仅仅是整数
TypeScript 中所有数字都是浮点数，统一用 number 类型表示。支持多种进制写法：
typescript
// 十进制
let price: number = 99.99;
// 二进制（0b开头）
let binary: number = 0b1010; // 十进制10
// 八进制（0o开头）
let octal: number = 0o12; // 十进制10
// 十六进制（0x开头）
let hex: number = 0xA; // 十进制10
实际应用场景：价格计算、数量统计、坐标位置等数值操作。
三、字符串：文本处理利器
字符串用于处理文本数据，支持单引号、双引号和模板字符串：
typescript
let username: string = '张三';
let greeting: string = "你好！";
// 模板字符串（ES6特性）
let message: string = `${username}，${greeting}`;
// 输出：张三，你好！
// 类型安全保证
// username = 123; // 错误：数字不能赋给字符串
实际应用场景：用户界面文本、API 消息、动态内容生成等。
四、数组：有序数据集合
TypeScript 提供了两种定义数组的方式：
typescript
// 方式一：类型+方括号
let numbers: number[] = [1, 2, 3];
// 方式二：泛型语法
let colors: Array<string> = ['红', '绿', '蓝'];
// 类型安全保证
numbers.push(4); // 正确
// numbers.push('五'); // 错误：不能添加字符串到数字数组
实际应用场景：商品列表、用户数据集合、任何需要有序存储的场景。
五、元组：固定结构的特殊数组
元组允许创建元素类型不同但顺序固定的数组：
typescript
// 定义用户信息：姓名(string)，年龄(number)，是否会员(boolean)
let userInfo: [string, number, boolean] = ['李四', 28, true];
// 正确访问
console.log(`姓名：${userInfo[0]}，年龄：${userInfo[1]}`);
// 错误访问示例
// userInfo[1] = '二十九'; // 错误：年龄位置必须是数字
// userInfo[3] = '额外数据'; // 错误：超出已知索引范围
实际应用场景：函数返回多个不同类型的值、API 返回固定结构的数据。
六、枚举：给数字赋予意义
枚举让我们可以定义一组命名常量，使代码更易读：
typescript
// 订单状态枚举
enum OrderStatus {
Pending, // 0 - 待处理
Processing, // 1 - 处理中
Shipped, // 2 - 已发货
Delivered // 3 - 已送达
}
let currentStatus: OrderStatus = OrderStatus.Processing;
console.log(currentStatus); // 输出：1
// 反向映射：通过值获取名称
console.log(OrderStatus[2]); // 输出："Shipped"
// 自定义枚举值
enum Priority {
Low = 10,
Medium = 20,
High = 30
}
实际应用场景：状态管理、选项设置、权限级别等需要明确含义的常量。
七、特殊类型：any、void 和 object
any：灵活但慎用
any 类型关闭类型检查，应谨慎使用：
typescript
void：表示"没有返回值"
let dynamicData: any = '初始字符串';
dynamicData = 100; // 允许
dynamicData = true; // 允许
// 慎用场景：处理第三方库或动态内容
const apiResponse: any = fetchDataFromAPI();
主要用于函数返回值类型：
typescript
function showMessage(msg: string): void {
console.log(msg);
// 不需要return语句或只能return undefined/null
}
object：非原始类型
表示非原始类型的值（不是 number, string, boolean 等）：
typescript
function processObject(obj: object): void {
console.log(obj.toString());
}
processObject({ name: '王五' }); // 正确
processObject([1, 2, 3]); // 正确
// processObject('字符串'); // 错误：原始类型
八、联合类型：灵活的类型组合
联合类型允许变量是多种类型之一：
typescript
// ID可以是数字或字符串
let id: number | string = 1001;
id = 'EMP-1001'; // 也允许
// 处理不同类型输入
function printId(inputId: number | string) {
if (typeof inputId === 'number') {
console.log('数字ID:', inputId);
} else {
console.log('字符串ID:', inputId.toUpperCase());
}
}
实际应用场景：API 参数处理、组件属性支持多种类型值。
九、类型断言：明确告诉编译器类型
当 TypeScript 无法推断类型时，我们可以使用类型断言：
typescript
// 从API获取的数据，我们知道是字符串
let apiData: any = '这是一段文本';
// 方式一：尖括号语法
let textLength: number = (<string>apiData).length;
// 方式二：as语法（推荐，尤其在React中）
let textLength2: number = (apiData as string).length;
十、类型推断：让TS自动判断类型
TypeScript 能在很多情况下自动推断类型：
typescript
// 声明并赋值时，自动推断类型
let username = '张三'; // 推断为string
// username = 123; // 错误：不能将数字赋给字符串
// 声明但未赋值时，推断为any类型
let tempValue; // 类型为any
tempValue = 100;
tempValue = '临时值';
最佳实践总结
-
优先使用类型推断：减少不必要的类型注解typescript
// 好：自动推断为string let greeting = 'Hello'; // 不必要：显式注解 let greeting: string = 'Hello'; -
避免过度使用 any：只在必要时使用typescript
// 不好：失去类型安全 let data: any = fetchData(); // 更好：定义具体类型或接口 interface UserData { id: number; name: string; } let user: UserData = fetchData(); -
善用枚举增强可读性****typescript
// 比直接使用数字更清晰 if (status === OrderStatus.Delivered) { // 执行送达后操作 } -
联合类型配合类型守卫****typescript
function processInput(input: string | number) { if (typeof input === 'string') { // 这里input被识别为string return input.trim(); } // 这里input被识别为number return input.toFixed(2); } -
优先使用 as 语法进行类型断言：更清晰且兼容 JSX