Windows系统配置TypeScript

十秒耿直拆包选手

已于 2023-11-24 13:31:41 修改

阅读量283

点赞数

分类专栏：前端Web 文章标签： typescript javascript 前端

于 2023-11-24 13:29:56 首次发布

原文链接：https://blog.csdn.net/Marker__/article/details/103915346

版权

前端Web 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍了TypeScript的基本概念，它是JavaScript的增强版，支持面向对象编程。重点讲解了TypeScript的安装、编译原理以及如何在WebStorm中配置自动编译TypeScript，以提升开发效率。

摘要由CSDN通过智能技术生成

1、TypeScript 基本介绍

Typescript 是由微软开发的一款开源的编程语言，它是 Javascript 的超级，遵循最新的 ES6、ES5 规范（TypeScript 包含 ES6，ES6 包含 ES5）。TypeScript 扩展了 JavaScript 的语法，TypeScript 更像后端 Java、C# 这样的面向对象语言可以让 JavaScript 开发大型企业项目。

目前谷歌也在大力支持 Typescript 的推广，谷歌的 Angular2.x+ 就是基于 Typescript 语法，最新的 Vue、React 也可以集成 TypeScript 。由此可见 TypeScript 是前端未来开发的趋势，所以还不赶紧学起来！

Typescript 的本质：其实很简单，Typescript 就是在 JavaScript 的变量后面指定：类型，由于 Typescript 是编译性语言，它需要 ts compiler 编译器对 ts 代码先编译成 JavaScript 代码，才能在浏览器中运行。在 ts 编译为 JavaScript 的过程中会对变量进行类型检查。如果检查通过，编译器就会将 ts 代码中的变量类型修饰符：类型删掉，将 ts 编译成 JavaScript 代码，如果检查不通过，则会在编译的的过程中报错，但是报错实际上并不阻碍编译，ts 最终还是会被编译成 JavaScript 的。如果你希望在编译的工程中有报错即停止遍历，可以通过官方推荐的 noEmitOnError : true 来设置。

2、Typescript 安装编译

安装 Typescript 之前首先要安装 node.js，然后全局执行 npm install -g typescript 即可完成对 Typescript 的安装。验证 Typescript 是否安装成功可在 cmd 命令行输入：tsc -v 查看相应的安装版本。

Typescript 文件的后缀名以 .ts 为结尾，浏览器没法直接解析 .ts 文件（浏览器也无法直接解析 ES6 的代码），如果要使用 Typescript 开发项目，就需要将 Typescript 转化成浏览器能直接解析的 JavaScript 代码，比如要转化使用 TypeScript 编写的 app.ts 文件，通过命令 tsc app.ts 可以将 Typescript 转化成浏览器能直接解析的 JavaScript 代码。TypeScript 转换为 JavaScript 过程如下图：

但是上面这个手动将 Typescript 转化成浏览器能直接解析的 JavaScript 的过程在开发的过程中会很麻烦，因此我们需要配置一下编译器，让编译器在我们编写 Typescript 的过程中就能同时解析 Typescript 代码。个人习惯使用 WebStorm，下面说一下使用 WebStorm 开发 TypeScript 的配置。

3、配置 WebStorm 自动编译 TypeScript

3.1、安装 node.js：如果想安装 Typescript 的老弟还没装 node.js 的话。node.js网址：Node.js

验证是否安装成功可在 cmd 命令行输入：node -v 和 npm -v 查看相应的安装版本。

3.2、安装 Typescript ：全局执行 npm install -g typescript 即可完成对 Typescript 的安装。

验证是否安装成功可在 cmd 命令行输入：tsc -v 查看相应的安装版本。

3.3、配置 tsconfig.json文件：可在项目目录下运行 tsc --init 命令创建 tsconfig.json 文件，也可通过编译器直接创建该文件。

创建完成之后需要修改 tsconfig.json 文件配置，将文件内部的 "outDir"："./js" 代码，设置成解析后的 ts 文件输出路径。

3.4、WebStorm 配置：WebStorm 是提供了创建 TypeScript 的模版文件，但是不提供自动编译 ts 文件为 js 和 map 文件，这里需要手动配置一下：File → Settings → Tools → File Watchers → + → <custom> ，配置内容如下：

配置完成之后，点击 OK → Apply → OK 完成，再次编辑 ts 文件就会自动编译为 js 并输出到指定路径下了。

注：新版本的 WebStorm 自带配置自动编译 TypeScript 功能，通过 File → Settings，调出 Settings 界面，然后进行如下配置：默认 Compile 那里的 Enable TypeScript Compiler 是没有打对勾的，需要手动打上对勾。打对勾后默认是使用选择 Use tsconfig.json 的设置方式的。所以需要新建一份 tsconfig.json 配置文件，WebStorm是提供了模版，直接新建，选择创建 tsconfig.json File 即可。