第1课: TypeScript基础入门

什么是TypeScript？

TypeScript是由微软开发的开源编程语言，是JavaScript的超集，为JavaScript添加了静态类型系统。它具有以下特点：

• 静态类型检查，在编译时发现错误
• 完全兼容JavaScript，可以渐进式采用
• 强大的IDE支持和代码提示
• 支持最新的ECMAScript特性
• 适合大型项目开发和团队协作

TypeScript的编译过程

TypeScript代码需要经过编译才能运行在浏览器或Node.js环境中：

TypeScript源码 (.ts) → TypeScript编译器 (tsc) → JavaScript代码 (.js) → 运行时环境

编译过程会进行类型检查，如果发现类型错误，编译将失败，但可以配置为即使有错误也生成JavaScript代码。

TypeScript与JavaScript的关系

TypeScript是JavaScript的超集，这意味着：

• 所有有效的JavaScript代码都是有效的TypeScript代码
• TypeScript添加了类型系统和其他语言特性
• 编译后的TypeScript代码是纯JavaScript代码
• 可以逐步将JavaScript项目迁移到TypeScript

环境搭建

1. 安装Node.js

Node.js是运行TypeScript编译器的必要环境：

• 访问 Node.js官网 下载并安装最新LTS版本
• 安装完成后，在命令行验证安装：

# 检查Node.js版本
node --version

# 检查npm版本
npm --version

2. 安装TypeScript编译器

使用npm全局安装TypeScript编译器：

# 全局安装TypeScript
npm install -g typescript

# 验证安装
tsc --version

# 初始化项目
npm init -y

# 本地安装TypeScript
npm install --save-dev typescript

# 使用npx运行本地安装的编译器
npx tsc --version

3. 配置开发工具

推荐使用以下开发工具获得最佳TypeScript开发体验：

• Visual Studio Code：微软官方开发工具，内置TypeScript支持
• WebStorm：JetBrains的IDE，提供强大的TypeScript支持
• 安装TypeScript相关的扩展和插件

第一个TypeScript程序

创建TypeScript文件

创建一个名为 hello.ts 的文件，并输入以下代码：

// hello.ts - 第一个TypeScript程序

// 使用类型注解声明变量
let message: string = "Hello, TypeScript!";

// 输出消息到控制台
console.log(message);

// 尝试一个简单的计算
let number1: number = 10;
let number2: number = 20;
let sum: number = number1 + number2;

console.log(`The sum of ${number1} and ${number2} is ${sum}`);

编译和运行

在命令行中执行以下命令：

# 编译TypeScript文件
tsc hello.ts

# 查看生成的JavaScript文件
cat hello.js

# 运行生成的JavaScript文件
node hello.js

编译后的 hello.js 文件内容：

// hello.js - 编译后的JavaScript代码
var message = "Hello, TypeScript!";
console.log(message);
var number1 = 10;
var number2 = 20;
var sum = number1 + number2;
console.log("The sum of ".concat(number1, " and ").concat(number2, " is ").concat(sum));

TypeScript编译配置

tsconfig.json配置文件

创建 tsconfig.json 文件来配置TypeScript编译器的行为：

{
  "compilerOptions": {
    // 编译目标版本
    "target": "ES6",
    
    // 模块系统
    "module": "commonjs",
    
    // 输出目录
    "outDir": "./dist",
    
    // 源码目录
    "rootDir": "./src",
    
    // 严格模式（推荐开启）
    "strict": true,
    
    // ES模块互操作
    "esModuleInterop": true,
    
    // 允许导入JSON模块
    "resolveJsonModule": true,
    
    // 生成源映射文件
    "sourceMap": true,
    
    // 移除注释
    "removeComments": false,
    
    // 启用装饰器支持
    "experimentalDecorators": true
  },
  
  // 包含的文件
  "include": [
    "src/**/*"
  ],
  
  // 排除的文件
  "exclude": [
    "node_modules",
    "dist"
  ]
}

项目结构示例

推荐的项目目录结构：

my-typescript-project/
├── src/                    # TypeScript源码目录
│   ├── index.ts
│   ├── utils/
│   │   └── helper.ts
│   └── types/
│       └── user.ts
├── dist/                   # 编译输出目录
├── node_modules/
├── tsconfig.json           # TypeScript配置
└── package.json

编译命令

使用配置文件编译项目：

# 编译整个项目（使用tsconfig.json）
tsc

# 监听模式（文件变化时自动编译）
tsc --watch

# 增量编译（只编译有变化的文件）
tsc --incremental

# 强制重新编译
tsc --force

# 显示编译详细信息
tsc --verbose

{
  "scripts": {
    "build": "tsc",
    "build:watch": "tsc --watch",
    "dev": "tsc && node dist/index.js"
  }
}

TypeScript与JavaScript的对比

类型系统的差异

JavaScript是动态类型语言，TypeScript是静态类型语言：

// JavaScript - 动态类型
function add(a, b) {
  return a + b;
}

// 运行时才会发现错误
add(1, "2"); // "12" - 运行时错误
add(1, 2);   // 3 - 正常

// TypeScript - 静态类型
function add(a: number, b: number): number {
  return a + b;
}

// 编译时就会报错
add(1, "2"); // 编译错误：类型不匹配
add(1, 2);   // 3 - 正常

实际开发中的差异

1. 对象处理

// JavaScript
const user = {
  name: "Alice",
  age: 25
};

// 可以随意添加属性
user.email = "alice@example.com"; // 运行时没问题

// TypeScript
interface User {
  name: string;
  age: number;
}

const user: User = {
  name: "Alice",
  age: 25
};

// 编译错误：属性不存在
user.email = "alice@example.com"; // 编译时报错

2. 函数参数验证

// JavaScript
function processUser(user) {
  console.log(user.name.toUpperCase());
}

// 运行时可能出错
processUser(null); // TypeError: Cannot read property 'name' of null

// TypeScript
function processUser(user: { name: string }) {
  console.log(user.name.toUpperCase());
}

// 编译时错误
processUser(null); // 编译错误：参数不能为null

3. 数组操作

// JavaScript
const numbers = [1, 2, 3];
numbers.push("4"); // 运行时没问题，但类型混乱

// TypeScript
const numbers: number[] = [1, 2, 3];
numbers.push("4"); // 编译错误：类型不匹配

// 定义一个用户接口
interface User {
  name: string;
  age: number;
  email?: string; // 可选属性
}

// 创建用户对象
const user: User = {
  name: "张三",
  age: 25,
  email: "zhangsan@example.com"
};

// 定义问候函数
function greet(user: User): string {
  return `你好，${user.name}！你今年${user.age}岁。`;
}

// 调用函数并输出结果
console.log(greet(user));

// 尝试创建一个没有email的用户
const user2: User = {
  name: "李四",
  age: 30
};

console.log(greet(user2));

// 尝试给user添加不存在的属性
user.phone = "123456789"; // 应该报错

// 尝试传递错误类型的参数
greet("字符串"); // 应该报错

总结

在本课中，我们学习了：

• TypeScript的基本概念和核心价值
• 如何搭建TypeScript开发环境
• 创建和运行第一个TypeScript程序
• 配置TypeScript编译选项
• TypeScript与JavaScript的主要区别