C32. 基础类型标注

2.1. TypeScript 保障类型安全

JavaScript 是动态类型语言，变量类型在运行时确定，容易引发隐性错误（如拼写错误、类型不匹配）。 TypeScript 通过静态类型检查，在代码编写阶段提前发现类型错误，提升代码健壮性。

示例对比

// JavaScript（隐性错误）
function add(a, b) {
  return a + b;  // 若传入字符串和数字，可能得到意外结果
}
console.log(add("10", 20));  // 输出 "1020" 而非 30

// TypeScript（类型安全）
function add(a: number, b: number): number {
  return a + b;
}
console.log(add("10", 20));  // 编译报错！参数类型不匹配

INFO

类型安全的核心是：在编译阶段阻止类型错误，而非运行时才发现问题。

2.2. TypeScript 基础类型

TypeScript 支持以下基础类型：

类型	说明
number	数值（整数或浮点数）
string	字符串（单引号或双引号包裹）
boolean	布尔值 true 或 false
null	空值（单独类型）
undefined	未定义值（单独类型）
void	表示“无返回值”（函数返回类型）
never	从不返回的函数或类型（如抛出错误或无限循环）
any	任意类型（慎用！完全绕过类型检查）
unknown	未知类型（比 any 更安全，需显式检查后使用）

示例代码

let num: number = 42;
let str: string = "Hello";
let flag: boolean = true;
let maybeNull: null = null;
let maybeUndefined: undefined = undefined;

function noReturn(): void {
  console.log("我无返回值");
}

function errorFunc(): never {
  throw new Error("永远报错");
}

2.3. 使用 type 语句定义类型

通过 type 关键字为复杂类型命名，提升可读性。

示例：类型别名

type Color = "red" | "green" | "blue";  // 联合类型（枚举式）
type Point = { x: number; y: number };  // 对象类型
type Callback = (result: string) => void;  // 函数类型

let color: Color = "red";  // 仅允许 red/green/blue
let cb: Callback = (res) => console.log(res);

WARNING

type 定义的类型无法扩展，若需扩展对象结构，使用 interface。

2.4. 使用 interface 语句定义对象接口

interface 用于定义对象的结构，支持扩展和组合。

// 定义基础接口
interface Person {
  name: string;
  age: number;
}

// 继承接口
interface Employee extends Person {
  employeeId: string;
  retirement(): void;
}

// 实现接口
const alice: Employee = {
  name: "Alice",
  age: 30,
  employeeId: "E123",
  retirement() {
    return "Retire at 65";
  }
};

INFO

接口的属性默认为必需，若允许可选属性，用 ? 标记：

interface User {
  name: string;
  email?: string;  // 可选属性
}

2.5. 函数类型标注

标注函数参数和返回值类型，确保参数与返回值符合预期。

示例：普通函数

// 参数类型标注
function multiply(a: number, b: number): number {
  return a * b;
}

// 可选参数与默认值
function greet(name: string, greeting?: string): string {
  return `${greeting || "Hi"} ${name}`;
}
greet("Bob");  // "Hi Bob"
greet("Bob", "Hello");  // "Hello Bob"

箭头函数

const add = (a: number, b: number): number => a + b;

// 函数类型别名
type MathFunc = (a: number, b: number) => number;
const subtract: MathFunc = (x, y) => x - y;

2.6. 使用 as 进行类型断言

当 TypeScript 无法推断类型时，用 as 明确类型。 语法：expression as Type。

// 将联合类型断言为具体类型
let value: number | string = "123";
const num = (value as number) + 5;  // 若 value 是字符串，运行时会出错！

// 将 any 类型断言为具体类型
const data: any = "Hello";
const length = (data as string).length;  // 明确告诉编译器 data 是字符串

WARNING

类型断言不改变值本身，仅告诉编译器类型。若实际类型不符，运行时可能出错！

2.7. 使用 satisfies 验证对象

TypeScript 4.9+ 新特性：用 satisfies 确保对象符合接口，无需类型断言。

interface Settings {
  theme: "light" | "dark";
  fontSize: number;
}

// 使用 satisfies 验证对象
const config = {
  theme: "light",
  fontSize: 14,
  invalidKey: "error!"  // ❌ 编译报错！Settings 中没有此属性
} satisfies Settings;

// 对比类型断言写法：
const config2 = {
  theme: "light",
  fontSize: 14,
  invalidKey: "error!"  // ✅ 通过，但实际可能不符合接口
} as Settings;

TIP

satisfies 会严格检查对象是否符合类型，而 as 仅忽略类型检查。

知识回顾

核心要点

1. 类型安全：通过静态检查避免运行时错误。
2. 基础类型：number、string、boolean 等，以及 any/unknown 的慎用。
3. 自定义类型：
   • type 定义别名（如联合类型、对象类型）。
   • interface 定义对象结构并支持扩展。
4. 函数标注：参数类型、返回值类型、可选参数。
5. 类型断言与验证：
   • as 强制类型转换（需谨慎）。
   • satisfies 严格验证对象是否符合类型。

课后练习

1. 单选题：以下哪个类型表示“从不返回的函数”？

   • A. void
   • B. never
   • C. unknown
   • D. any

2. 填空题：定义一个名为 Coordinate 的类型，表示 { x: number; y: number }，应使用： ____ Coordinate = { x: number; y: number };

3. 代码纠错：

   interface Animal {
     name: string;
     sound(): string;
   }
   const cat: Animal = {
     name: "Whiskers",
     sound() { return "Meow" },  // ❌ 缺少分号或逗号
   };

4. 综合题：

   1. 定义一个接口 Book，包含 title（字符串）、author（字符串）、year（数字）。
   2. 编写函数 printBookInfo，接受 Book 类型参数并输出信息。
   3. 使用 satisfies 验证一个对象是否符合 Book 接口。