TypeScript入门笔记(一）：安装和自动编译

2019 年 11 月 28 日
筆記

TypeScript是一种由微软开发的自由和开源的编程语言。是JavaScript的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。随着vue3.0开源以来，学会typescript语言语言已经迫在眉睫，不然就会被这个时代所淘汰。

TypeScript学习手册： https://www.tslang.cn/docs/handbook/basic-types.html

开发typescript需要的准备工作就不说了 1：安装Node.js 2：nodejs的版本管理工具npm

今天来从零开始，记录一下TypeScript入门笔记

1：全局安装

打开cmd，右键管理员身份运行，输入以下命令

npm  install  -g  typescript

安装成功之后，开始写ts代码了，因为有些浏览器无法解析es6代码。能解析es5代码。所以需要一边写代码，一边编译成浏览器能识别的js代码，就像写sass一样。那么

怎么在vscode里面配置自动解析？

打开vscode编辑器，导入刚刚在d盘新建一个项目

1：tsc –init

在编辑器Visual Studio Code打开一个终端

进入项目，执行命令tsc –init，这个时候可以看到生成了一个ts的配置文件

打开ts的配置文件（生成tsconfig.json ），将改 "outDir": "./js", 表示index.js要输出到根目录的js里面，修改保存。

2：任务-运行任务选择监视tsconfig.json

在编辑器里面找到任务-运行任务选择监视tsconfig.json ，操作完成之后会发现这个时候，生成了一个js文件了。

ok，现在已经可以在编写代码的时候实现vscode自动编译ts了

现在来写一段TypeScript语法测试一下，在ts文件里面写一段定义变量的指定类型代码，var str:string="你好ts"，打开js/index.js，可以看到，已经将这句代码解析为浏览器能够识别的javascript的代码了。

console.log('你好ts')  function  getData(){    }  var str:string="你好ts";

继续，在根目录里面新建一个index.html，引入js，需要查看ts写出来的语法代码之后，打开这个index,在浏览器里面查看即可，所写的代码测试都可以打印在浏览器了。

<!DOCTYPE html>  <html>      <head>          <meta charset="UTF-8">          <title></title>      </head>      <body>      </body>      <script src="js/index.js"></script>  </html>