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，该文件定义了一个按钮和一个显示输出的元素。
<button id="totalButton">See Total</button>
<div id="totalMessage"></div>
要输出消息，必须将一些代码添加到.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支持的更多信息。
网友评论