01ts简介和相关配置

一、tscript简介

1.tscript是什么？

TypeScript（简称：TS）是 JavaScript 的超集（JS 有的 TS 都有）。

TypeScript = Type + JavaScript（为 JS 添加了类型系统）。

TypeScript是一种由微软开发的开源、跨平台的编程语言。它是JavaScript的超集，最终会被编译为JavaScript代码。

2012年10月，微软发布了首个公开版本的TypeScript，2013年6月19日，在经历了一个预览版之后微软正式发布了正式版TypeScript

TypeScript的作者是安德斯·海尔斯伯格，C#的首席架构师。它是开源和跨平台的编程语言。

TypeScript扩展了JavaScript的语法，所以任何现有的JavaScript程序可以运行在TypeScript环境中。

TypeScript是为大型应用的开发而设计，并且可以编译为JavaScript。

TypeScript 是 JavaScript 的一个超集，主要提供了类型系统和对 ES6+ 的支持，它由 Microsoft 开发，代码开源于 GitHub 上

TypeScript 是 JavaScript 的一个超集，主要提供了类型系统和对 ES6+ 的支持，它由 Microsoft 开发，代码开源于 GitHub (opens new window)

TypeScript 是微软开发的开源编程语言，设计目标是开发大型应用。

可以在任何浏览器、任何计算机、任何操作系统上运行。

2.TypeScript 相比 JS 的优势

JS 的类型系统存在“先天缺陷” ，绝大部分错误都是类型错误（ Uncaught TypeError ）。

• 类型化思维方式，使得开发更加严谨，提前发现错误，减少改 Bug 时间。

• 类型系统提高了代码可读性，并使维护和重构代码更加容易。

• 补充了接口、枚举等开发大型应用时 JS 缺失的功能。

• 类型系统允许 JavaScript 开发者在开发 JavaScript 应用程序时使用高效的开发工具和常用操作比如静态检查和代码重构。

  二、安装相关工具

  Node.js/浏览器，只认识 JS 代码，不认识 TS 代码。

  需要先将 TS 代码转化为 JS，然后就可以在 Node.js/浏览器中运行了。

  1、安装vscode

  前端开发工具有很多，大家可以自行百度，在这里就不在赘述了。在这里我们选择的工具是大部分人都在用的vscode。

  Visual Studio Code（简称：VSCode），微软开发的代码编辑工具。

  （一）下载： 下载地址

​ 安装相关步骤进行安装即可

​ （二）安装中文汉化插件：Chinese (Simplified) Language Pack for Visual Studio Code

​ （三）点击右下角弹出的对话框，重启（Restart）VSCode。

2、安装 Node 的运行环境

你可以到Node.js官网去下载 Node 并进行安装(https://node.js.org)，建议你下载LTS版本,也就是长期支持版本。

安装完成之后运行node -v 或者 npm -v命令查看安装的版本，如果可以输出版本号，说明你的 Node 安装已经没有任何问题了。

nodejs中含有npm，npm是nodejs的包管理器（package manager）有了node之后我们就可以使用 npm 命令安装相应的插件。

**3.TypeScript 开发环境搭建 **

如果你想使用 TypeScript 来编写代码，你需要先安装一下它的开发环境，这并不复杂。

typescript：就是用来解析 TS 的工具包。提供了 tsc 命令，实现了 TS -> JS 的转化

你要使用 TypeScript 先要在你的系统中全局安装一下TypeScript，这里你可以直接在 VSCode 中进行安装，安装命令可以使用 npm ，如果改过淘宝镜像之后可以使用cnpm，获取yarn都可以

npm install typescript -g
//获者
yarn global add typescript

三、建立项目目录、编译 TS 文件

1.创建ts文件：

• 在桌面中创建文件夹：bufanCode。
• 在文件夹上点击鼠标右键，然后用VSCode打开文件夹。
• 在 VSCode 中新建ts文件：hello.ts。
• 写代码：在 hello.ts 文件中，在hello.ts中随意写一些代码，并保存，比如：

let num:number=10;
console.log(num)

2.执行代码：

①TS代码 -> JS代码：在当前目录打开终端，输入命令 tsc hello.ts 敲回车，hello.ts文件就编译成了普通的hello.js文件了。

② 执行hello.js文件：输入命令 node hello.js，我们可以看到执行之后的结果：10；

3.简化TS执行步骤：

通过上面的demo，每次ts代码需要分为两步执行,即先把ts文件转化为普通的js文件然后在运行js文件：

tsc hello.ts
node hello.js

我们可以使用 ts-node 包，“直接”在 Node.js 中执行 TS 代码。

（1）安装ts-node包：

npm install ts-node –g

（2）执行文件

ts-node hello.ts。

四、在Hbuilder中编译ts

在hb中自动编译ts文件**----就是ts文件转化为浏览器能够识别的js文件；

1：下载安装插件 ts编译 ts语言服务

2：package.json onDidSaveExecution默认值是false ----true

3：重启浏览器

五、配置文件 tsconfig.json

除了上述提供的方法编译TS之外，我们也可以使用tsconfig.json文件进行编译，tsconfig.json文件中指定了用来编译这个项目的根文件和编译选项。所以这个文件也叫做 typescript 的编译配置文件。

接下来我们就看一下这个配置文件如何使用。

1、生成tsconfig.json

我们可以在合适的位置新建一个文件夹，比如名字叫做DemoTs,然后打开VSCode，把文件托到编辑器中，然后打开终端,输入tsc --init。

输入完成后，就会出现tsconfig.json文件。

打开tsconfig.json文件，我们会发现有很多的配置项。

2.使用tsconfig.json编译ts文件

tsconfig.json文件已经生成了，接下来就可以验证一下文件是否可以编译ts文件

在DemoTs目录下新建两个文件分别为：demo1.ts 和 demo2.ts 分别下一些简单的代码：

demo1.ts:

//这是第一部电影
let move1:string="你好，李焕英！"
console.log(move1);

demo2.ts:

//这是第二部电影
let move2:string="唐人街探案3";
console.log(move2);

然后我们打开刚才的tsconfig.json文件，找到找到complilerOptions属性下的removeComments:true选项，把注释去掉。这个配置项的意思是，编译时不显示注释，也就是编译出来的js文件不显示注释内容。

然后我们执行之前编译的ts的命令：tsc demo1.ts

打开编译生成的demo1.js文件，发现注释内容依然存在。

说明tsconfig.json文件没有起作用。如果要想编译配置文件起作用，我们可以直接运行tsc命令，这时候tsconfig.json才起作用，我们可以看到生成的js文件已经不带注释了。

但是这个时候我们发现所有的ts文件都被编译了，有的时候我们希望只编译我们需要的那个文件，那怎么办呢？

3.编译指定的ts文件

我们总结了三种编译指定文件的方法。

（1）使用 include 配置

include是包含的意思。include属性是用来指定要编译的文件的，比如现在我们只编译demo1.ts文件，而不编译demo2.ts文件，就可以这样写。

 "include": ["demo1.ts"], 

注意：配置文件不支持单引号，所以这里都要使用双引号

这时候再编译，就只编译demo1.ts文件了。

（2）使用 exclude 配置

exclude是不包含，除什么文件之外，意思是写这个属性之外的文件才能进行编译。比如我们还是要编译demo1.ts文件，这时候的写法就应该是这样了。

{
  "exclude":["demo2.ts"],
  "compilerOptions": {
      //any something
      //........
  }
}

这样写仍然只有demo1.ts被编译成了。

（3）使用 files 配置

files的配置效果和include几乎一样，只要配置到里边的文件都可以编译

{
  "files":["demo1.ts"],
  "compilerOptions": {
      //any something
      //........
  }
}

结果是还是只有demo.ts文件被编译。

4.compilerOptions配置项

它是告诉TypeScript具体如何编译成js文件的，里边的配置项非常多，我们先介绍几个简单的配置项。

（1）removeComments

removeComments是complerOptions的一个子属性，它的用法是告诉TypeScript对编译出来的js文件是否显示注释。removeComments的值设置为true，就是在js中不显示注释。

（2）strict 属性

strict属性如果设置为true,就代表我们的编译和书写规范，要按照TypeScript最严格的规范来写

（3）noImplicitAny 属性

noImplicitAny属性的作用是，允许你的注解类型 any 不用特意表明，这是官方 API的解释。

我们修改一下刚才demo1.ts中的代码，写一个方法，方法的参数我们设置成任意类型(any)。

function move(name) {
  return name;
}

这时候我们的TypeScript是进行报错的，我们用tsc编译也是报错的。这就是因为我们开启了strict:true。先注释掉，然后把noImplicitAny的值设置为false,就不再报错了。

如果设置为noImplicitAny:true,意思就是值就算是 any（任意值），你也要进行类型注释。

function move(name:any){
    return name;
}

（4）strictNullChecks 属性

我们先把strictNullChecks设置为false,它的意思就是，不强制检查 NULL 类型。还是在demo1.ts中编写代码

let people:string=null;

代码写完后，你会发现这段代码是不报错的，如果不修改默认值，一定是报错的，这就是我们配置了“不强制检验 null 类型”。如果你设成strictNullChecks:true，这时候就报错了。

（5）rootDir 和 outDir

现在我们的js文件直接编译到了根目录下，和ts文件混在了一起。工作中我们希望打包的js都生成在特定的一个文件夹里。就像我们之前配置webpack一样。

这时候你就可以通过outDir来配置，当然你也可以通过rootDir来指定ts文件的位置，比如我们把所有的 ts 文件都放到 src 下。

{
    "outDir": "./build" ,
    "rootDir": "./src" ,
}

这时候你再在输入tsc,就会有不同的效果了。

（6）编译 ES6 语法到 ES5 语法-allowJs

现在demo2.js中写代码

export const name = "李焕英";

不做任何配置的时候，运行tsc是看不到任何东西的。你需要到tsconfig.js文件里进行修改，修改的地方有两个。

"target":'es5' ,  // 这一项默认是开启的，必须要保证它的开启，才能转换成功
"allowJs":true,   // 这个配置项的意思是联通

这两项都开启后，在使用tsc编译时，就会编译js文件了。

（7）sourceMap 属性

如果把sourceMap的注释去掉，在打包的过程中就会给我们生成sourceMap文件.

sourceMap 简单说就是一个信息文件，里面储存着位置信息。也就是说，转换后的代码的每一个位置，所对应的转换前的位置。有了它，出错的时候，除错工具将直接显示原始代码，而不是转换后的代码。这无疑给开发者带来了很大方便。

（8）noUnusedLocals 和 noUnusedParameters

比如现在我们修改demo.ts文件的代码，改为下面的样子。

let move2:string="唐人街探案3";
export const name = "张三";

这时候你会发现move2这个变量没有使用，但是我们编译的话，它依然会被编译出来，这就是一种资源的浪费。

//编译后的文件
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.name = void 0;
var move2 = "唐人街探案3";
exports.name = "张三";

这时候我们可以开启noUnusedLocals：true，开启后我们的程序会直接给我们提示不能这样编写代码。

noUnusedParameters方法和noUnusedLocals：true一样。

如果你需要全面的了解，可以查看这个网址：编译选项详解
如果你需要全面的了解，可以查看这个网址：编译选项详解

六、简化编译步骤

vscode自动编译

1). 生成配置文件tsconfig.json
    tsc --init
2). 修改tsconfig.json配置
    "outDir": "./js",
    "strict": false,    
3). 启动监视任务: 
    终端 -> 运行任务 -> 监视tsconfig.json