为帮助读者直观理解TypeScript的核心工作流程与类型系统基础，本节设计"从0到1"的实践案例，通过完整开发链路展示TypeScript从编码到运行的全过程，并深入解析类型注解机制与编译原理。

开发环境准备

在开始前需确保已完成TypeScript环境配置（全局安装TypeScript：npm install -g typescript），并通过tsc --version验证安装成功。建议使用代码编辑器（如VS Code）以获得类型提示与语法高亮支持。

步骤1：创建项目结构与文件

首先建立标准项目目录结构，在终端执行以下命令：

mkdir -p ts-demo/src ts-demo/dist  # 创建项目根目录及源码/输出目录
cd ts-demo                        # 进入项目目录
touch src/index.ts                # 创建TypeScript源文件

此结构遵循"源码与输出分离"原则，src目录存放TypeScript源代码，dist目录用于存放编译后的JavaScript文件。

步骤2：编写带类型注解的函数

在src/index.ts中编写核心代码，实现一个简单的问候函数：

// 定义带类型注解的函数
// 参数name的类型注解`: string`约束其必须为字符串类型
// 函数返回值类型注解`: string`约束返回结果必须为字符串类型
function greet(name: string): string {
  return `Hello, ${name}`;  // 使用模板字符串拼接问候语
}

// 调用函数并通过console.log输出结果
// 实参"TypeScript"符合string类型约束，类型检查通过
console.log(greet("TypeScript"));

类型注解核心作用：: string作为类型注解，在编译阶段对变量/参数/返回值施加类型约束。当传入非字符串类型参数（如greet(123)）时，TypeScript编译器会立即抛出类型错误，实现"编译时类型检查"，这是TypeScript区别于JavaScript的核心特性。

步骤3：TypeScript编译过程

执行TypeScript编译器命令将.ts文件转换为JavaScript文件：

tsc src/index.ts --outDir dist  # 将编译结果输出到dist目录

编译完成后，查看dist/index.js文件内容：

function greet(name) {
    return `Hello, ${name}`;
}
console.log(greet("TypeScript"));

对比源码与编译产物可发现，所有类型注解（: string）已被完全移除。这揭示了TypeScript的关键特性：类型系统仅作用于编译阶段，不会影响运行时行为，最终执行的仍是纯JavaScript代码。

TS→JS转换本质：TypeScript编译器（tsc）主要完成两项工作：1）类型检查（若存在类型错误则中断编译）；2）代码转换（移除类型注解、转换ES6+语法至目标环境支持的语法）。这种设计确保TypeScript项目可无缝运行在任何支持JavaScript的环境中。

步骤4：运行编译产物

通过Node.js执行编译后的JavaScript文件：

node dist/index.js  # 执行输出：Hello, TypeScript

运行结果验证了程序逻辑正确性，同时证明TypeScript代码经过编译后与原生JavaScript具有相同的执行行为。

扩展练习：强化类型约束理解

为深化对类型系统的认识，可对greet函数进行扩展：接收姓名（字符串） 与年龄（数字） 两个参数，返回格式化字符串（如"Hello, Alice (25 years old)"）。实现代码如下：

// 扩展函数：接收姓名与年龄参数，强化多类型约束
function greetPerson(name: string, age: number): string {
  return `Hello, ${name} (${age} years old)`;
}

// 正确调用：参数类型完全匹配
console.log(greetPerson("Alice", 25));  // 输出：Hello, Alice (25 years old)

// 错误调用：年龄参数类型不匹配（字符串→数字）
console.log(greetPerson("Bob", "30"));  // TypeScript编译错误：Argument of type 'string' is not assignable to parameter of type 'number'

该练习重点在于体会多参数类型约束：当传入的年龄为字符串类型时，TypeScript会立即捕获类型不匹配错误，有效避免运行时潜在问题。此机制体现了TypeScript"早发现、早解决"的类型安全优势。

通过本案例实践，读者可掌握TypeScript的基础开发流程（编码→编译→运行）、核心特性（静态类型检查）及工作原理（编译时类型擦除），为后续深入学习奠定基础。