TypeScript 基本结构

一份 TypeScript 程序通常由注释、导入、类型与变量声明、函数/类定义以及执行语句等部分组成。无论脚本还是大型工程，都遵循"先声明、后使用、有入口"的骨架。下面用一个可运行示例逐段拆解。

结构总览

典型文件从上到下依次包含：

1. 注释：说明文件用途。
2. import 导入：引入其他模块的功能。
3. 类型与接口声明：定义数据结构。
4. 变量与常量声明：存放数据。
5. 函数与类定义：封装可复用逻辑。
6. 执行语句：调用函数并输出结果。

最小可运行程序

// 1. 注释：演示 TS 基本结构
// 2. 导入（示例无外部依赖，故省略）
// 3. 类型定义
type User = { name: string; age: number };
// 4. 常量声明
const user: User = { name: "张三", age: 20 };
// 5. 函数定义
function greet(u: User): string {
    return "你好，" + u.name;
}
// 6. 执行入口
console.log(greet(user)); // 输出：你好，张三

保存为 structure.ts 后执行 tsc structure.ts && node structure.js 即可看到输出。

导入与导出结构

多文件项目靠 import/export 串联，可导出类型、常量或函数：

// types.ts —— 定义并导出
export interface Point { x: number; y: number }
export const origin: Point = { x: 0, y: 0 };

// main.ts —— 导入使用
import { Point, origin } from "./types";
const p: Point = origin;
console.log(p.x, p.y); // 输出：0 0

顶层语句与块结构

代码既可在顶层直接执行，也可放入 {} 块或函数内；块级变量仅块内可见：

let total: number = 0;      // 顶层变量，全文件可见
function add(n: number): void {
    total += n;             // 函数内修改顶层变量
}
{ let inner: number = 5; console.log(inner); } // 输出：5
add(10);
console.log(total);         // 输出：10

程序的入口形式

• Node.js 脚本：文件顶层顺序执行，习惯用 main() 函数收拢入口逻辑。
• 浏览器页面：HTML 用 <script> 引入编译后的 JS，由事件回调驱动。
• 框架应用：由挂载代码启动，如 React 的 createRoot().render(...)。

编译产物的对应关系

类型注解在编译后被擦除，逻辑结构原样保留：

// source.ts
let msg: string = "hi";
console.log(msg);

编译为 source.js 后大致如下：

var msg = "hi";
console.log(msg); // 输出：hi

小结

看懂任何 TS 文件都可按结构拆解：顶部是导入与声明，中部是函数与类，尾部是执行入口；多文件用 export/import 串联，经 tsc 编译即可得到可运行的 JS。