65.9K
CodeProject 正在变化。 阅读更多。
Home

Atom 中的 TypeScript

slavik57
starIconstarIconstarIconstarIconstarIcon

5.00/5 (2投票s)

2016 年 5 月 6 日

CPOL

6分钟阅读

viewsIcon

32259

在 Atom IDE 中为 TypeScript 开发准备环境的教程。

引言

开始一个新项目有时会很繁琐，有时需要配置的东西太多，一个好的教程真的很有帮助。我在 Atom TypeScript 中开发了几个自己的小型项目，并找到了一个适合我的配置。所以在这篇文章中，我将向你展示一种方法，希望它能帮助你更快地开始你的项目。

必备组件

IDE

那么，让我们从 IDE 配置和插件开始。

市面上有许多优秀的 IDE，经过一番研究，我选择在 Atom 中进行开发，因为它拥有大量可用的插件，而且是免费的。

插件

市面上有许多可用的插件，你可以搜索并安装它们，我将重点介绍帮助你在 TypeScript 中进行开发的插件。你可以在 Atom 设置的“Packages”（包）选项卡中找到并安装插件。

  • atom-typescript：这个插件基本上是 TypeScript 的“圣杯”，它负责编译、整理文件、提供智能感知和许多其他便利功能。如果你想使用 TypeScript 工作，这是一个必不可少的插件。
  • tree-ignore: 这个插件允许你隐藏树状视图中不必要的文件。由于你将使用 TypeScript 开发并将其转译为 JavaScript，因此每个文件至少会有两个文件：\*.ts 文件和 .js 文件（也可能包含映射文件和 \*.d.ts 文件）。树状视图会充斥着你并不真正使用的文件，查找所需文件会非常麻烦。这个插件可以帮助你隐藏不需要的文件。我稍后会展示如何配置它。

配置环境

package.json

关于如何创建 package.json 文件有很多教程，你可以自行搜索，我这里只展示一个基础版本。

打开 Git Bash，导航到你的项目文件夹，然后运行 npm init 命令。设置过程会引导你完成最基本的配置。

tsconfig.json

这个文件基本上包含了 atom-typescript 所需的所有配置。

在 Atom 中打开项目文件夹。按下 Ctrl/Command + Shift + P (Windows/Mac) 并输入“tsconfig”。你应该会看到“Typescript: Create Tsconfig.json Project file”命令。按下回车键。（如果无效，请向项目中添加一个空的“something.ts”文件然后重试，在 tsconfig.json 创建后，你可以删除该文件。）

打开 tsconfig.json 文件，你可以看到它的结构，非常直观。在 atom-typescript git 页面 上有很多可用的配置选项，这是我在几个项目后决定使用的配置文件。

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "isolatedModules": false,
    "jsx": "react",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "declaration": true,
    "noImplicitAny": false,
    "removeComments": true,
    "noLib": false,
    "preserveConstEnums": true,
    "suppressImplicitAnyIndexErrors": true,
    "allowUnreachableCode": false
  },
  "filesGlob": [
    "**/*.ts",
    "**/*.tsx",
    "!node_modules/**"
  ],
  "exclude": [
    "src/**/*.d.ts",
    "index.d.ts",
    "node_modules",
    "typings/browser",
    "typings/browser.d.ts"
  ],
  "compileOnSave": true,
  "buildOnSave": false,
  "atom": {
    "rewriteTsconfig": false,
    "formatOnSave": true
  },
  "formatCodeOptions": {
    "indentSize": 2,
    "tabSize": 2,
    "insertSpaceAfterCommaDelimiter": true,
    "insertSpaceAfterSemicolonInForStatements": true,
    "insertSpaceBeforeAndAfterBinaryOperators": true,
    "insertSpaceAfterKeywordsInControlFlowStatements": true,
    "insertSpaceAfterFunctionKeywordForAnonymousFunctions": false,
    "insertSpaceAfterOpeningAndBeforeClosingNonemptyParenthesis": false,
    "placeOpenBraceOnNewLineForFunctions": false,
    "placeOpenBraceOnNewLineForControlBlocks": false
  }
}

这里有几点需要注意

  • compilerOptions.target - 你可以将其更改为你想要的任何 ES 版本。
  • compilerOptions.module - 我选择了使用 CommonJS，但你可以随意选择 atom-typescript 文档中提供的其他模块系统。
  • compileOnSave/buildOnSave 选项
  • atom.formatOnSave 选项
  • formattingOptions (格式化选项)

你可以在 这里 查看所有选项以及更多内容。

.atomignore

正如我之前所说，tree-ignore 插件允许你隐藏树状视图中不需要的文件。

要配置要忽略的文件，只需在项目文件夹中添加一个 .atomignore 文件，然后写下你想要忽略的文件模式。你可以随时修改该文件，添加或删除任何内容。

这是我通常放在文件中的一个示例

.git
index.js
index.d.ts
src/*/*/*.js
src/*/*/*.d.ts
src/*/*.js
src/*/*.d.ts
src/*.js
src/*.d.ts

如你所见，我所有的源文件都放在 src 目录下。我发现这个插件的一个问题是它不允许你配置深度文件夹模式，因此你无法为 src 目录设置多级深度模式。

.npmignore

如果你打算将你的项目发布到 npm，你应该考虑添加 .npmignore 文件，以使包尽可能小，并且不包含任何不必要的文件。

这是我通常添加到该文件中的一个示例

.atomignore
node_modules
tests
typings
tsconfig.json
typings.json
*.ts
!*.d.ts
.npmignore
*.test.js
*.test.d.ts

.gitignore

如果你使用 GIT，并且出于某种原因不希望提交某些文件，你可以使用 .gitignore 文件忽略它们。我通常不添加它，因为我希望保存我的所有项目（包括 node_modules）。有很多文章在争论你应该这样做与否，你可以根据自己的意愿来决定。

基本文件和文件夹

添加一个空的 index.ts 文件，然后按 F6 进行编译。

添加一个 src 文件夹（或你习惯的其他名称），我把所有源文件都放在这里。

测试

过去，我曾创建过一个单独的文件夹来存放所有的测试文件，但后来我读到一篇文章，它建议将测试文件放在源文件附近，这样更容易找到它们，并且可以避免对源文件和测试文件目录结构进行双重管理，但同样，你可以做任何你想做的事情。

所以，例如，如果你添加了一个文件：src\someClass.ts，那么该文件的测试文件将是：src\someClass.test.ts

你可以看到在 .npmignore 文件中，我忽略了所有匹配“\*.test.ts”模式的文件。

我使用 mocha + sinon + chai 来编写测试，所以我将展示这些配置，如果你使用其他测试框架，你可以将这里展示的原理应用到你的框架上。

当你看到 typings 运行时安装时，那是因为在我写这篇文章的时候，d.ts 文件在 Typings 仓库中不可用，只在 DefinitelyTyped 中有。

安装 Mocha
npm install -g mocha
typings install mocha --save-dev --ambient (typings 0.x)
typings install dt~mocha --global --save-dev

我将其全局安装以便于访问。

你可以在 官方 Mocha 页面 上找到文档。

更新 package.json 文件中的脚本，添加 test 脚本

"scripts": {
    "test": "mocha -c -b src/**/*.test.js"
}

该脚本会运行 src 文件夹中的所有测试文件。如果你在“test”文件夹中管理你的测试文件，只需将 src 改为 test。

-c 代表 color (颜色)，这样测试输出会更易读；-b 代表 break on first failed test (遇到第一个失败的测试时中断)，因为我希望快速失败并修复失败的测试，然后继续处理下一个。你可以根据文档的需要添加/删除这些标志。

要运行测试，你可以在项目文件夹中打开 Git Bash，然后运行以下命令

npm test
安装 Sinon
npm install sinon --save-dev
typings install sinon --save-dev --ambient (typings 0.x)
typings install sinon --save-dev

你可以在 官方 Sinon 页面 上找到文档。

安装 Chai
npm install chai --save-dev
typings install chai --save-dev --ambient (typings 0.x)
typings install chai --save-dev

你可以在 官方 Chai 页面 上找到文档。

运行所有脚本后，你会注意到一些事情发生了

  • 你的 package.json 文件现在有了一个 devDependencies 部分。
  • 添加了一个 typings.json 文件，其中包含 ambientDevDependencies 的类型声明。
  • 项目被添加了一个 typings 文件夹，其中包含 Chai、Sinon 和 Mocha 的 d.ts 文件。

就这些

现在你只需要编写你的代码。

当你需要一个 d.ts 文件时，只需使用以下命令在 typings 仓库中搜索：

typings search something

如果在那找不到，请搜索 ambient 仓库：

typings search something --abmient

找到后，只需将 search 关键字替换为 install 关键字即可安装。

要编译 TypeScript 文件，请使用 F6。

示例

这是一个按照此方式配置的项目：

以下是一些配置方式相同但测试文件在不同文件夹中的项目：

尽情享用！

© . All rights reserved.