第2课: 基本类型

TypeScript类型系统概述

TypeScript的类型系统是它的核心特性，提供了强大的静态类型检查能力。理解基本类型是掌握TypeScript的基础。

类型注解语法

TypeScript使用冒号后跟类型名称来标注变量类型：

// 变量名: 类型 = 值
let variableName: typeName = value;

基础类型

1. 布尔类型 (boolean)

布尔类型表示逻辑值：true 或 false。

// 基本用法
let isDone: boolean = false;
let isActive: boolean = true;

// 类型推断
let isLoading = true; // 自动推断为boolean类型

// 布尔运算
let result1: boolean = isDone && isActive;
let result2: boolean = isDone || isActive;
let result3: boolean = !isDone;

实际应用场景

// 用户界面状态控制
let isModalOpen: boolean = false;
let isUserLoggedIn: boolean = true;
let hasPermission: boolean = false;

// 表单验证
function validateForm(formData: any): boolean {
  return formData.name && formData.email && formData.password;
}

// 功能开关
const FEATURE_FLAGS = {
  enableDarkMode: true,
  enableNotifications: false,
  enableBetaFeatures: true
};

2. 数字类型 (number)

数字类型表示所有数值，包括整数、浮点数、二进制、八进制和十六进制数。

// 十进制整数
let decimal: number = 6;

// 十六进制（0x开头）
let hex: number = 0xf00d;

// 二进制（0b开头）
let binary: number = 0b1010; // 十进制10

// 八进制（0o开头）
let octal: number = 0o744; // 十进制484

// 浮点数
let float: number = 3.14;
let scientific: number = 2.5e3; // 2500

// 特殊数值
let infinity: number = Infinity;
let negativeInfinity: number = -Infinity;
let notANumber: number = NaN;

实际应用场景

// 计算相关
let price: number = 99.99;
let quantity: number = 3;
let total: number = price * quantity;

// 百分比计算
let discount: number = 0.15; // 15%
let finalPrice: number = price * (1 - discount);

// 坐标和尺寸
let x: number = 100;
let y: number = 200;
let width: number = 300;
let height: number = 400;

// 配置参数
const CONFIG = {
  maxRetries: 3,
  timeout: 5000,
  port: 8080,
  version: 1.2
};

// 数学计算函数
function calculateArea(radius: number): number {
  return Math.PI * radius * radius;
}

function calculateDistance(x1: number, y1: number, x2: number, y2: number): number {
  return Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
}

3. 字符串类型 (string)

字符串类型表示文本数据，可以使用单引号、双引号或反引号（模板字符串）定义。

// 基本字符串定义
let color: string = "blue";
let message: string = 'Hello World';

// 模板字符串（ES6特性）
let fullName: string = `Bob Smith`;
let age: number = 37;
let sentence: string = `Hello, my name is ${fullName}, I'm ${age} years old.`;

// 多行字符串
let multiLine: string = `
  这是一个
  多行
  字符串
`;

// 字符串操作
let firstName: string = "Alice";
let lastName: string = "Smith";
let fullName2: string = firstName + " " + lastName;
let greeting: string = `Welcome, ${firstName}!`;

实际应用场景

// 用户信息
let username: string = "john_doe";
let email: string = "john@example.com";
let bio: string = `热爱编程的前端开发者，专注于TypeScript和React技术栈。`;

// 消息和通知
const MESSAGES = {
  success: "操作成功！",
  error: "发生错误，请重试。",
  warning: "请注意数据安全。"
};

// URL和路径
let apiUrl: string = "https://api.example.com/users";
let imagePath: string = "/images/avatar.png";
let queryString: string = `?page=1&limit=10&search=${encodeURIComponent("typescript")}`;

// 格式化输出
function formatUserInfo(user: { name: string; age: number; city: string }): string {
  return `姓名：${user.name}，年龄：${user.age}，城市：${user.city}`;
}

// 字符串验证
function isValidEmail(email: string): boolean {
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return emailRegex.test(email);
}

function truncateText(text: string, maxLength: number): string {
  if (text.length <= maxLength) return text;
  return text.substring(0, maxLength) + "...";
}

4. 数组类型 (Array)

数组类型表示相同类型元素的集合，有两种定义方式：类型[] 或 Array<类型>。

// 方式1：类型[]（推荐）
let list: number[] = [1, 2, 3];
let names: string[] = ["Alice", "Bob", "Charlie"];

// 方式2：Array<类型>（泛型语法）
let list2: Array = [1, 2, 3];
let names2: Array = ["Alice", "Bob", "Charlie"];

// 多维数组
let matrix: number[][] = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

// 只读数组
let readonlyNumbers: ReadonlyArray = [1, 2, 3];
// readonlyNumbers.push(4); // 错误：只读数组不能修改

// 数组操作
let numbers: number[] = [1, 2, 3];
numbers.push(4); // [1, 2, 3, 4]
numbers.pop();   // [1, 2, 3]
numbers.map(x => x * 2); // [2, 4, 6]
numbers.filter(x => x > 1); // [2, 3]

实际应用场景

// 数据集合
let users: string[] = ["张三", "李四", "王五"];
let scores: number[] = [85, 92, 78, 96];
let flags: boolean[] = [true, false, true, true];

// 配置列表
const ALLOWED_EXTENSIONS: string[] = [".jpg", ".png", ".gif", ".svg"];
const SUPPORTED_LANGUAGES: string[] = ["zh-CN", "en-US", "ja-JP"];

// API响应数据
interface Product {
  id: number;
  name: string;
  price: number;
}

let products: Product[] = [
  { id: 1, name: "笔记本电脑", price: 5999 },
  { id: 2, name: "智能手机", price: 3999 },
  { id: 3, name: "平板电脑", price: 2999 }
];

// 数组工具函数
function findMax(numbers: number[]): number {
  return Math.max(...numbers);
}

function filterEvenNumbers(numbers: number[]): number[] {
  return numbers.filter(n => n % 2 === 0);
}

function sortUsersByName(users: string[]): string[] {
  return users.sort((a, b) => a.localeCompare(b));
}

5. 元组类型 (Tuple)

元组允许表示一个已知元素数量和类型的数组，各元素类型不必相同。

// 声明元组类型
let x: [string, number];

// 初始化
x = ["hello", 10]; // 正确
x = [10, "hello"]; // 错误

// 访问元素
console.log(x[0].substring(1)); // 正确
console.log(x[1].substring(1)); // 错误，number没有substring方法

6. 枚举类型 (enum)

enum Color {
  Red,
  Green,
  Blue
}
let c: Color = Color.Green;

// 手动赋值
enum Color2 {
  Red = 1,
  Green = 2,
  Blue = 4
}
let colorName: string = Color2[2]; // "Green"

7. Any类型

any类型可以赋任何值，会跳过类型检查。

let notSure: any = 4;
notSure = "maybe a string";
notSure = false; // 都可以

let list: any[] = [1, true, "free"];
list[1] = 100;

8. Void类型

void表示没有任何类型，通常用于函数没有返回值。

function warnUser(): void {
  console.log("This is a warning message");
}

let unusable: void = undefined;

9. Null和Undefined

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

// 默认情况下null和undefined是所有类型的子类型
let num: number = undefined; // 正确（非严格模式）

10. Never类型

never类型表示永不存在的值的类型。

// 返回never的函数必须存在无法达到的终点
function error(message: string): never {
  throw new Error(message);
}

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

let x = 3; // 推断为number类型
x = "hello"; // 错误

// 1. 布尔类型：用户登录状态、功能开关
// 2. 数字类型：价格、数量、百分比、坐标
// 3. 字符串类型：用户名、邮箱、消息模板
// 4. 数组类型：用户列表、分数数组、配置项

// 1. 创建用户信息元组：[姓名, 年龄, 是否激活]
// 2. 定义订单状态枚举：待支付、已支付、已发货、已完成
// 3. 使用元组和枚举处理用户数据

// 1. 使用any类型处理动态数据
// 2. 编写返回void的函数
// 3. 理解never类型的应用场景
// 4. 处理null和undefined值

// 1. 尝试给数字变量赋字符串值
// 2. 给只读数组添加元素
// 3. 访问元组不存在的索引
// 4. 调用不存在的对象属性

// 1. 定义用户接口
interface User {
  id: number;
  name: string;
  email: string;
  age: number;
  isActive: boolean;
}

// 2. 创建用户数组
// 3. 实现用户CRUD操作
// 4. 添加类型安全的验证函数

总结

在本课中，我们深入学习了TypeScript的基本类型系统：

• 基础类型：boolean、number、string等
• 复合类型：数组、元组、枚举
• 特殊类型：any、void、never、null、undefined
• 类型推断：TypeScript自动推断类型的能力