环境配置

安装Node.js和npm

在开始搭建TypeScript项目之前，首先需要确保你的计算机上安装了Node.js和npm。Node.js是一个基于Chrome V8引擎的JavaScript运行环境，npm（Node Package Manager）是Node.js的包管理器。

  1. 访问Node.js官网下载适合你操作系统的版本。
  2. 安装Node.js时，确保勾选了“Add Node.js to PATH”选项。
  3. 打开命令行工具，输入node -v和npm -v检查是否安装成功。

安装TypeScript

TypeScript是一个由微软开发的开源编程语言，它是JavaScript的一个超集，增加了类型系统。

  1. 在命令行工具中，输入以下命令安装TypeScript：
npm install -g typescript
  1. 安装完成后，使用以下命令验证是否安装成功：
tsc -v

初始化TypeScript项目

创建项目目录

创建一个用于存放项目的目录，例如mytypescriptproject。

mkdir mytypescriptproject
cd mytypescriptproject

初始化npm项目

在项目目录中，运行以下命令初始化一个npm项目：

npm init -y

这将创建一个package.json文件，其中包含了项目的基本信息。

创建tsconfig.json文件

在项目目录中，创建一个名为tsconfig.json的文件，该文件用于配置TypeScript编译器。

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

这里我们设置了编译目标为ES5，模块系统为CommonJS，开启了严格模式，并允许ES模块和CommonJS模块之间互相导入。

模块化

创建模块文件

在项目目录下创建一个名为src的文件夹，并在其中创建一个模块文件，例如main.ts。

// src/main.ts
console.log('Hello, TypeScript!');

导入模块

在另一个模块文件中，导入并使用上面创建的模块。

// src/greet.ts
import { greet } from './main';

greet();

编译模块

在命令行工具中，运行以下命令编译TypeScript文件：

tsc

编译完成后，会生成一个main.js文件，该文件包含了编译后的JavaScript代码。

开发工具配置

安装Visual Studio Code

Visual Studio Code是一款流行的代码编辑器，它支持TypeScript的开发。

  1. 访问Visual Studio Code官网下载并安装VS Code。
  2. 安装VS Code后，打开它。

安装TypeScript扩展

在VS Code中，打开扩展市场，搜索并安装“TypeScript”扩展。

配置TypeScript配置文件

在VS Code中，创建一个名为.vscode的文件夹，并在其中创建一个名为settings.json的文件。

{
  "typescript.tsdk": "/path/to/your/typescript/lib",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  }
}

这里我们设置了TypeScript的库路径，并启用了自动格式化和代码修复功能。

编译和运行TypeScript项目

在VS Code中，按下F5键或使用“运行和调试”功能运行项目。

恭喜你，现在你已经成功搭建了一个TypeScript项目，并配置了开发环境。你可以开始编写TypeScript代码，并在浏览器中运行它们了。