TypeScript 基础语法（完整指南）

为什么你需要掌握 TypeScript 基础语法？

在现代前端开发中，TypeScript 已经成为主流语言之一。它并非简单地“给 JavaScript 加类型”，而是一套更严谨、更安全的编程体系。尤其对于初学者和中级开发者而言，掌握 TypeScript 基础语法，就像为你的代码穿上了一件“防错盔甲”。

想象一下：你在写一个函数，接收用户输入，然后处理数据。如果没有类型约束，你可能会不小心把字符串当作数字运算，导致程序崩溃。而 TypeScript 就像一个智能助手，在你写代码时就提醒你：“嘿，这个参数应该是 number 类型，你传了个 string。”

这不仅减少了运行时错误，还让团队协作更高效。当你接手别人的代码时，类型信息能快速告诉你这个变量能干什么、不能干什么。所以，别再犹豫了，今天我们就从最基础的部分开始，一步步掌握 TypeScript 基础语法。

变量声明与类型注解

在 JavaScript 中，变量使用 var、let 或 const 声明，但类型是动态的——变量可以随时变成另一种类型。比如：

let age = 25;
age = "twenty-five"; // 这在 JS 中合法，但在 TypeScript 中会报错

TypeScript 引入了类型注解，让你显式声明变量的类型。语法如下：

let age: number = 25;
let name: string = "Alice";
let isActive: boolean = true;

这里的 : number 就是类型注解，告诉编译器这个变量只能存储数字。如果后续试图赋值非数字类型，编译器会直接报错。

💡 提示：类型注解是 TypeScript 的“语法糖”，它不会影响运行时性能，只在编译阶段生效。

你也可以不显式声明类型，让 TypeScript 自动推断：

let score = 95; // TypeScript 推断为 number 类型
score = "A"; // ❌ 报错：不能将 string 赋值给 number 类型

这种自动推断机制非常实用，尤其在变量初始化时，能减少冗余代码。

基本数据类型详解

TypeScript 支持与 JavaScript 相同的基本类型，但多了类型检查机制。以下是常见类型及其使用场景：

number

用于表示整数和浮点数。支持十进制、二进制、八进制、十六进制写法：

let price: number = 19.99;
let binary: number = 0b1010;  // 二进制：10
let hex: number = 0xFF;       // 十六进制：255

string

表示文本数据。支持模板字符串（反引号）：

let greeting: string = "Hello, TypeScript!";
let name: string = "Bob";
let message: string = `Hello, ${name}! You are ${age} years old.`; // 模板字符串

boolean

布尔值只有 true 或 false，常用于条件判断：

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

null 与 undefined

这两个是特殊的类型，代表“空值”或“未定义”。在 TypeScript 中，它们通常被严格区分：

let empty: null = null;
let notDefined: undefined = undefined;

⚠️ 注意：默认情况下，null 和 undefined 可以赋值给任何类型（如 number），但你可以通过设置 strictNullChecks: true 来禁止这种行为，提高代码安全性。

函数定义与类型约束

函数是编程的核心。在 TypeScript 中，你可以为函数参数、返回值添加类型注解，使函数行为更明确。

基本函数写法

function add(a: number, b: number): number {
  return a + b;
}

const result = add(5, 3); // ✅ 正确
// const wrong = add("5", 3); // ❌ 报错：字符串不能作为 number 参数

这里 a: number 和 b: number 是参数类型，: number 是返回值类型。如果函数没有返回值，使用 void 类型：

function logMessage(message: string): void {
  console.log(message);
}

可选参数与默认参数

有时你希望函数的某些参数是可选的。TypeScript 用 ? 表示可选参数：

function greet(name: string, age?: number): string {
  if (age) {
    return `Hello, ${name}! You are ${age} years old.`;
  } else {
    return `Hello, ${name}!`;
  }
}

greet("Alice");           // ✅ 正确
greet("Bob", 28);         // ✅ 正确
// greet("Charlie", "30"); // ❌ 报错：age 必须是 number 类型

你也可以设置默认值，此时参数不再必须传入：

function multiply(a: number, b: number = 1): number {
  return a * b;
}

multiply(5);      // 返回 5（b 默认为 1）
multiply(5, 3);   // 返回 15

数组与元组类型

创建数组与初始化

数组是存储多个相同类型值的集合。在 TypeScript 中，你可以使用泛型语法或类型别名来声明数组：

// 方法一：泛型语法
let numbers: number[] = [1, 2, 3, 4, 5];

// 方法二：使用 Array<T> 泛型
let names: Array<string> = ["Alice", "Bob", "Charlie"];

// 方法三：混合类型（不推荐，除非明确需要）
let mixed: (string | number)[] = ["a", 1, "b", 2];

✅ 推荐使用 number[] 这种简洁写法，代码更易读。

元组类型（Tuple）

元组是固定长度、固定类型的数组。它适合表示“一组有明确顺序的数据”。

// 一个坐标点：x 和 y 都是 number
let point: [number, number] = [10, 20];

// 一个用户信息：姓名、年龄、是否活跃
let userInfo: [string, number, boolean] = ["Alice", 25, true];

// 使用示例
console.log(`Name: ${userInfo[0]}, Age: ${userInfo[1]}`);

💡 比喻：元组就像一个“信封”，里面装着几样东西，每样东西的位置和类型都固定，不能乱放。

对象类型与接口定义

对象是 JavaScript 中最常用的数据结构。在 TypeScript 中，你可以通过接口（interface）来定义对象的形状。

接口（Interface）基础用法

interface User {
  id: number;
  name: string;
  email: string;
  isActive?: boolean; // 可选属性
}

// 创建对象实例
const user: User = {
  id: 1,
  name: "Alice",
  email: "alice@example.com",
  isActive: true
};

✅ 接口让你在定义对象时，明确知道它应该包含哪些字段，避免遗漏或错写。

接口的扩展与合并

接口支持继承，可以复用已有结构：

interface Person {
  name: string;
  age: number;
}

interface Employee extends Person {
  department: string;
  salary: number;
}

const emp: Employee = {
  name: "Bob",
  age: 30,
  department: "Engineering",
  salary: 80000
};

这样，Employee 继承了 Person 的所有属性，并添加了新的字段。

类型推断与类型别名

类型推断（Type Inference）

TypeScript 会自动分析变量的初始值，推断其类型。例如：

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

这减少了手动写类型注解的工作量，但你仍然可以在需要时显式声明。

类型别名（Type Aliases）

当你需要重复使用复杂的类型时，可以用 type 关键字定义别名：

type ID = number | string; // ID 可以是 number 或 string
type Status = "active" | "inactive" | "pending"; // 联合类型

function getUser(id: ID): { id: ID; status: Status } {
  return {
    id: id,
    status: "active"
  };
}

getUser(123);        // ✅ 正确
getUser("abc");      // ✅ 正确
// getUser(true);     // ❌ 报错：不是 ID 类型

💡 类型别名让代码更清晰，尤其在处理联合类型、复杂对象时非常有用。

总结：从基础走向规范

TypeScript 基础语法虽然看似简单，但却是构建高质量、可维护代码的基石。从变量声明、函数定义，到对象接口、类型别名，每一步都在为代码的“可读性”和“可维护性”加分。

你可能会觉得加类型注解有点繁琐，但请记住：写代码的人是人，读代码的人也是人。当你写下 : number 时，你不仅在告诉编译器，更是在告诉未来的自己或团队成员：“这个变量只能是数字，别搞错了。”

掌握 TypeScript 基础语法，是你迈向专业开发的重要一步。别再让运行时错误困扰你，从今天开始，用类型为你的代码保驾护航。