环境配置篇

1. 安装Node.js

TypeScript 是 JavaScript 的超集，它需要 Node.js 环境。首先，你需要下载并安装 Node.js。由于 TypeScript 是基于 Node.js 的，因此安装 Node.js 的时候，也会安装 TypeScript 编译器。

  • 访问 Node.js 官网 下载适合你操作系统的版本。
  • 安装完成后，打开命令行工具，输入 node -v 和 npm -v 检查 Node.js 和 npm 是否安装成功。

2. 安装 TypeScript

安装 TypeScript 可以通过 npm 来完成。

npm install -g typescript

安装完成后，同样可以通过命令行工具输入 tsc -v 来检查 TypeScript 是否安装成功。

3. 配置 TypeScript 配置文件

TypeScript 项目需要一个配置文件 tsconfig.json，它定义了编译 TypeScript 时的选项。

  • 在项目根目录下创建一个 tsconfig.json 文件。
  • 使用以下模板作为起点：
{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true
  },
  "include": [
    "src"
  ],
  "exclude": [
    "node_modules",
    "**/*.spec.ts"
  ]
}

4. 初始化项目

为了更好地管理项目依赖，建议使用 npm 或 yarn 初始化项目。

npm init -y

或者

yarn init -y

开发篇

1. 创建项目结构

一个典型的 TypeScript 项目结构如下：

my-typescript-project/
├── src/
│   ├── index.ts
│   └── utils/
│       └── helper.ts
├── package.json
└── tsconfig.json

2. 编写 TypeScript 代码

在 src/index.ts 文件中，你可以开始编写 TypeScript 代码。例如：

// src/index.ts
function greet(name: string): string {
  return `Hello, ${name}!`;
}

console.log(greet('TypeScript'));

3. 运行 TypeScript 代码

使用 Node.js 运行 TypeScript 代码：

npx tsc
node dist/index.js

这里，npx 会自动调用 TypeScript 编译器，将 TypeScript 代码编译成 JavaScript 代码，然后使用 Node.js 运行编译后的 JavaScript 代码。

开发调试篇

1. 使用断点调试

在 TypeScript 代码中，你可以设置断点来调试代码。在 Visual Studio Code 等编辑器中，你可以通过点击代码行左侧的空白区域来设置断点。

2. 使用 TypeScript 的调试选项

在 tsconfig.json 文件中，你可以设置一些调试选项，例如：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "sourceMap": true,
    "moduleResolution": "node",
    "outDir": "./dist",
    "rootDir": "./src"
  }
}

这里的 sourceMap 选项会生成一个 .map 文件，它可以帮助调试工具定位到原始的 TypeScript 代码。

3. 使用浏览器开发者工具

如果你想在浏览器中调试 TypeScript 代码，你可以使用浏览器的开发者工具。将编译后的 JavaScript 代码和 .map 文件放入你的项目目录中，然后在浏览器中打开相应的 HTML 文件，就可以使用浏览器的开发者工具进行调试了。

总结

通过以上步骤，你就可以快速搭建一个 TypeScript 项目，并进行开发调试了。希望这篇攻略能帮助你顺利上手 TypeScript！