typescript快速安装、配置并使用_typescript安装教程

目录

一、TypeScript 安装

NPM 安装 TypeScript

****重点注意事项 

Visual Studio Code 介绍

Windows 上安装 Visual Studio Code

二、如何在vscode中实时监听ts文件

1.创建tsconfig.json文件

2.tsconfig.json配置文件中，修改outDir配置项,自定义编译后的js文件输出位置

3.vscode中，点击上方栏位run task，选择ts监听

三、tsconfig.json文件中的常用配置项

1》禁用注释

2》只编译或者不编译某些ts文件

3》自定义编译后的js文件输出位置

4》是否允许编译js文件

 5》strict 限制

 1）开启   "strictNullChecks": true  属性

              禁止将 null和undefined 赋值给变量

2） "noImplicitAny": true 属性

     禁止使用任意类型 any

6》"incremental": true 开启该属性，则实行增量编译：已经编译过的内容不会再次编译

7》"checkJs": true  开启该属性， js语法错误，则提示报错

8****》 "noEmitOnError": true      /* 若ts代码报错则不生成编译文件*/

9》其他属性请参考官方文档中的编译选项，也可以点击下方链接查看

---

一、TypeScript 安装

本文介绍 TypeScript 环境的安装。

我们需要使用到 npm 工具安装，如果你还不了解 npm，可以参考我们的NPM 使用介绍。

NPM 安装 TypeScript

如果你的本地环境已经安装了 npm 工具，可以使用以下命令来安装。

使用国内镜像：

npm config set registry https://registry.npmmirror.com

安装 typescript：

npm install -g typescript

安装完成后我们可以使用 tsc 命令来执行 TypeScript 的相关代码，以下是查看版本号：

$ tsc -v
Version 3.2.2

然后我们新建一个 app.ts 的文件，代码如下：

var message:string = "Hello World" ；

console.log(message)

通常我们使用 .ts 作为 TypeScript 代码文件的扩展名。

然后执行以下命令将 TypeScript 转换为 JavaScript 代码：

tsc app.ts

****重点注意事项 

就这样编译之后会出现的一些问题

1，同时打开ts和js文件 则ts中变量名会出现报错

如图：

 当然可以选择关闭js文件解决，但这不是最好的方法，别急，我先说第二个问题，然后再说更好的处理方法

2，不管ts中使用 var  let  const声明变量，编译后的ts文件中都是var声明 

  感觉编译出来的js只拥有es5的规范，怎么办？

解决办法  实时监听ts文件变化或者 使用 tsc 命令编译 下面  “二、如何在vscode中实时监听ts文件” 里面会说到。

注意：如果提示：无法加载文件........更改默认(LocalMachine)作用域的执行策略，请 使用“以管理员身份运行”选项启动 Windows PowerShell。 那么就在电脑开始菜单中找到Windows PowerShell，然后右键， 选择“以管理员身份运行”，输入下面这行命令

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned
 

然后回车------ 输入大写的A ，再回车  
 

 可以看到监听之后 就不会出现上面说的两个问题

这时候在当前目录下（与 app.ts 同一目录）就会生成一个 app.js 文件，代码如下：

var message = "Hello World"; console.log(message);

使用 node 命令来执行 app.js 文件：

$ node app.js 
Hello World

TypeScript 转换为 JavaScript 过程如下图：

---

Visual Studio Code 介绍

很多 IDE 都有支持 TypeScript 插件，如：Visual Studio，Sublime Text 2，WebStorm / PHPStorm，Eclipse 等。

本章节主要介绍 Visual Studio Code，Visual Studio Code 是一个可以运行于 Mac OS X、Windows 和 Linux 之上的，针对于编写现代 Web 和云应用的跨平台源代码编辑器，由 Microsoft 公司开发。

下载地址：Visual Studio Code - Code Editing. Redefined。

Windows 上安装 Visual Studio Code

1、下载 Visual Studio Code。

2、双击 VSCodeSetup.exe 图标 

 安装。

3、安装完成后，打开 Visual Studio Code 界面类似如下：

4、 我们可以在左侧窗口中点击当前编辑的代码文件，选择 open in command prompt（在终端中打开），这时候我们就可以在屏幕的右侧下半部分使用 tsc 命令来执行 TypeScript 文件代码了。

二、如何在vscode中实时监听ts文件

         当ts文件保存后自动编译到js中，j使得js文件中的内容跟随ts文件自动刷新

1.创建tsconfig.json文件

在项目当前目录下使用集成终端或者git使用tsc --init命令生成配置文件：

tsc --init

 生成了tsconfig.json文件

2.tsconfig.json配置文件中，修改outDir配置项,自定义编译后的js文件输出位置

属性：outDir："./ " 

值默认 ./  在根目录下，

 这里演示设置编译后的js文件输出在js目录下：

如果没有该目录则会自动新建目录，并将编译后的js文件输出在该目录下

3.vscode中，点击上方栏位run task，选择ts监听

   点击"终端"-----"运行任务"---选中当前文件夹---"ts监视"

如下图：

 

 

 

若要终止ts监视， 则点击vscode上方“终端”-----终止任务---选中当前任务“ts监视” 

  直接使用   tsc demo.ts  方法编译，并不会使用tsconfig.json文件中的规范进行编译

，所以创建好tsconfig.json文件中的规范后  可以使用  tsc 命令 按照sconfig.json文件中的规范进行编译，默认编译根目录 下所有的ts文件

  如果不需要编译某些ts文件，或者只编译某些ts文件，往下看

   

三、tsconfig.json文件中的常用配置项

1》禁用注释

  // "removeComments": true,                           /* Disable emitting comments. 禁用注释 */

如果不想编译后的js文件中有注释，这里取消注释 ，   启动禁用注释代码 

         每一项配置代码后面的/*  */中都有英文注释，可以自行翻译查看配置项代码作用

"removeComments": true,                           /* Disable emitting comments.  */

2》只编译或者不编译某些ts文件

1）如果只想编译某些ts文件 可以像下面这样在tsconfig.json文件中写入代码 

"include":[ ]， 数组中填写目录和文件名 并用引号引起来，如：

"include":["./demo.ts","./index.ts"],

 tsconfig.json文件中的配置是json类型，插入这行代码之后别忘记在前方或者后面加一个 ","    逗号,这里在首行插入代码，所以将逗号加在后面

2）不编译某些ts文件

"exclude":[ ]   

用法同上，tsc 命令 默认是编译根目录所有ts文件，如果不需要编译某些文件，或者只编译某些文件，则需要用到exclude或者include 

除此之外，exclude和include还可以使用正则匹配文件

图片意思为：编译src目录下文件名为任意值的所有ts文件，排除当前位置 任意目录下 任意文件名.spec.ts文件

3）编译指定文件

"fiels":[ ]        比起include和exclude  ，使用files属性   必须填写标准的文件名 不可以使用正则

3》自定义编译后的js文件输出位置

属性：outDir："./ " 

值默认 ./  在根目录下，

 这里演示设置编译后的js文件输出在js目录下：

如果没有该目录则会自动新建目录，并将编译后的js文件输出在该目录下

4》是否允许编译js文件

allowJs 属性

    // "allowJs": true,    

会将js代码编译为es5格式的代码，有需要的情况可以取消注释开启允许 比如es6语法导出模块

如下：

 5》strict 限制

要启用strict属性下方 红色框内的某属性，则需要先将strict注释，然后将该属性注释取消，开启该属性

 1）开启   "strictNullChecks": true  属性

              禁止将 null和undefined 赋值给变量

 可以看到，赋值为 null 后代码直接报错了 编译时也报错 无法编译

2） "noImplicitAny": true 属性

     禁止使用任意类型 any

开启该属性后  比较明显的一点是函数传入参数时必须规定参数类型

下面这样写就报错了 

开启该属性后函数传参的正确写法 

 这里就说两个常用的，其他属于strict附属的属性 用到请自行查看

6》"incremental": true 开启该属性，则实行增量编译：已经编译过的内容不会再次编译

7》"checkJs": true  开启该属性， js语法错误，则提示报错

        在已检查类型的JavaScript文件中启用错误报告

8****》 "noEmitOnError": true      /* 若ts代码报错则不生成编译文件*/

    "noEmitOnError": true                               /* 若ts代码报错则不生成编译文件*/

这个属性很重要 开发中必备

9》其他属性请参考官方文档中的编译选项，也可以点击下方链接查看

编译选项 · TypeScript中文网 · TypeScript——JavaScript的超集https://www.tslang.cn/docs/handbook/compiler-options.html