TypeScript 基础类型完全指南：从入门到最佳实践

TypeScript 的核心价值在于静态类型系统，它在 JavaScript 的灵活性之上增加了编译时类型检查，大幅提升代码的可读性、可维护性和健壮性。掌握基础类型是使用 TypeScript 的第一步，也是最重要的一步。

本文将系统讲解 TypeScript 所有基础类型，并结合真实开发场景给出最佳实践建议。

---

一、为什么需要类型？

JavaScript 是动态弱类型语言：

function add(a, b) {
  return a + b;
}
add("1", 2); // "12" ------ 意外结果！

TypeScript 通过类型提前发现问题：

function add(a: number, b: number): number {
  return a + b;
}
add("1", 2); // ❌ 编译错误：Argument of type 'string' is not assignable to parameter of type 'number'.

✅ 类型是文档，是约束，更是安全保障。

---

二、TypeScript 基础类型详解

1. boolean ------ 布尔值

let isLoading: boolean = false;
let hasPermission: boolean = true;

⚠️ 注意：不要写成 Boolean（这是构造函数，会创建对象）。

---

2. number ------ 数字（所有数字都是浮点数）

let age: number = 25;
let price: number = 99.99;
let hex: number = 0xff;     // 十六进制
let binary: number = 0b1010; // 二进制
let octal: number = 0o744;   // 八进制

---

3. string ------ 字符串

let name: string = "Alice";
let greeting: string = `Hello, ${name}!`; // 模板字符串

---

4. null 和 undefined

• 默认情况下，null 和 undefined 是所有类型的子类型（在 strictNullChecks: false 时）；
• 强烈建议开启 strictNullChecks: true （默认在 tsconfig.json 中启用），此时它们只能赋值给自身或 void。

let u: undefined = undefined;
let n: null = null;

// 开启 strictNullChecks 后：
let x: number = null; // ❌ Error!
let y: number | null = null; // ✅ 正确做法

✅ 最佳实践 ：显式声明可空类型（如 string | null），避免隐式 null。

---

5. void ------ 无返回值

表示函数没有返回值（或返回 undefined）：

function log(message: string): void {
  console.log(message);
  // return; // 隐式返回 undefined
}

// ⚠️ 不要将 void 用于变量（除非你明确知道在做什么）
let unusable: void = undefined; // 只能赋值 undefined 或 null（非严格模式）

---

6. never ------ 永不存在的值

表示永远不会返回的函数（抛出异常或无限循环）：

function throwError(message: string): never {
  throw new Error(message);
}

function infiniteLoop(): never {
  while (true) {}
}

// never 是所有类型的子类型，但没有类型是 never 的子类型

💡 用途：确保函数穷尽所有分支（如 switch 语句）。

---

7. any ------ 任意类型（慎用！）

let anything: any = 123;
anything = "hello";
anything.toFixed(); // 不报错，但运行时可能崩溃！

⚠️ 危险 ：any 会绕过所有类型检查，破坏 TypeScript 的核心价值。

✅ 替代方案 ：优先使用 unknown（见下文）。

---

8. unknown ------ 安全的"任意类型"

unknown 是 any 的安全版本：可以接收任何值，但不能直接操作。

let value: unknown = "hello";

// ❌ 错误：Object is of type 'unknown'
// value.toUpperCase();

// ✅ 必须先做类型检查
if (typeof value === "string") {
  value.toUpperCase(); // ✅ 现在 value 是 string
}

✅ 最佳实践：

• API 返回数据、用户输入等不确定类型 → 用 unknown；
• 需要类型断言时 → 先收窄为具体类型。

---

9. bigint ------ 大整数（ES2020+）

let big: bigint = 100n;
let huge: bigint = BigInt(100);

需在 tsconfig.json 中设置 "target": "ES2020" 或更高。

---

10. symbol ------ 唯一标识符

let sym1: symbol = Symbol("id");
let sym2: symbol = Symbol("id");
console.log(sym1 === sym2); // false ------ 每次 Symbol() 都唯一

---

三、数组与元组

1. 数组类型

两种写法：

// 方式1：元素类型后加 []
let numbers: number[] = [1, 2, 3];

// 方式2：使用泛型 Array<类型>
let strings: Array<string> = ["a", "b"];

// 混合类型？用联合类型
let mixed: (string | number)[] = ["a", 1];

---

2. 元组（Tuple）------ 固定长度和类型的数组

// 表示：[字符串, 数字]
let person: [string, number] = ["Alice", 25];

// 解构安全
const [name, age] = person; // name: string, age: number

// 越界访问会报错（开启 strict 模式）
person[2] = "error"; // ❌ Tuple type '[string, number]' of length '2' has no element at index '2'.

✅ 适用场景：函数返回多个固定类型值（如 React 的 useState）。

---

四、类型推断（Type Inference）

TypeScript 会自动推断变量类型，通常无需显式标注：

let count = 10;        // 推断为 number
let message = "hi";    // 推断为 string
let isActive = true;   // 推断为 boolean

// 函数返回值也能推断
function add(a: number, b: number) {
  return a + b; // 推断返回 number
}

✅ 最佳实践：

• 函数参数、对象属性、导出成员 → 显式标注类型（提高可读性）；
• 局部变量、简单表达式 → 依赖类型推断（减少冗余）。

---

五、字面量类型（Literal Types）

类型可以是具体的值：

let direction: "left" | "right" | "up" | "down";
direction = "left";  // ✅
direction = "top";   // ❌ Error!

// 常用于配置选项
type Theme = "light" | "dark";
function setTheme(theme: Theme) { ... }

💡 结合联合类型，可实现枚举效果 （比 enum 更轻量）。

---

六、最佳实践总结

✅ 推荐做法

场景	建议
函数参数/返回值	显式标注类型
对象/接口属性	显式标注
局部变量	依赖类型推断
不确定的外部数据	使用 unknown + 类型守卫
可空值	显式声明 `T
固定选项	使用字面量联合类型 （如 `"success"
避免	any、隐式 any（开启 noImplicitAny）

⚙️ tsconfig.json 关键配置（推荐开启）

{
  "compilerOptions": {
    "strict": true,                // 启用所有严格类型检查
    "noImplicitAny": true,         // 禁止隐式 any
    "strictNullChecks": true,      // 严格 null/undefined 检查
    "noImplicitReturns": true,     // 确保函数所有分支都有返回
    "noUnusedLocals": true,        // 报告未使用变量
    "noUnusedParameters": true     // 报告未使用参数
  }
}

🔑 开启 strict: true 是专业 TS 项目的标配！

---

七、常见误区

❌ 误区1：到处写类型注解

// 冗余！
let name: string = "Alice";
let age: number = 25;

✅ 改为：

let name = "Alice";
let age = 25;

❌ 误区2：滥用 any

// 危险！
const data: any = fetchData();
data.someMethod(); // 运行时可能崩溃

✅ 改为：

const data: unknown = fetchData();
if (typeof data === "object" && data && "someMethod" in data) {
  (data as SomeInterface).someMethod();
}

❌ 误区3：忽略 undefined 处理

function getName(user?: User) {
  return user.name; // ❌ 可能是 undefined！
}

✅ 改为：

function getName(user?: User) {
  return user?.name; // 可选链
  // 或
  if (user) return user.name;
}

---

八、结语

TypeScript 的基础类型看似简单，但正确使用它们是写出高质量代码的基石。记住：

类型不是束缚，而是照亮代码的灯塔。

从今天起：

• 开启 strict 模式；
• 拒绝 any，拥抱 unknown；
• 显式处理 null/undefined；
• 让类型成为你的第一份文档。

掌握这些，你就已经超越了 80% 的 TypeScript 初学者！