使用WebStorm开发TypeScript应用程序

原文地址：Get Started Developing TypeScript Apps with WebStorm

TypeScript 概述

TypeScript是JavaScript的超集，它包含的特性使其比标准的JavaScript更易于编写和维护。类型是TypeScript的核心，它在编译到JavaScript时执行类型检查。

虽然JavaScript确实包含一些基本类型，但它的类型系统是松散类型的，并且类型是根据它们的用法推断的。开发人员可以在程序执行期间随意更改变量的数据类型。这听起来可能很简单，但它确实是一种容易惹上麻烦的方法！尤其是当从与预期类型不匹配的输入源接受某些数据时。TypeScript提供了完整的类型系统，因为类型对于创建正确的代码来说很重要。

除了数据类型之外，TypeScript和JavaScript一样也是面向对象的，因此您可以创建模型来镜像真实世界中的数据存储或对象。它还执行模块解析并具有命名空间的概念，因此您可以更轻松地组织代码。最后，TypeScript在ECMAScript标准化之前就有许多新的语法功能。由于这些新的编程功能，TypeScript使得编写JavaScript应用程序变得非常容易！

安装和配置TypeScript

您无需执行任何操作即可将TypeScript与WebStorm一起使用。您可以在任何WebStorm项目中使用它，包括使用JavaScript框架或现有项目的内置项目模板。

当您准备开始编写TypeScript代码时，请将tsconfig.json文件（TypeScript配置文件）添加到项目中。 tsconfig.json文件是一个JSON文件，它告诉TypeScript编译器如何将TypeScript编译为JavaScript。在WebStorm中，通过从菜单中选择File - New tsconfig.json File来添加tsconfig.json文件。大多数开发人员将此文件添加到其根目录。

wsfilenewtsconfig.png

默认的tsconfig.json文件如下所示：

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "sourceMap": true
  },
  "exclude": [
    "node_modules"
  ]
}

项目目录和资产可以组织成任何结构，但是，一种流行的约定是创建一个结构，其中TypeScript文件位于src目录中，而编译后的输出位于另一个结构中，例如构建文件夹，类似于以下内容：

tsfilestructure.png

要配置此文件夹结构，必须首先在tsconfig.json文件的“compilerOptions”下添加“outDir”：“build”。您可以通过添加“include”指令作为顶级条目来提醒TypeScript在构建中构建特定文件夹。以下代码段显示了如何包含src / scripts文件夹以进行编译。

"include": [
    "src/scripts/**/*"
]

如果您愿意，可以使用JavaScript压缩包，例如webpack，将输出合并为一个JavaScript文件。

编写TypeScript代码

由于许多TypeScript应用程序是客户端应用程序的一部分，我们将在HTML文件的主体中添加一些简单的HTML，该文件定义了一个按钮和一个显示输出的元素。

See Total
 

要输出消息，必须将一些代码添加到.ts文件中。以下代码显示了如何使用TypeScript显示消息：

function displayTotalPerCustomer(person: string, total: number) {
  let message: string = "Total for " + person + " is " + total;
  document.getElementById("totalMessage").innerText = message;
}

上述TypeScript代码和JavaScript之间只有微小的差别，但在相当大的应用程序中，您会看到更多。注意person和total函数参数的类型注释，以及消息变量。 TypeScript提供了一个完整的类型系统，因此您可以编写易于阅读和维护的代码。您可以在.ts文件中使用TypeScript和JavaScript编写。

请注意WebStorm如何检测并警告您类型不匹配。您可以使用意图或快速修复（Alt-Enter）来解决问题。

tstypemismatch.png

准备好后，使用TypeScript工具窗口编译为JavaScript。请注意，WebStorm同时构建了JavaScript文件和.map文件。映射文件将TypeScript代码映射到其JavaScript输出，并且存在可以允许开发人员调试TypeScript代码的工具。在编译生产时，通常不会构建映射，除非生产调试需要它们。要关闭映射，请在tsconfig文件中将“compilerOptions”下的“sourceMap”设置更改为false。

ts-compile-to-js.gif

测试TypeScript应用程序

编译完代码后，在浏览器中运行应用程序进行测试。在WebStorm中，导航到要启动的页面，然后单击编辑器右上角所选的浏览器图标。您还可以使用WebStorm优秀的调试工具调试TypeScript应用程序。

ws-run-ts-app.png

注意浏览器中的localhost：port地址，指定这是WebStorm的Web服务器进行测试。

ws-test-ts-browser-add-bar.png

总结

WebStorm具有许多用于在TypeScript中开发应用程序的功能。它使入门变得简单，无需添加任何插件或扩展。

请留意更多帖子，了解如何使用带有WebStorm的TypeScript开发应用程序。或者访问WebStorm文档以了解有关TypeScript支持的更多信息。