TypeScript 中的数据类型有哪些？

作为前端开发者，我们经历了从 ES5 到 ES6 的语法变革，而 TypeScript 的出现则为我们带来了更强大的类型系统。本文将从 JavaScript 的基础数据类型出发，逐步深入探讨 TypeScript 的类型系统，帮助大家理解类型系统如何提升代码质量和开发体验。

JavaScript 的数据类型回顾

1. ES5 基本数据类型

在 ES5 时代，JavaScript 有 5 种原始数据类型和 1 种引用数据类型：

js 复制代码

// 原始数据类型 
var str = 'Hello'; // 字符串 
var num = 42; // 数字 
var bool = true; // 布尔值 
var n = null; // null 
var u = undefined; // undefined 

// 引用数据类型 
var obj = { name: 'Alice' }; // 对象 
var arr = [1, 2, 3]; // 数组（也是对象） 
var func = function() {}; // 函数（也是对象）

特点：

类型在运行时确定
没有静态类型检查
变量可以随时改变类型（动态类型）

2. ES6 新增数据类型

ES6 引入了 Symbol 类型，并增强了对象字面量的语法：

js 复制代码

// 新增原始类型
const sym = Symbol('unique'); // Symbol
 
// 对象字面量增强
const person = {
  name: 'Bob',
  age: 30,
  [sym]: 'secret', // 计算属性名
  greet() {        // 方法简写
    console.log(`Hi, I'm ${this.name}`);
  }
};

ES6 的局限性：

仍然保持动态类型特性
缺乏类型安全，大型项目容易出错
无法在编译时发现类型相关错误

TypeScript 的类型系统

TypeScript 在 JavaScript 的基础上引入了静态类型系统，提供了更丰富的类型定义方式。

1. 原始类型

TypeScript 支持所有 JavaScript 原始类型，但需要显式声明：

ts 复制代码

// 字符串
let str: string = 'Hello TypeScript';
 
// 数字
let num: number = 42;
 
// 布尔值
let isDone: boolean = false;
 
// null 和 undefined
let n: null = null;
let u: undefined = undefined;
 
// Symbol (ES6)
let sym: symbol = Symbol('unique');

特点：

类型声明是可选的（可以推断）
提供更好的代码提示和错误检查
可以在编译时捕获类型错误

2. 对象类型

TypeScript 为对象提供了更精确的类型定义：

ts 复制代码

// 对象字面量
let person: {
  name: string;
  age: number;
  isStudent?: boolean; // 可选属性
  [key: string]: any;  // 索引签名
} = {
  name: 'Alice',
  age: 25
};
 
// 数组
let numbers: number[] = [1, 2, 3];
let strings: Array<string> = ['a', 'b', 'c']; // 泛型语法
 
// 元组 (固定长度和类型的数组)
let tuple: [string, number] = ['hello', 10];
 
// 函数
function greet(name: string): string {
  return `Hello, ${name}`;
}
 
let add: (a: number, b: number) => number = (a, b) => a + b;

3. 特殊类型

TypeScript 引入了一些 JavaScript 中不存在的特殊类型：

ts 复制代码

// any - 放弃类型检查
let anything: any = 'string';
anything = 123;
anything = true;
 
// unknown - 更安全的 any
let unknownValue: unknown = 'unknown';
if (typeof unknownValue === 'string') {
  console.log(unknownValue.length); // 类型守卫后安全访问
}
 
// never - 表示永远不会返回的值
function error(message: string): never {
  throw new Error(message);
}
 
// void - 表示没有返回值
function log(message: string): void {
  console.log(message);
}

4. 高级类型

TypeScript 提供了一些高级类型操作：

ts 复制代码

// 联合类型
let id: string | number = '123';
id = 123;
 
// 交叉类型
interface Person { name: string }
interface Employee { id: number }
let employee: Person & Employee = { name: 'Bob', id: 1 };
 
// 类型别名
type StringOrNumber = string | number;
let value: StringOrNumber = 'text';
 
// 接口
interface User {
  readonly id: number;
  username: string;
  age?: number;
}
 
// 枚举
enum Direction {
  Up = 1,
  Down,
  Left,
  Right
}

类型系统对比

特性	ES5/ES6	TypeScript
类型检查	运行时检查	编译时检查
类型声明	无	显式或隐式
类型安全	低	高
代码提示	基本	丰富
类型复用	无	接口、类型别名、泛型等
高级类型操作	无	联合类型、交叉类型等

实际代码示例

ES6代码示例

js 复制代码

function processData(data) {
  if (Array.isArray(data)) {
    return data.map(item => item.toUpperCase());
  } else if (typeof data === 'string') {
    return data.split(' ').map(word => word.toUpperCase());
  }
  throw new Error('Unsupported data type');
}
 
// 调用时可能出错
const result1 = processData(123); // 运行时错误

ts 复制代码

type Data = string | string[];
 
function processData(data: Data): string[] {
  if (Array.isArray(data)) {
    return data.map(item => item.toUpperCase());
  }
  return data.split(' ').map(word => word.toUpperCase());
}
 
// 调用时编译时检查
const result1 = processData(123); // 编译错误: 类型不匹配
const result2 = processData('hello world'); // 正确
const result3 = processData(['hello', 'world']); // 正确

总结

TypeScript 的类型系统在 JavaScript 的基础上提供了：

更早的错误检测：在编译阶段发现类型错误
更好的代码可维护性：明确的类型声明使代码意图更清晰
更强的 IDE 支持：类型信息提供更好的自动补全和重构能力
更丰富的类型操作：支持复杂类型定义和操作

虽然 TypeScript 增加了学习成本，但在大型项目中，其带来的类型安全性和开发效率提升是显著的。建议从简单的类型注解开始，逐步掌握 TypeScript 的高级特性。