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. nullundefined

  • 默认情况下,nullundefined 是所有类型的子类型(在 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 —— 安全的“任意类型”

unknownany 的安全版本:可以接收任何值,但不能直接操作

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 | nullT | undefined
固定选项使用字面量联合类型(如 "success" | "error"
避免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 初学者!

Logo

Agent 垂直技术社区,欢迎活跃、内容共建。

更多推荐