在WebStorm中搭建TypeScript开发环境非常简单，以下是详细的步骤：

1. 安装WebStorm

首先，确保你已经安装了WebStorm。如果还没有，可以从JetBrains官网下载并安装最新版本的WebStorm。

2. 创建新的项目

打开WebStorm并创建一个新的项目：

1. 点击 File > New Project。
2. 选择 Node.js Express App 或者选择 Empty Project。
3. 设置项目名称和路径，点击 Create。

3. 配置TypeScript

安装TypeScript

在新项目中，打开终端并运行以下命令来全局安装TypeScript编译器：

npm install -g typescript

初始化TypeScript项目

在项目根目录下运行以下命令来生成 tsconfig.json 文件：

tsc --init

这个文件包含了TypeScript编译器的配置选项，你可以根据需要进行修改。

安装类型定义

对于TypeScript项目，可能需要安装一些类型定义文件。例如，如果你使用Node.js，可以运行以下命令：

npm install --save-dev @types/node

4. 在WebStorm中配置TypeScript编译器

1. 打开 File > Settings （在macOS上是 WebStorm > Preferences）。
2. 导航到 Languages & Frameworks > TypeScript。
3. 选择 Enable TypeScript Compiler。
4. 在 TypeScript Version 中选择你安装的TypeScript版本（通常会自动检测到）。

5. 创建TypeScript文件

1. 在项目目录中，右键点击 src 文件夹（如果不存在可以创建一个），选择 New > TypeScript File。
2. 输入文件名并开始编写TypeScript代码。

6. 运行和调试TypeScript代码

编译TypeScript文件

你可以手动编译TypeScript文件，运行以下命令：

tsc

或者在 tsconfig.json 中设置 watch 模式，使编译器在文件更改时自动编译：

{
  "compilerOptions": {
    // 其他配置选项
    "watch": true
  }
}

运行TypeScript文件

可以使用 ts-node 运行TypeScript文件，而无需手动编译：

npm install -g ts-node
ts-node src/index.ts

7. 配置代码格式化和静态检查

为了提高代码质量，可以配置ESLint和Prettier：

安装ESLint和Prettier

在项目根目录下运行以下命令：

npm install --save-dev eslint prettier eslint-config-prettier eslint-plugin-prettier @typescript-eslint/parser @typescript-eslint/eslint-plugin

配置ESLint

创建 .eslintrc.json 文件，添加以下内容：

{
  "parser": "@typescript-eslint/parser",
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier"
  ],
  "plugins": [
    "prettier"
  ],
  "rules": {
    "prettier/prettier": "error"
  }
}

配置Prettier

创建 .prettierrc 文件，添加以下内容：

{
  "semi": true,
  "singleQuote": true,
  "printWidth": 80
}

配置WebStorm

在WebStorm中，导航到 File > Settings > Languages & Frameworks > JavaScript > Prettier，启用 On code reformat 和 On save 选项。

总结

通过以上步骤，你已经在WebStorm中成功搭建了TypeScript开发环境。你可以开始编写、运行和调试TypeScript代码，并使用ESLint和Prettier来保持代码风格一致和代码质量高。