TypeScript 安装、编译与自动编译配置指南

TypeScript 概述

一、TypeScript概述

1、TypeScript是由微软开发的开源、跨平台编程语言，作为JavaScript的超集，它增加了可选的静态类型和基于类的面向对象编程特性，兼容ES5与ES6规范（支持直接编写ES5/ES6代码）。 2、TypeScript扩展了JavaScript语法，确保现有JavaScript程序可在TypeScript环境中运行。其设计目标为大型应用开发，最终编译输出为JavaScript代码。 3、最新版的Vue和React均支持集成TypeScript，且得到谷歌的大力推广，例如Angular 2.x及以上版本即基于TypeScript语法构建。 4、TypeScript代表了未来开发的标准与趋势。

详解TypeScript的安装、使用及自动编译教程

TypeScript 安装与基础编译

二、TypeScript的安装与编译流程

前置条件：安装TypeScript前需确保已安装Node.js。

npm install -g typescript tsc helloworld.ts

1、安装TypeScript

通过命令行执行安装：npm install -g typescript

TypeScript文件以.ts为后缀，浏览器无法直接解析.ts文件或ES6代码，因此需编译为浏览器可识别的ES5代码。

2、解析ts文件

将TypeScript文件编译为可执行的JavaScript文件。

在代码目录新建index.ts文件，并复制以下代码至该文件：

console.log("hello world")

在命令行中cd进入index.ts所在目录，执行tsc index.ts命令。此时目录下会生成index.js文件，其内容与index.ts一致。

由于每次开发都需手动运行编译命令较为繁琐，若能在编写代码时自动完成编译则更为便捷，这便引入了自动编译功能。

开发工具自动编译配置

3、自动编译配置

下文介绍如何在VScode和HBuilder X开发工具中配置自动编译功能。

VScode中自动编译.ts文件的配置步骤：

1、在项目根目录执行命令 tsc–init 以生成 tsconfig.json 配置文件。打开该文件，移除outDir的注释并设置编译输出目录。 2、点击菜单“任务-运行任务”，选择“tsc：监视-tsconfig.json ”，即可实现代码的自动生成。

修改后的index.js文件示例：

保存文件后，即可观察到生成的index.js文件，内容如下：

HBuilder X中自动编译.ts文件的配置步骤：

1、菜单栏选择：工具–插件安装； 2、搜索并安装TypeScript插件； 3、手动编译：在ts文件名上右键，选择“外部命令/插件–typescript–编译TypeScript”，即可生成对应的js文件； 4、自动编译配置：在ts文件名上右键，选择“外部命令/插件–typescript–插件配置”，找到以下配置项：

//是否在保存时自动触发。如配为true，就会在保存时自动触发 "onDidSaveExecution": false

将false值修改为true

5、重启HBuilder，再次修改并保存文件，即可自动生成对应的js文件。

总结

至此，关于TypeScript的安装、使用及自动编译的文章介绍完毕。如需了解更多相关TypeScript的安装、使用及编译内容，请搜索本站历史文章或继续浏览后续相关文章，感谢大家的支持！