第一个TS程序 - 元素码农

发布时间: 2025-03-31 09:18

↑

# 第一个TS程序

本文将指导你创建和运行第一个TypeScript程序，帮助你快速上手TypeScript开发。

## 创建项目目录

首先，创建一个新的项目目录并初始化：

```bash
mkdir first-typescript
cd first-typescript
npm init -y
npm install typescript --save-dev
```

## 配置TypeScript

创建TypeScript配置文件：

```bash
npx tsc --init
```

这会生成一个基本的tsconfig.json文件。对于我们的第一个程序，保持默认配置即可。

## 编写第一个程序

创建一个名为`hello.ts`的文件：

```typescript
// 声明一个带类型注解的函数
function greet(name: string): string {
    return `Hello, ${name}!`;
}

// 声明一个带类型的变量
let userName: string = "TypeScript";

// 调用函数并打印结果
console.log(greet(userName));

// 演示类型检查
// 这行会导致编译错误，因为类型不匹配
// greet(123);  // 错误：类型'number'的参数不能赋给类型'string'的参数

// 使用接口定义对象结构
interface User {
    name: string;
    age: number;
}

// 创建符合接口的对象
const user: User = {
    name: "TypeScript User",
    age: 25
};

// 使用对象的属性
console.log(`User ${user.name} is ${user.age} years old.`);
```

## 编译和运行

### 方法1：直接编译单个文件

```bash
# 编译TypeScript文件
npx tsc hello.ts

# 运行编译后的JavaScript文件
node hello.js
```

### 方法2：使用TypeScript编译器监视模式

```bash
# 启动编译器的监视模式
npx tsc hello.ts --watch
```

在另一个终端窗口运行：
```bash
node hello.js
```

### 方法3：使用ts-node直接运行

安装ts-node：
```bash
npm install ts-node --save-dev
```

直接运行TypeScript文件：
```bash
npx ts-node hello.ts
```

## 程序解释

让我们来分析这个简单程序的各个部分：

1. **类型注解**：
   - `name: string`：参数类型声明
   - `: string`：返回值类型声明

2. **变量声明**：
   - `let userName: string`：变量类型声明

3. **接口使用**：
   - `interface User`：定义对象的结构
   - `const user: User`：使用接口作为类型

4. **类型检查**：
   - 尝试传入错误类型的参数会在编译时报错
   - TypeScript提供了静态类型检查

## 代码组织

对于实际项目，建议采用以下目录结构：

```
first-typescript/
├── src/
│   └── hello.ts
├── dist/
│   └── hello.js (编译后生成)
├── package.json
└── tsconfig.json
```

更新tsconfig.json配置：

```json
{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true
  }
}
```

## 添加npm脚本

在package.json中添加便捷的脚本命令：

```json
{
  "scripts": {
    "build": "tsc",
    "start": "ts-node src/hello.ts",
    "dev": "ts-node-dev --respawn src/hello.ts"
  }
}
```

现在可以使用以下命令：
- `npm run build`：编译TypeScript文件
- `npm start`：直接运行TypeScript文件
- `npm run dev`：以开发模式运行（自动重新加载）

## 调试

使用VS Code调试TypeScript程序：

1. 创建.vscode/launch.json文件：
```json
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Debug TypeScript",
      "program": "${workspaceFolder}/src/hello.ts",
      "preLaunchTask": "tsc: build - tsconfig.json",
      "outFiles": ["${workspaceFolder}/dist/**/*.js"]
    }
  ]
}
```

2. 在代码中设置断点
3. 按F5启动调试

## 下一步

现在你已经成功创建并运行了第一个TypeScript程序，接下来你可以：

1. 学习更多TypeScript类型系统的特性
2. 探索类和接口的使用
3. 了解模块化开发
4. 实践更复杂的程序设计

通过这个简单的示例，你已经体验到了TypeScript的基本特性。继续深入学习，你会发现TypeScript能够帮助你编写更可靠、更易维护的代码。