TypeScript 基础语法

环境装好后，我们来系统过一遍 TS 的基础语法。好消息是：TS 的语法和 JS 几乎完全一样——它是 JS 的超集，所以 JS 怎么写，TS 就怎么写。TS 只是在此之上额外提供了一套"类型注解"的写法。这一章就专门讲 TS 多出来的那部分。

1. TS 程序的整体结构

一个典型的 TS 程序长这样——结构和你写的 JS 一模一样（导入、声明、函数、调用），只是到处多了类型标注：

// TS 程序的结构和 JS 完全一样,只是多了类型标注
// 一个典型的小程序:导入 → 类型声明 → 函数 → 调用

// 1. 类型声明(后面会细讲)
interface User {
  name: string;
  age: number;
}

// 2. 函数:参数和返回值都标了类型
function describe(u: User): string {
  return `${u.name}, ${u.age} 岁`;
}

// 3. 调用
const xiaoMing: User = { name: "小明", age: 20 };
console.log(describe(xiaoMing));
// 输出: 小明, 20 岁

如果你把所有 : 类型 的部分都删掉，剩下的就是合法的 JS。这就是"超集"的直观含义。

2. 类型注解：TS 的核心语法

TS 最核心的动作就是类型注解——用冒号给变量、参数、返回值标类型。这一招贯穿整个 TS：

// 类型注解的语法核心就是冒号 + 类型名
let username: string = "小明";     // 变量:冒号后写类型
let age: number = 20;
let scores: number[] = [90, 85];   // 数组:元素类型加 []
let tags: Array<string> = ["ts"];  // 数组的泛型写法(等价于上面)

// 函数:参数冒号 + 类型,括号后冒号 + 返回类型
function add(a: number, b: number): number {
  return a + b;
}

// 没有返回值的函数用 void
function log(msg: string): void {
  console.log(msg);
}

记住这一招，TS 就掌握了一半。后面所有的高级特性（接口、泛型、工具类型），本质上都是在教你怎么写出更复杂的类型注解。

3. 注释

TS 的注释规则和 JS 完全一致，分单行、多行、文档注释三种：

// 单行注释:双斜杠开头,和 JS 完全一样

/* 多行注释:用斜杠星号包裹,
   可以跨多行,和 JS 一样 */

/**
 * 文档注释:两个星号开头
 * 常用于给函数、类写说明
 * @param name 名字
 * @returns 问候语
 */
function greet(name: string): string {
  return "你好, " + name;
}

VS Code 等编辑器会读取文档注释，在你调用函数时把说明悬浮显示出来，所以给公共函数写文档注释是个好习惯。

4. 分号与代码风格

TS 对分号的态度和 JS 一样：可加可不加，但团队要统一。实际项目里几乎都用 Prettier 自动格式化，开发者根本不用纠结：

// TS 和 JS 一样,语句可以用分号结尾,也可以省略(推荐统一风格)
let a = 1
let b = 2;
console.log(a + b)

// 但有一类语句必须加分号:解构后立即调用、数组开头等
// 为了安全,团队通常会统一加或统一不加(靠 Prettier 自动格式化)

5. TS 新增的关键字

JS 的所有关键字（let、const、function、class、if、for...）TS 全部保留。在此之上，TS 新增了几个类型相关的关键字：

interface：声明接口（描述对象形状）。
type：声明类型别名。
enum：声明枚举。
implements：表示一个类实现了某个接口。
as：类型断言（告诉编译器"我确信这是某个类型"）。
readonly：只读修饰符。
public / private / protected：类的访问修饰符。
keyof / infer / is：高级类型关键字（后面会讲到）。

// TS 在 JS 的关键字之外,新增了几个类型相关的关键字:
//   interface  声明接口
//   type       声明类型别名
//   enum       声明枚举
//   implements 类实现接口
//   as         类型断言
//   readonly   只读修饰符
//   public / private / protected  访问修饰符
//   is / keyof / infer / unique   高级类型关键字

// 下面是这些关键字的样子,后面会逐个细讲
interface User { name: string }
type ID = number;
enum Color { Red, Green }
class Animal implements User { name = "x"; }
const n = "42" as number;
const arr: readonly number[] = [1, 2];

不用现在就背下来，后面每一篇都会专门讲。这里只是先混个眼熟。

6. 大小写敏感与命名规范

TS 和 JS 一样区分大小写：User 和 user 是两个不同的东西。命名有几个约定俗成的规范：

变量、函数：小驼峰，如 userName、getUser。
类型、接口、类、枚举：大驼峰，如 User、TodoItem、Color。
常量：全大写下划线，如 MAX_SIZE。
接口名：习惯不加 I 前缀（不像 Java），直接 User 而非 IUser。
类型参数（泛型）：单大写字母，如 T、K、V。

7. TS 是可选类型的

一个容易忽略的细节：TS 的类型标注大部分时候是可选的。如果你不写，TS 会自动推断类型。很多初学者以为"写 TS 就是每行都要标类型"，其实不是——能推断的就别手写，代码更干净。下一篇讲变量时会详细说"类型推断"。

小结

这一章你了解了 TS 程序的整体骨架：和 JS 一样的结构，多了类型注解这一招；知道了注释、分号规则没变；认识了几个新增的关键字。下一篇我们看 TS 的变量——重点讲类型注解和类型推断。

← 上一篇 TypeScript 环境安装

下一篇 TypeScript 变量 →

✈️💬